[unlisted] Age vs. Systolic Blood pressure

The data for this plot was obtained from the following source: Data Source

The plot was created from guidance from the following video: Video

forked from RobertDelgado's block: [unlisted] Age vs. Systolic Blood pressure

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <title>Rob's Scatter Plot</title>
    <style>
      body{font-family: sans-serif;}

//.circles{fill:"red";}

.legendCells, text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }

.axis-label, .legend-label
      {
        fill: #635F5D;
        font-size: 20pt;
        font-family: sans-serif;
      }

</style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>

</head>

<body>

<h1>Age vs. Systolic Blood Pessure</h1>
  <script>

var pointRadius = 4;
    var margin = {left: 100, right: 20, top: 20, bottom: 180};
    var outerWidth = 940;
    var innerWidth = outerWidth - margin["left"] - margin["right"];
    var outerHeight = 500;
    var innerHeight = outerHeight - margin["top"] - margin["bottom"];

var svg = d3.select("body")
      .append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
    var g = svg
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top +")");

var xAxisG = g.append("g")
      .attr("transform", "translate(0," + innerHeight + ")");

var yAxisG = g.append("g");

var colorLegendG = g.append("g").attr("transform", "translate(45, 27)");

function render(data, x_input, y_input, color_input){

var colorValue = d => d[color_input];
      var max_x = d3.max(data, function(d){return d[x_input];});
      var max_y = d3.max(data, function(d){return d[y_input];});
      var xScale = d3.scaleLinear().range([0,innerWidth]).domain([0,max_x]);
      var yScale = d3.scaleLinear().range([innerHeight,0]).domain([0,max_y]);
      var colorScale = d3.scaleOrdinal().range(d3.schemeCategory10);

var xAxis = d3.axisBottom().scale(xScale).tickPadding(2);
      var yAxis = d3.axisLeft().scale(yScale).tickPadding(2);

xAxisG
        .append("text")
          .attr('class', 'axis-label')
          .attr("x", innerWidth/2)
          .attr("y", margin["bottom"]/4)
          .text(x_input); //x -innerWidth/2, y 100

yAxisG
        .append("text")
          .attr("x", -innerHeight/5)
          .attr('class', 'axis-label')
          .attr("y", -margin["left"]/2)
          .attr("transform", `rotate(-90)`)
          .text(y_input + "(Systolic)");//-60 y innerHeight/2 x

colorLegendG
        .append('text')
          .attr('class', 'legend-label')
          .attr('x', -17)
          .attr('y', -17)
          .text(color_input);

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');

xScale.domain([0, max_x]);
      yScale.domain([0, max_y]);

xAxisG.call(xAxis);
      yAxisG.call(yAxis);

var circs = g.selectAll("circle").data(data);

circs.enter().append("circle")
          .attr("r",pointRadius)
          .attr("fill", d => colorScale(colorValue(d)))
          .attr("cx", function(d){return(xScale(d[x_input]));})
          .attr("cy", function(d){return(yScale(d[y_input]));});

circs.exit().remove();

colorLegendG.call(colorLegend)
        .selectAll('.cell text')
        .attr('dy', '0.1em');
    };

const row = d =>{
      d.Age = +d.Age;
      d.SBP = +d.SBP;
      d.DBP = +d.DBP
      d.Gender = d.Gender;
      return(d);
    };

d3.csv("DominicanHTD.csv", row, function(array){
      render(array, "Age", "SBP", "Gender");
    });
  </script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js