D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lmelgar
Full window
Github gist
Doubt about data array
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <style> body { font: 12px sans-serif; padding: 50px; } #form { position: relative; right: 10px; top: 10px; padding-bottom: 20px; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } .x.axis path { display: none; } </style> </head> <body> <h2>Deaths from Illnesses in 2013 in Selected South African Countries</h2> <p><a href="https://apps.who.int/gho/data/node.main.ghe100-by-cause?lang=en">WHO data</a>, deaths of children 0-4 years old in selected South African countries.</p> <div id="form"> <label><input type="radio" name="mode" value="bycount" checked>Raw Count</label> <label><input type="radio" name="mode" value="bypercent">Percent of Illness</label> </div> <div id="chart"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script> var margin = {top: 20, right: 100, bottom: 50, left: 40}; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var xScale = d3.scale.ordinal() .rangeRoundBands([0, width], .3); var yScale = d3.scale.linear() .rangeRound([height, 0]); var color = d3.scale.category20(); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .innerTickSize([0]); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .innerTickSize(d3.format(".2s")); var stack = d3.layout .stack(); var svg = d3.select("#chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("diarrhoeal.csv", function(error, data) { if (error) { console.log(error); } my2013 = []; data.forEach(function (d) { if (d.year === "2013") { my2013.push(d); } }); my2013.sort(function(a,b) { return a.country - b.country; }); var illnesses = ["country","region","year","diarrhoeal_diseases","hiv,pertussis","measles","meningitis_encephalitis","malaria","respiratory_infections","prematurity","birth_asphixia","sepsis_infectious_newborn","perinatal_nutritional","congenital_anomalies","injuries","other"]; var stacked = stack(makeData(illnesses, my2013)); xScale.domain(my2013.map(function(d) { return d.country; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .attr("dy", ".5em") .attr("transform", "rotate(-30)") .style("text-anchor", "end"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Deaths"); var country = svg.selectAll(".country") .data(stacked) .enter().append("g") .attr("class", "country") .style("fill", function(d,i) { return color(i); }); country.selectAll("rect") .data(function(d) { console.log("array for a rectangle"); return d; }) .enter().append("rect") .attr("width", xScale.rangeBand()); transitionCount(); drawLegend(); d3.selectAll("input").on("change", handleFormClick); function handleFormClick() { if (this.value ==="bypercent") { transitionPercent(); } else { transitionCount(); } } function makeData(illnesses, my2013) { return illnesses.map(function(illness) { return my2013.map(function(d) { return {x: d["country"], y: +d[illness]}; }) }); } function transitionPercent () { yAxis.tickFormat(d3.format("%")); stack.offset("expand"); // use this to get it to be relative/normalized! var stacked = stack(makedata(illnesses, my2013)); transitionRects(stacked); } function transitionCount() { yAxis.tickFormat(d3.format(".2a")); // for the stacked totals version stack.offset("zero"); var stacked = stack(makeData(illnesses, my2013)); transitionRects(stacked); } function transitionRects(stacked) { yScale.domain([0, d3.max(stacked[stacked.length-1], function(d) { return d.y0 + d.y; })]); var country = svg.selectAll(".country") .data(stacked); country.selectAll("rect") .data(function(d) { console.log("array for a recatangle"); return d; }) svg.selectAll("g.country rect") .transition() .duration(250) .attr("x", function(d) { return xScale(d.x); }) .attr("y", function(d) { return yScale(d.y0 + d.y); }) .attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); //height is base - tallness }); svg.selectAll(".y.axis").transition().call(yAxis); } function drawLegend() { var legend = svg.selectAll(".legend") .data(color.domain().slice().reverse()) .enter().append("g") .attr("transform", function(d,i){ return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width) .attr("width", 18) .attr("height", 18) .style("file", color); legend.append("text") .attr("x", width + 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d, i) { return illnesses[i]; }); } }); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js