xxxxxxxxxx<html lang = "en"> <head> <meta charset="utf-8"> <title>A trellis plot comparing population and disease count</title> <script src = "https://d3js.org/d3.v4.min.js"></script> <style type="text/css"> </style> </head> <body> <h3>Trellis Plot Comparing Population and Number of Diseases </h3> <script type = "text/javascript"> //Width and height" var w = 900; var h = 900; var padding = 50; var measles = []; var pertussis = []; var smallpox = []; var format = d3.format(".2s"); var x1Scale = d3.scaleLinear(); var y1Scale = d3.scaleLinear(); var x2Scale = d3.scaleLinear(); var y2Scale = d3.scaleLinear(); var x3Scale = d3.scaleLinear(); var y3Scale = d3.scaleLinear(); var x1Axis = d3.axisBottom() .scale(x1Scale) .tickFormat(format) .ticks(7); var y1Axis = d3.axisLeft() .scale(y1Scale) .tickFormat(format) .ticks(7); var x2Axis = d3.axisBottom() .scale(x2Scale) .tickFormat(format) .ticks(7); var y2Axis = d3.axisLeft() .scale(y2Scale) .tickFormat(format) .ticks(7); var x3Axis = d3.axisBottom() .scale(x3Scale) .tickFormat(format) .ticks(7); var y3Axis = d3.axisLeft() .scale(y3Scale) .tickFormat(format) .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 { disease: d.disease, population: parseInt(d.population), number: parseInt(d.number) }; } d3.csv("health.csv", rowConverter, function(data) { var dataset = data; for(var i = 0; i < dataset.length; i++) { var population = dataset[i].population; var number = dataset[i].number; var disease = dataset[i].disease; if(disease == "MEASLES") { measles.push([population,number]); } if(disease == "PERTUSSIS") { pertussis.push([population,number]); } if(disease == "SMALLPOX") { smallpox.push([population, number]); } } x1Scale.domain([0, d3.max(measles, function(d) {return d[0];})]) .rangeRound([padding,(w-padding)/3]); y1Scale.domain([0, d3.max(measles, function(d) {return d[1];})]) .rangeRound([(h-padding)/3,padding]); x2Scale.domain([0, d3.max(pertussis, function(d) {return d[0];})]) .rangeRound([padding,(w-padding)/3]); y2Scale.domain([0, d3.max(pertussis, function(d) {return d[1];})]) .rangeRound([(h-padding)/3,padding]); x3Scale.domain([0, d3.max(smallpox, function(d) {return d[0];})]) .rangeRound([padding,(w-padding)/3]); y3Scale.domain([0, d3.max(smallpox, function(d) {return d[1];})]) .rangeRound([(h-padding)/3,padding]); svg.selectAll("circle1") .data(measles) .enter() .append("circle") .attr("cx",function(d) { return x1Scale(d[0]); }) .attr("cy", function(d) { return y1Scale(d[1]); }) .attr("r", function(d) { return 2; //set all points to radius 2 }); svg.selectAll("circle2") .data(pertussis) .enter() .append("circle") .attr("cx",function(d) { return x2Scale(d[0]); }) .attr("cy", function(d) { return y2Scale(d[1]); }) .attr("r", function(d) { return 2; //set all points to radius 2 }) .attr("transform", "translate(" + (padding+250) + ",0)"); svg.selectAll("circle3") .data(smallpox) .enter() .append("circle") .attr("cx",function(d) { return x3Scale(d[0]); }) .attr("cy", function(d) { return y3Scale(d[1]); }) .attr("r", function(d) { return 2; //set all points to radius 2 }) .attr("transform", "translate(" + (padding+550) + ",0)"); svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (w-padding)/3 + ")") .call(x1Axis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding + ",0)") .call(y1Axis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + 300 + "," + (w-padding)/3 + ")") .call(x2Axis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + (padding+300) + ",0)") .call(y2Axis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + 600 + "," + (w-padding)/3 + ")") .call(x3Axis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + (padding+600) + ",0)") .call(y3Axis); svg.append("text") .attr("transform", "translate (" + 15 + "," + (h/3 - 100) + ") rotate(-90)") .attr("text-anchor", "middle") .text("Disease Count") .attr("fill", "black"); svg.append("text") .attr("x", 100 ) .attr("y", h/3 + 20) .attr("text-anchor", "middle") .text("Measles") .attr("fill", "black"); svg.append("text") .attr("x", 400 ) .attr("y", h/3 + 20) .attr("text-anchor", "middle") .text("Pertussis") .attr("fill", "black"); svg.append("text") .attr("x", 700 ) .attr("y", h/3 + 20) .attr("text-anchor", "middle") .text("Smallpox") .attr("fill", "black"); }); </script> </body></html>