xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Loading CSV Data with D3</title> <link href='https://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'> <style type="text/css"> body { background-color: whitesmoke; font-family: 'Raleway', Helvetica, sans-serif; font-weight: 300; } h1 { font-weight: 400; line-height: 1.5em; border-bottom: 1px solid gray; } svg { background-color: mistyrose; width: 75%; } rect:hover { fill: rebeccapurple; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-size: 11px; } .y.axis path, .y.axis line { opacity: 0; } .y.axis text { -moz-transform: rotate(-25deg) translate(0, -0.5em);-ms-transform: rotate(-25deg) translate(0, -0.5em);-o-transform: rotate(-25deg) translate(0, -0.5em);-webkit-transform: rotate(-25deg) translate(0, -0.5em);transform: rotate(-25deg) translate(0, -0.5em); -moz-transform-origin: top right;-ms-transform-origin: top right;-o-transform-origin: top right;-webkit-transform-origin: top right;transform-origin: top right; } </style> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <h1>California Counties Ranked By Diabetes Rate</h1> <p>Hover over a bar to see the diabetes rate for that county!</p> <svg id="bar-chart" viewBox="0 0 1000 1200" preserveAspectRatio="xMidYMid"> <!-- --> </svg> <script type="text/javascript"> var svg1 = d3.select("svg"), h = document.getElementById('bar-chart').scrollHeight, w = document.getElementById('bar-chart').scrollWidth, padding = [20, 20, 20, 140], hScale = d3.scale.ordinal().rangeRoundBands([ padding[0], h - padding[2] ], 0.1), wScale = d3.scale.linear().range([ 0, w - padding[1] - padding[3] ]), xAxis = d3.svg.axis().scale(wScale).orient("bottom"), yAxis = d3.svg.axis().scale(hScale).orient("left"); //Load in contents of CSV file and create a bar graph d3.csv("CA-diabetes-data.csv", function(data) { var xVal, yVal, rects; // Define columns in CSV associated with x- and y- axes xVal = "Diabetes Value"; yVal = "County"; // Sort the data in order of ascending Diabetes Value (DV) // data.sort(function(a, b) { // return d3.ascending(a["Diabetes Value"], b["Diabetes Value"]); // }); sortUp(data, xVal); // Define domain for wScale wScale.domain([ 0, d3.max(data, function(d){ return +d[xVal]; }) ]); // Define domain for hScale hScale.domain(data.map(function(d) { return d[yVal]; })); // Bind data to rectangles in the SVG element // svg1.selectAll("rect") // .data(data) // .enter() // .append("rect"); rects = bindData(svg1, data, "rect"); // Give rectangles width proportional to DV // and position along y axis determined by index // svg1.selectAll("rect") // .attr("x", 15) // .attr("y", function(d, i) { // return (i * 10) + 5; // }) // .attr("width", function(d) { // return parseInt(d["Diabetes Value"] * 4000); // }) // .attr("height", 8) // .attr("fill", "gray") // .append("title") // .text(function(d) {return d["County"];}); makeBarChart(rects, xVal, yVal); // Add x- and y- axes to container addXAxis(svg1); addYAxis(svg1); }); function sortUp(data, s) { data.sort(function(a, b) { return d3.ascending( a[s], b[s] ); }); } function bindData(container, dataset, shape) { return container.selectAll(shape) .data(dataset) .enter() .append(shape); } function makeBarChart(elements, wBar, hBar) { elements.attr("x", padding[3]) .attr("y", function(d) {return hScale(d[hBar]);}) .attr("width", function(d) {return wScale(d[wBar]);}) .attr("height", hScale.rangeBand()) .attr("fill", "gray") .append("title") .text(function(d) {return (d[wBar] * 100) + "%";}) } function addXAxis(container) { container.append("g") .attr("class", "x axis") .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") .call(xAxis); } function addYAxis(container) { container.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding[3] + ",0)") .call(yAxis); } </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js