xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Module 3 Exercise</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; color: #000099; background-color: #F2F2F2; padding: 5px; } h1 { border-bottom: solid 5px #000099; font-size: 18pt; } svg {background-color: white;} rect:hover {fill: orange;} .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text {font-family: sans-serif;} .x.axis text {font-size: 12px;} .y.axis text {font-size: 14px;} .y.axis path, .y.axis line { opacity: 0.0; /* set the visibility of the y-axis line and ticks*/ } </style> </head> <body> <h1>Maryland County Motor Vehicle Death Rates</h1> <p>Caroline County had the highest rate of motor vehicle deaths among Maryland counties in 2014.</p> <p> <script type="text/javascript"> // Tunable variables: var svgw = 800; var svgh = 600; var pad = { top: 1, right: 20, bottom: 30, left: 120 }; //Global variables: var svg = d3.select("body") // An empty SVG .append("svg") .attr("width", svgw).attr("height", svgh); var dataset; // Scale and axis variables: var widthScale = d3.scale.linear() .range([ 0, svgw - pad.left - pad.right ]); var heightScale = d3.scale.ordinal() .rangeRoundBands([ pad.top, svgh - pad.bottom ], 0.15); var xAxis = d3.svg.axis() .scale(widthScale) .orient("bottom") .ticks(5); var yAxis = d3.svg.axis() .scale(heightScale) .orient("left"); //Load in contents of CSV file, check for errors, and call generateVis() d3.csv("2014 County Health Rankings Maryland - additional_measures.csv", function(error, data) { if (error) { console.log(error); //Log the error. } else { console.log(data); //Log the data. dataset = data; generateVis(); } }); // generateVis: function to generate the bar chart var generateVis = function() { // Sort in descending order dataset.sort(function(a, b) { return d3.descending(+a.MVMort_rate, +b.MVMort_rate); }); // plus signs before the a.* and b.* arguments force a numeric value sort // Set up the input domains widthScale.domain([ 0, d3.max(dataset, function(d) { return +d.MVMort_cih; }) ]); heightScale.domain(dataset.map(function(d) { return d.CoName; } )); // Create the bar chart svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", pad.left) .attr("y", function(d) { return heightScale(d.CoName); }) .attr("width", function(d) { return widthScale(d.MVMort_rate); }) .attr("height", heightScale.rangeBand()) .attr("fill", "#6E9BCA") .append("title") // Add mouseover action .text(function(d) { return d.CoName + " County: " + d.MVMort_rate + " (from " + d.MVMort_cil + " to " + d.MVMort_cih + ")"; }); // Add confidence intervals svg.selectAll("line") .data(dataset) .enter() .append("line") .attr("x1", function(d) { return pad.left + widthScale(d.MVMort_cil); }) .attr("y1", function(d) { return (heightScale.rangeBand() / 2) + heightScale(d.CoName); }) .attr("x2", function(d) { return pad.left + widthScale(d.MVMort_cih); }) .attr("y2", function(d) { return (heightScale.rangeBand() / 2) + heightScale(d.CoName); }) .attr("stroke", "#2C4E71") .attr("stroke-width", "2"); // Add the axes and x-axis label: svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + pad.left + "," + (svgh - pad.bottom - 5) + ")") // Adjusted a bit to account for extra space from using rangeRoundBands .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + pad.left + ",0)") .call(yAxis); svg.append("text") // label the x-axis .attr("x", pad.left - 2) .attr("y", svgh - pad.bottom + 26) .attr("font-size", "11") .text("Motor vehicle deaths per 100,000 people per year"); }; </script> <p style="font-size:12px">Source: County Health Rankings web site ( <a href="https://www.countyhealthrankings.org/" target="_blank"> https://www.countyhealthrankings.org/</a> ), the "Additional Measures" data for 2014.</p> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js