xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Bar Chart, Framed</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style type="text/css"> body { margin: 0; background-color: lightGray; font-family: Helvetica, Arial, sans-serif; } #container { width: 800px; margin-left: auto; margin-right: auto; padding: 30px; background-color: white; box-shadow: 3px 3px 5px 6px #ccc; } h1 { font-size: 24px; font: serif; margin: 0; padding: 0; text-align: center; } p { font-size: 14px; margin: 15px 0 10px 0; } a:link { text-decoration: none; color: gray; } a:hover { text-decoration: underline; } a:visited { color: gray; } a:active { color: steelBlue; } svg { background-color: white; } g.bar text { font-size: 11px; font-weight: bold; text-anchor: end; opacity: 0; cursor: default; } g.bar:hover rect { fill: orange; } g.bar:hover text { opacity: 1; } g.bar rect { fill: #9cacff; } g.bar.hi rect { fill: #65e278; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .y.axis path, .y.axis line { opacity: 0; } #buttons{ margin-left: 190px; } .haut{ background-color:orange; } span { margin: 30px; background-color:#9cacff; padding: 5px; } #low:hover, #high:hover{ background-color:orange; cursor: pointer; } </style> </head> <body> <div id="container"> <h1>Top mortality causes in low- vs. high-income countries in 2012</h1> <p>The top mortality causes are different in low- and in high-income countries. The graph below shows the proportion of deaths per cause among all causes. <strong>Source:</strong> WHO <a href="https://www.who.int/mediacentre/factsheets/fs310/en/index1.html">here</a> and <a href="https://apps.who.int/gho/data/view.main.RCODWBINCLOINCV?lang=en">here</a></p> <p>Sort the bars with data for low-income or high-income countries using the buttons below. You can also highlight specific bars by clicking on them for easier comparison.</p> <div id="buttons"> <br> <span id="low" class="haut">Low-income countries</span><span id="high">High-income countries</span> <br><br> </div> </div> <script type="text/javascript"> var w = 700; var h = 400; var padding = [ 20, 10, 30, 220 ]; //Top, right, bottom, left var widthScale = d3.scale.linear() .range([ 0, w - padding[1] - padding[3] ]); var heightScale = d3.scale.ordinal() .rangeRoundBands([ padding[0], h - padding[2] ], 0.1); var xAxis = d3.svg.axis() .scale(widthScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(heightScale) .orient("left"); //Now SVG goes into #container instead of body var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h); d3.csv("data.csv", function(data) { data.sort(function(a, b) { return d3.descending(+a.low, +b.low); }); widthScale.domain([ 0, d3.max(data, function(d) { return +d.high; }) ]); heightScale.domain(data.map(function(d) { return d.cause; } )); //Bind data to groups (not bars directly) var groups = svg.selectAll("g") .data(data) .enter() .append("g") .attr("class", "bar"); //Add a rect to each group var rects = groups.append("rect") .attr("x", padding[3]) .attr("y", function(d) { return heightScale(d.cause); }) .attr("width", 0) .attr("height", heightScale.rangeBand()); //Add a text element to each group groups.append("text") .attr("x", function(d) { return padding[3] + widthScale(d.low) - 3; }) .attr("y", function(d) { return heightScale(d.cause) + 11; }) .text(function(d) { return d3.round(d.low * 100,2).toString() + "%"; }); rects.attr("width", function(d) { return widthScale(d.low); }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding[3] + ",0)") .call(yAxis); d3.selectAll(".bar").on("click", function(){ var el = d3.select(this); if (el.classed("hi")){ el.classed("hi",false);} else {el.classed("hi", true);} }); // Sort bars in animation d3.selectAll("span").on("click", function(){ //Animation duration var dur = 1000; //We get the id of the clicked span var el = d3.select(this); var k = el.attr("id").toString(); d3.select(".haut").classed("haut",false); el.classed("haut",true); //We sort the data, to be able to sort the Y axis and adapt the scale. data.sort(function(a, b) { return d3.descending(+a[k], +b[k]); }); heightScale.domain(data.map(function(d) { return d.cause; } )); d3.select(".y").transition().duration(dur).call(yAxis); //We sort the bars (<g> containing rectangles). d3.selectAll("g.bar") //.data(data) .sort(function(a, b) { return d3.descending(+a[k], +b[k]); }) .transition().duration(dur) .select("rect") .attr("y", function(d, i) { return heightScale(d.cause); }) .attr("width", function(d){ return widthScale(d[k]); }); //And we finish with the text in the <g>. d3.selectAll("g.bar").select("text") .data(data) .attr("x", function(d) { return padding[3] + widthScale(d[k]) - 3; }) .attr("y", function(d) { return heightScale(d.cause) + 11; }) .text(function(d) { return d3.round(d[k] * 100,2).toString() + "%"; }); }); }); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js