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: #80FFCC; padding: 5px; } h1 { border-bottom: solid 5px #000099; font-size: 18pt; } svg {background-color: white;} </style> </head> <body> <h1>DataVis with D3 - Module 3 Exercise</h1> <select id="measureSelect"> <option value="NoInsAdult_pct">Percent of adults without health insurance</option> <option value="NoInsChild_pct">Percent of children without health insurance</option> <option value="Access2Dr_pct">Percent who were unable to see a doctor due to costs</option> <option value="LimitedFood_pct">Percent with limited access to healthy food</option> <option value="Black_pct">Percent African American</option> <option value="Hisp_pct">Percent Hispanic</option> <option value="NHWhite_pct">Percent Non-Hispanic White</option> </select> <p> <script type="text/javascript"> // Selected county measure var selMmeasure = "NoInsAdult_pct"; // Hard-code the measure for now // Tunable variables: var svgw = 1120; var svgh = 600; var barStart = 50; // Down from the top - leave room for title var barOffset = 100; // Shift right - leave room for county names var barHeight = 17 var barPad = 5; //Global variables: var svg = d3.select("body") // An empty SVG .append("svg") .attr("width", svgw).attr("height", svgh); var dataset; //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.NoInsAdult_pct, b.NoInsAdult_pct); }); // Create the bar chart svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", barOffset) .attr("y", function(d, i) { return i * (barHeight + barPad) + barStart; }) .attr("width", function(d) { return d.NoInsAdult_pct * 10; }) .attr("height", barHeight) .attr("fill", "#4A82BD") .append("title") .text(function(d) { return d.CoName + " County's value is " + d.NoInsAdult_pct + " percent"; }); // Add text labels for each bar var d_text = svg.selectAll("text") .data(dataset); // Add the county name to the left of the bar d_text.enter() .append("text") .text(function(d) { return d.CoName; }) .attr("x", 2) .attr("y", function(d, i) { return i * (barHeight + barPad) + barStart + 12; // Add 12 for font size }) .attr("font-size", "12px") .attr("fill", "#000099"); // Add the data value at the end of the bar // d_text.enter() // .append("text") // .text(function(d) { // return d.NoInsAdult_pct; // }) // // .attr("x", 2) // .attr("x", function(d) { // return d.NoInsAdult_pct * 30; // .attr("y", function(d, i) { // return i * (barHeight + barPad) + barStart + 12; // Add 12 for font size // }) // .attr("font-size", "12px") // .attr("fill", "#000099"); // Add a title svg.append("rect") // Title rectangle .attr({ // Using D3's "multivalue maps" x: svgw / 2 - 200, y: 5, width: 400, height: 30, fill: "#FFE0D1"}); svg.append("text") // Title text .attr({ // Using D3's "multivalue maps" x: svgw / 2, y: 25, fill: "#000099", "font-size": 18, "font-weight": "bold", "text-anchor": "middle"}) .text("Maryland County Health Rankings - 2014"); svg.append("line") // X-axis line .attr({ // Using D3's "multivalue maps" x1: barOffset, y1: svgh - 20, x2: barOffset + 1000, y2: svgh - 20, stroke: "#000099"}); svg.append("text") // X-axis 0 .attr({ // Using D3's "multivalue maps" x: barOffset, y: svgh - 6, fill: "#000099", "font-size": 12, "text-anchor": "middle"}) .text("0"); svg.append("text") // X-axis 25 .attr({ // Using D3's "multivalue maps" x: barOffset + 250, y: svgh - 6, fill: "#000099", "font-size": 12, "text-anchor": "middle"}) .text("25"); svg.append("text") // X-axis 50 .attr({ // Using D3's "multivalue maps" x: barOffset + 500, y: svgh - 6, fill: "#000099", "font-size": 12, "text-anchor": "middle"}) .text("50"); svg.append("text") // X-axis 75 .attr({ // Using D3's "multivalue maps" x: barOffset + 750, y: svgh - 6, fill: "#000099", "font-size": 12, "text-anchor": "middle"}) .text("75"); svg.append("text") // X-axis 100 .attr({ // Using D3's "multivalue maps" x: barOffset + 1000, y: svgh - 6, fill: "#000099", "font-size": 12, "text-anchor": "middle"}) .text("100"); }; </script> <p style="font-size:12px">Source: County Health Rankings web site ( <a href="https://https://www.countyhealthrankings.org/"> https://https://www.countyhealthrankings.org/</a> ) additional measures data.</p> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js