This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. This is an attempt to improve on this visualization. The chart employs conventional margins and a number of D3 features:
You can see it fully rendered here: /clashthebunny/83d21db6af87fdc90cc4
Be sure to "Open in a new window", so you can see the second graph: /clashthebunny/83d21db6af87fdc90cc4/example/
xxxxxxxxxx<meta charset="utf-8"><style>body { font: 10px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispEdges;}.bar { fill: steelblue;}.x.axis path { display: none;}h2 { text-align: center;}.chart text { fill: white; font: 10px sans-serif; text-anchor: end;}</style><body><script src="d3.v3.min.js"></script><script>var margin = {top: 20, right: 20, bottom: 90, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;d3.select("body") .append("h2") .text("Belief in Factors of Success by Socioeconomic Status")var x0Within = d3.scale.ordinal() .rangeRoundBands([0, width], .1);var x1Within = d3.scale.ordinal();var yWithin = d3.scale.linear() .range([height, 0]);var x0Between = d3.scale.ordinal() .rangeRoundBands([0, width], .1);var x1Between = d3.scale.ordinal();var yBetween = d3.scale.linear() .range([height, 0]);var color = d3.scale.ordinal() .range(['rgb(166,206,227)','rgb(31,120,180)','rgb(178,223,138)','rgb(51,160,44)','rgb(251,154,153)','rgb(227,26,28)','rgb(253,191,111)','rgb(255,127,0)']);var xAxisWithin = d3.svg.axis() .scale(x0Within) .orient("bottom");var yAxisWithin = d3.svg.axis() .scale(yWithin) .orient("left") .tickFormat(d3.format(".2s"));var xAxisBetween = d3.svg.axis() .scale(x0Between) .orient("bottom");var yAxisBetween = d3.svg.axis() .scale(yBetween) .orient("left") .tickFormat(d3.format(".2s"));var svgWithin = d3.select("body").append("svg") .attr("id","within") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");var svgBetween = d3.select("body").append("svg") .attr("id","between") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");var dataObj = {};d3.csv("data.csv", function(error, data) { var ses = {list: []}; data.forEach( function(row,i) { ses[row.popSegment] = i; ses.list.push(row.popSegment); }) var successFactors = d3.keys(data[0]).filter(function(key) { return key !== "popSegment"; }); successFactors.sort(function(a,b) { return data[ses["Rich"]][b] - data[ses["Rich"]][a]; }) var dataBetween = []; successFactors.forEach(function(factor) { dataBetween.push({name: factor, "Poor": data[ses.Poor][factor], "Middle": data[ses.Middle][factor], "Rich": data[ses.Rich][factor]}); }) data.forEach(function(d) { d.factors = successFactors.map(function(name) { return {name: name, value: +d[name]}; }); }); dataBetween.forEach(function(d) { d.opinions = ses.list.map(function(name) { return {name: name, value: +d[name]}; }); }); x0Within.domain(data.map(function(d) { return d.popSegment; })); // Poor Middle and Rich x1Within.domain(successFactors).rangeRoundBands([0, x0Within.rangeBand()]); // Factors yWithin.domain([0, d3.max(data, function(d) { return d3.max(d.factors, function(d) { return d.value; }); })]); // Same for both svgWithin.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxisWithin); svgWithin.append("g") .attr("class", "y axis") .call(yAxisWithin) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Percent"); var socialClass = svgWithin.selectAll(".socialClass") .data(data) // List of objects, each with popSegment refering to above x0within .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x0Within(d.popSegment) + ",0)"; }); var bar = socialClass.selectAll("rect") .data(function(d) { return d.factors; }) .enter().append("g") bar.append("rect") .attr("width", x1Within.rangeBand()) .attr("x", function(d) { return x1Within(d.name); }) .attr("y", function(d) { return yWithin(d.value); }) .attr("height", function(d) { return height - yWithin(d.value); }) .style("fill", function(d) { return color(d.name); }); bar.append("text") .attr("x", function(d) { return x1Within(d.name) + 7; }) .attr("y", function(d) { return yWithin(d.value) + 15; }) .text(function(d) { return d.value + "%"; }); var legendWithin = svgWithin.selectAll(".legend") .data(successFactors.slice().reverse()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legendWithin.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", color); legendWithin.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; }); x0Between.domain(dataBetween.map(function(d) { return d.name; })); // Factors x1Between.domain(ses.list).rangeRoundBands([0, x0Between.rangeBand()]); // Poor Middle Rich yBetween.domain([0, d3.max(data, function(d) { return d3.max(d.factors, function(d) { return d.value; }); })]); svgBetween.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxisBetween) .selectAll("text") .style("text-anchor", "end") .attr("x", -9) .attr("y", 0) .attr("transform", "rotate(-40)"); svgBetween.append("g") .attr("class", "y axis") .call(yAxisBetween) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Percent"); var factors = svgBetween.selectAll(".factors") .data(dataBetween) // List of objects, each with a name of cause .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x0Between(d.name) + ",0)"; }); console.log(data,dataBetween,ses) var bar = factors.selectAll("rect") .data(function(d) { return d.opinions; }) // For each factor, we need a list of social oppinions .enter().append("g"); bar.append("rect") .attr("width", x1Between.rangeBand()) .attr("x", function(d) { return x1Between(d.name); }) .attr("y", function(d) { return yBetween(d.value); }) .attr("height", function(d) { return height - yBetween(d.value); }) .style("fill", function(d) { return color(d.name); }); bar.append("text") .attr("x", function(d) { return x1Between(d.name) + 7; }) .attr("y", function(d) { return yBetween(d.value) + 15; }) .text(function(d) { return d.value + "%"; }); var legendBetween = svgBetween.selectAll(".legend") .data(ses.list.slice().reverse()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legendBetween.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", color); legendBetween.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; });});</script>