Diya Trend Chart

by tacomanator

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>


<div id="container">
</div>

CSS

.line {
    fill: none;
    stroke-width: 3;
}

.axis {
  stroke: "#555";
  font-family: "Avenir Next Condensed";
  font-size: 0.80rem;
}

.line1 {
  stroke: #3CAEA3;
}

.line2 {
  stroke: #F6D55C;
}
  
.overlay {
  fill: none;
  pointer-events: all;
}

.dot1 {
    fill: #3CAEA3;
    stroke: #fff;
}

.dot2 {
    fill: #F6D55C;
    stroke: #fff;
}

.focus circle {
  fill: none;
  stroke: steelblue;
}

.medicationLine {
  stroke-width: 18;
  stroke-linecap: round;
}

.medicationLabel {
  text-anchor: start;
  alignment-baseline: hanging;
  font-family: "Avenir Next Condensed";
  font-weight: 300;
  stroke: #333333;
  font-size: 0.95rem;
}

JavaScript

var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height


const n = 21; // The number of datapoints
const bottomChartHeight = 130; // The height of the bottom chart section
const systolicMeasurement = () => d3.randomUniform(25)() + 90
const diastolicMeasurement = () => d3.randomUniform(20)() + 50

const dateAccumulator = moment("2018-01-01");
const dates = [...Array(n).keys()].map(i => dateAccumulator.add(10, 'days').toDate())

const xScale = d3.scaleTime()
    .domain([dates[0], dates[n-1]])
    .range([0, width]);

const yScale = d3.scaleLinear()
    .domain([0, 130])
    .range([height-bottomChartHeight, 0]);

const dataset1 = d3.range(n).map(function(d) { return {"y": systolicMeasurement() } })
const dataset2 = d3.range(n).map(function(d) { return {"y": diastolicMeasurement() } })

const svg = d3.select("#container").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height) + ")")
    .call(d3.axisBottom(xScale));


svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height-bottomChartHeight) + ")")
    .call(d3.axisBottom(xScale));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale).ticks(5));


svg.append("text")
   .attr("y", -20)
   .attr("x", -30)
   .attr("class", "medicationLabel")
   .text("Blood pressure");
 
 
const line = d3.line()
    .x(function(d, i) { return xScale(dates[i]); })
    .y(function(d) { return yScale(d.y); }) 
    .curve(d3.curveMonotoneX)

svg.append("path")
    .datum(dataset1)
    .attr("class", "line line1")
    .attr("d",...