Blood Pressure Waveform

Simple line chart displaying the blood-pressure readings of a heart for a short period of time, as described below:

Blood pressure in humans normally ranges between 80-120 mm Hg (millimeters of mercury): 120 during peak systole (when the heart is contracting/pumping); 80 during diastole when the heart is relaxing.

As blood is pumped from the left ventricle, the aortic valve opens allowing the blood to flow up the aortic arch. This is when arterial pressure in the aortic arch rises to about 120 as shown in the figure below. As the heart relaxes, pressure falls back to about 80. But in between there is a slight rise in the pressure when the aortic valve closes, marked by what is called the “Dicrotic Notch (the “V” in the waveform, the bottom of which is about 100.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
</style>
</head>

<body>
<script>
    
var margin = {top: 20, right: 20, bottom: 30, left: 50},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;
    
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// set x,y range
var x = d3.scaleLinear()
    .range([0, width]);  
var y = d3.scaleLinear()
    .range([height, 0]);

// line function
var line = d3.line()
		.x(d => x(d.t))
		.y(d => y(d.value));
  
d3.csv("data.dat", type, (err, data) => {
  if (err) throw err;
  
  x.domain(d3.extent(data, d => d.t));
  y.domain(d3.extent(data, d=> d.value));
  
  svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
 
  svg.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y));

var path = svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

// formats data
function type(d, i) {
  d.value = +d.value;
  d.t = i;
  return d;
}
</script>
</body>

https://d3js.org/d3.v4.min.js