Diabetes Scatter Plot w/ Label

forked from alex-rind's block: Diabetes Scatter Plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    circle.dot {
        stroke: rgba(70, 131, 180, 0.3);
        stroke-width: 2px;
        fill: none;
    }

text.dot {
        font: 10px sans-serif;
        color: black;
    }
    
    .female {
        stroke: rgba(180, 70, 162, 0.3);
    }

.label {
        font: 10px sans-serif;
        color: black;
    }
  </style>
</head>

<body>
  <script>
        // set the dimensions and margins of the graph
        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
            cWidth = 400,
            cHeight = 400,
            width = cWidth + margin.left + margin.right,
            height = cHeight + margin.top + margin.bottom;

// set the ranges
        var x = d3.scaleLinear().range([0, cWidth]);
        var y = d3.scaleLinear().range([cHeight, 0]);

// append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

// Get the data
        const file = d3.csv('https://raw.githubusercontent.com/alex-rind/viztutorial/master/diabetes-small.csv');
        file.then((data) => {

//console.log(data);
          	// values  not be automatically converted to numbers --> coerce by "+"
          	const maxX = d3.max(data, (d) => +d.HbA1c);
          	const maxY = d3.max(data, (d) => +d.BMI);
//          	const maxX = d3.max(data, function (d) { console.log(d); return 1; });
//          	console.log(maxX);
            x.domain([0, maxX]);
            y.domain([0, maxY]);

// Add the scatterplot
            svg.selectAll("circle.dot")
                .data(data)
                .enter().append("circle")
                .classed("dot", true)
                .attr("r", 5)
                .attr("cx", (d) => x(d.HbA1c))
                .attr("cy", (d) => y(d.BMI));

svg.selectAll("text.dot")
                .data(data)
                .enter().append("text")
                .classed("dot", true)
                .attr("x", (d) => x(d.HbA1c))
                .attr("y", (d) => y(d.BMI))
                .style("text-anchor", "end")
          			.text((d) => d.Name);

// Add the X Axis
            svg.append("g")
                .attr("transform", "translate(0," + cHeight + ")")
                .call(d3.axisBottom(x));

svg.append("text")
                .attr("class", "label")
                .attr("x", cWidth)
                .attr("y", cHeight - 5)
                .style("text-anchor", "end")
                .text("HbA1c");

// Add the Y Axis
            svg.append("g")
                .call(d3.axisLeft(y));

svg.append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 10)
                .attr("x", 0)
                .style("text-anchor", "end")
                .text("BMI");

});
  </script>
</body>

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