xxxxxxxxxx<html lang = "en"> <head> <meta charset="utf-8"> <title>A scatterplot comparing population and disease count</title> <script src = "https://d3js.org/d3.v4.min.js"></script> <style type="text/css"> </style> </head> <body> <h3> Scatterplot of Population vs Number of Reported Diseases </h3> <script type = "text/javascript"> //Width and height" var w = 700; var h = 500; var padding = 75; var xScale = d3.scaleLinear(); var yScale = d3.scaleLinear(); var xAxis = d3.axisBottom() .scale(xScale) .ticks(7); var yAxis = d3.axisLeft() .scale(yScale) .ticks(7); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width",w) .attr("height",h); //converts the data to integers var rowConverter = function(d) { return { number: parseInt(d.number), population: parseInt(d.population) } } d3.csv("health.csv", rowConverter, function(data) { dataset = data; xScale.domain([0, d3.max(dataset, function(d) {return d.population;})]) .range([padding,w-padding * 2]); yScale.domain([0, d3.max(dataset, function(d) {return d.number;})]) .range([h-padding,padding]); svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx",function(d) { return xScale(d.population); }) .attr("cy", function(d) { return yScale(d.number); }) .attr("r", function(d) { return 2; //set all points to radius 2 }); svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (h-padding) + ")") .call(xAxis) svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding + ",0)") .text("Disease Count") .call(yAxis); svg.append("text") .attr("transform", "translate (" + 15 + "," + (h/2) + ") rotate(-90)") .attr("text-anchor", "middle") .text("Disease Count") .attr("fill", "black"); svg.append("text") .attr("x", w/2 ) .attr("y", h - 10) .attr("text-anchor", "middle") .text("Population") .attr("fill", "black"); }); </script> </body></html>