Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active March 10, 2019 08:17
Download ZIP

Revisions

  1. mbostock revised this gist Oct 27, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    license: gpl-3.0
    redirect: https://beta.observablehq.com/@mbostock/d3-stacked-normalized-horizontal-bar-chart
  2. mbostock revised this gist Jul 8, 2016. 2 changed files with 55 additions and 79 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This variation of a [stacked bar chart](../3886208) shows percentages rather than absolute numbers.
    This variation of a [stacked bar chart](/mbostock/3886208) shows percentages rather than absolute numbers.
    132 changes: 54 additions & 78 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,115 +2,91 @@
    <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 {
    .axis path {
    display: none;
    }

    .legend line {
    stroke: #000;
    shape-rendering: crispEdges;
    }

    </style>
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <svg width="960" height="500"></svg>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script>

    var margin = {top: 20, right: 100, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    var svg = d3.select("svg"),
    margin = {top: 20, right: 60, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
    var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1)
    .align(0.1);

    var y = d3.scale.linear()
    var y = d3.scaleLinear()
    .rangeRound([height, 0]);

    var color = d3.scale.ordinal()
    var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".0%"));

    var svg = d3.select("body").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 + ")");
    var stack = d3.stack()
    .offset(d3.stackOffsetExpand);

    d3.csv("data.csv", function(error, data) {
    d3.csv("data.csv", type, function(error, data) {
    if (error) throw error;

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

    data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
    });

    data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
    data.sort(function(a, b) { return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total; });

    x.domain(data.map(function(d) { return d.State; }));
    z.domain(data.columns.slice(1));

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

    var state = svg.selectAll(".state")
    .data(data)
    var serie = g.selectAll(".serie")
    .data(stack.keys(data.columns.slice(1))(data))
    .enter().append("g")
    .attr("class", "state")
    .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
    .attr("class", "serie")
    .attr("fill", function(d) { return z(d.key); });

    state.selectAll("rect")
    .data(function(d) { return d.ages; })
    serie.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.y1); })
    .attr("height", function(d) { return y(d.y0) - y(d.y1); })
    .style("fill", function(d) { return color(d.name); });
    .attr("x", function(d) { return x(d.data.State); })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .attr("width", x.bandwidth());

    var legend = svg.select(".state:last-child").selectAll(".legend")
    .data(function(d) { return d.ages; })
    .enter().append("g")
    g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

    g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(10, "%"));

    var legend = serie.append("g")
    .attr("class", "legend")
    .attr("transform", function(d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });
    .attr("transform", function(d) { var d = d[d.length - 1]; return "translate(" + (x(d.data.State) + x.bandwidth()) + "," + ((y(d[0]) + y(d[1])) / 2) + ")"; });

    legend.append("line")
    .attr("x2", 10);
    .attr("x1", -6)
    .attr("x2", 6)
    .attr("stroke", "#000");

    legend.append("text")
    .attr("x", 13)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

    .attr("x", 9)
    .attr("dy", "0.35em")
    .attr("fill", "#000")
    .style("font", "10px sans-serif")
    .text(function(d) { return d.key; });
    });

    function type(d, i, columns) {
    for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
    d.total = t;
    return d;
    }

    </script>
  3. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  4. mbostock revised this gist Oct 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,7 +28,7 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 100, bottom: 30, left: 40},
  5. mbostock revised this gist Jun 11, 2015. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,7 +28,7 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var margin = {top: 20, right: 100, bottom: 30, left: 40},
    @@ -60,6 +60,8 @@
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", function(error, data) {
    if (error) throw error;

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

    data.forEach(function(d) {
    @@ -111,4 +113,4 @@

    });

    </script>
    </script>
  6. mbostock revised this gist Oct 14, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,11 +60,11 @@
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", function(error, data) {
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

    data.forEach(function(d) {
    var y0 = 0;
    d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
    });

  7. mbostock revised this gist Oct 14, 2012. 1 changed file with 52 additions and 52 deletions.
    104 changes: 52 additions & 52 deletions data.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,52 +1,52 @@
    State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,85 Years and Over
    AL,310504,552339,259034,450818,1788160,1215966,85079
    AK,52083,85640,42153,74257,244157,183159,4844
    AZ,515910,828669,362642,601943,2544350,1523681,122985
    AR,202070,343207,157204,264160,1102950,727124,58675
    CA,2704659,4499890,2159981,3853788,14106543,8819342,612463
    CO,358280,587154,261701,466194,1908747,1290094,67286
    CT,211637,403658,196918,325110,1315851,968967,79111
    DE,59319,99496,47414,84464,335753,230528,16118
    DC,36352,50439,25225,75569,253061,140043,11144
    FL,1140516,1938695,925060,1607297,7448550,4746856,521366
    GA,740521,1250460,557860,919876,3705590,2389018,122419
    HI,87207,134025,64011,124834,514623,331817,31681
    ID,121746,201192,89702,147606,562896,375173,25501
    IL,894368,1558919,725973,1311479,4932730,3239173,238921
    IN,443089,780199,361393,605863,2419717,1647881,118650
    IA,201321,345409,165883,306398,1116360,788485,78699
    KS,202529,342134,155822,293114,1032553,713663,62319
    KY,284601,493536,229927,381394,1670745,1134283,74759
    LA,310716,542341,254916,471275,1630527,1128771,72250
    ME,71459,133656,69752,112682,502277,397911,28719
    MD,371787,651923,316873,543470,2143906,1513754,91884
    MA,383568,701752,341713,665879,2510450,1751508,143097
    MI,625526,1179503,585169,974480,3745900,2706100,186744
    MN,358471,606802,289371,507289,1959728,1391878,106854
    MS,220813,371502,174405,305964,1083566,730133,52235
    MO,399450,690476,331543,560463,2253183,1554812,121678
    MT,61114,106088,53156,95232,353363,278241,20246
    NE,132092,215265,99638,186657,657016,451756,41008
    NV,199175,325650,142976,212379,1034700,653357,31930
    NH,75297,144235,73826,119114,490607,388250,24480
    NJ,557421,1011656,478505,769321,3355280,2335168,175310
    NM,148323,241326,112801,203097,741356,501604,35849
    NY,1208495,2141490,1058031,1999120,7564953,5120254,397954
    NC,652823,1097890,492964,883397,3566601,2380685,148054
    ND,41896,67358,33794,82629,231417,166615,17772
    OH,743750,1340492,646135,1081734,4361335,3083815,228649
    OK,266547,438926,200562,369916,1377898,918688,69824
    OR,243483,424167,199925,338162,1471825,1036269,76229
    PA,737462,1345341,679201,1203944,4758088,3414001,310242
    RI,60934,111408,56198,114502,399424,282321,26001
    SC,303024,517803,245400,438147,1712803,1186019,76604
    SD,58566,94438,45305,82869,292193,210178,20645
    TN,416334,725948,336312,550612,2432897,1646623,106162
    TX,2027307,3277946,1420518,2454721,9157082,5656528,332872
    UT,268916,413034,167685,329585,985328,538978,32898
    VT,32635,62538,33757,61679,229704,188593,12364
    VA,522672,887525,413004,768475,3022170,2033550,121693
    WA,433119,750274,357782,610378,2520000,1762811,114860
    WV,105435,189649,91074,157989,717314,514505,38502
    WI,362277,640286,311849,553914,2120449,1522038,117154
    WY,38253,60890,29314,53980,193967,147279,8985
    State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
    AL,310504,552339,259034,450818,1231572,1215966,641667
    AK,52083,85640,42153,74257,198724,183159,50277
    AZ,515910,828669,362642,601943,1804762,1523681,862573
    AR,202070,343207,157204,264160,754420,727124,407205
    CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
    CO,358280,587154,261701,466194,1464939,1290094,511094
    CT,211637,403658,196918,325110,916955,968967,478007
    DE,59319,99496,47414,84464,230183,230528,121688
    DC,36352,50439,25225,75569,193557,140043,70648
    FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
    GA,740521,1250460,557860,919876,2846985,2389018,981024
    HI,87207,134025,64011,124834,356237,331817,190067
    ID,121746,201192,89702,147606,406247,375173,182150
    IL,894368,1558919,725973,1311479,3596343,3239173,1575308
    IN,443089,780199,361393,605863,1724528,1647881,813839
    IA,201321,345409,165883,306398,750505,788485,444554
    KS,202529,342134,155822,293114,728166,713663,366706
    KY,284601,493536,229927,381394,1179637,1134283,565867
    LA,310716,542341,254916,471275,1162463,1128771,540314
    ME,71459,133656,69752,112682,331809,397911,199187
    MD,371787,651923,316873,543470,1556225,1513754,679565
    MA,383568,701752,341713,665879,1782449,1751508,871098
    MI,625526,1179503,585169,974480,2628322,2706100,1304322
    MN,358471,606802,289371,507289,1416063,1391878,650519
    MS,220813,371502,174405,305964,764203,730133,371598
    MO,399450,690476,331543,560463,1569626,1554812,805235
    MT,61114,106088,53156,95232,236297,278241,137312
    NE,132092,215265,99638,186657,457177,451756,240847
    NV,199175,325650,142976,212379,769913,653357,296717
    NH,75297,144235,73826,119114,345109,388250,169978
    NJ,557421,1011656,478505,769321,2379649,2335168,1150941
    NM,148323,241326,112801,203097,517154,501604,260051
    NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
    NC,652823,1097890,492964,883397,2575603,2380685,1139052
    ND,41896,67358,33794,82629,154913,166615,94276
    OH,743750,1340492,646135,1081734,3019147,3083815,1570837
    OK,266547,438926,200562,369916,957085,918688,490637
    OR,243483,424167,199925,338162,1044056,1036269,503998
    PA,737462,1345341,679201,1203944,3157759,3414001,1910571
    RI,60934,111408,56198,114502,277779,282321,147646
    SC,303024,517803,245400,438147,1193112,1186019,596295
    SD,58566,94438,45305,82869,196738,210178,116100
    TN,416334,725948,336312,550612,1719433,1646623,819626
    TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
    UT,268916,413034,167685,329585,772024,538978,246202
    VT,32635,62538,33757,61679,155419,188593,86649
    VA,522672,887525,413004,768475,2203286,2033550,940577
    WA,433119,750274,357782,610378,1850983,1762811,783877
    WV,105435,189649,91074,157989,470749,514505,285067
    WI,362277,640286,311849,553914,1487457,1522038,750146
    WY,38253,60890,29314,53980,137338,147279,65614
  8. mbostock revised this gist Oct 14, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  9. mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -42,7 +42,7 @@
    .rangeRound([height, 0]);

    var color = d3.scale.ordinal()
    .range(["#4682b4", "#536793", "#574d73", "#553355", "#733247", "#8c2f39", "#a52a2a"]);
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    var xAxis = d3.svg.axis()
    .scale(x)
  10. mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@
    .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
    .range([height, 0]);
    .rangeRound([height, 0]);

    var color = d3.scale.ordinal()
    .range(["#4682b4", "#536793", "#574d73", "#553355", "#733247", "#8c2f39", "#a52a2a"]);
  11. mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -65,7 +65,7 @@
    data.forEach(function(d) {
    var y0 = 0;
    d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.ages.reverse().forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
    });

    data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
  12. mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -65,11 +65,9 @@
    data.forEach(function(d) {
    var y0 = 0;
    d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
    d.ages.reverse().forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
    });

    ageNames.reverse();

    data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });

    x.domain(data.map(function(d) { return d.State; }));
  13. mbostock revised this gist Oct 14, 2012. 2 changed files with 3 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This variation of a [stacked bar chart](../3886208) shows percentages rather than absolute numbers. Colors by [Cynthia Brewer](http://colorbrewer2.org/).
    This variation of a [stacked bar chart](../3886208) shows percentages rather than absolute numbers.
    2 changes: 2 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -68,6 +68,8 @@
    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
    });

    ageNames.reverse();

    data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });

    x.domain(data.map(function(d) { return d.State; }));
  14. mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -42,7 +42,7 @@
    .range([height, 0]);

    var color = d3.scale.ordinal()
    .range(["#2166ac", "#67a9cf", "#d1e5f0", "#f7f7f7", "#fddbc7", "#ef8a62", "#b2182b"]);
    .range(["#4682b4", "#536793", "#574d73", "#553355", "#733247", "#8c2f39", "#a52a2a"]);

    var xAxis = d3.svg.axis()
    .scale(x)
  15. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -42,7 +42,7 @@
    .range([height, 0]);

    var color = d3.scale.ordinal()
    .range(["#b2182b", "#ef8a62", "#fddbc7", "#f7f7f7", "#d1e5f0", "#67a9cf", "#2166ac"]);
    .range(["#2166ac", "#67a9cf", "#d1e5f0", "#f7f7f7", "#fddbc7", "#ef8a62", "#b2182b"]);

    var xAxis = d3.svg.axis()
    .scale(x)
  16. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,9 +60,7 @@
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", function(error, data) {
    var ageNames = d3.keys(data[0])
    .filter(function(key) { return key !== "State"; })
    .reverse();
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

    data.forEach(function(d) {
    var y0 = 0;
  17. mbostock revised this gist Oct 13, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,7 +60,9 @@
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", function(error, data) {
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
    var ageNames = d3.keys(data[0])
    .filter(function(key) { return key !== "State"; })
    .reverse();

    data.forEach(function(d) {
    var y0 = 0;
  18. mbostock revised this gist Oct 13, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 110, bottom: 30, left: 40},
    var margin = {top: 20, right: 100, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    @@ -102,10 +102,10 @@
    .attr("transform", function(d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });

    legend.append("line")
    .attr("x2", 20);
    .attr("x2", 10);

    legend.append("text")
    .attr("x", 23)
    .attr("x", 13)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

  19. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 100, bottom: 30, left: 40},
    var margin = {top: 20, right: 110, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  20. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 80, bottom: 30, left: 40},
    var margin = {top: 20, right: 100, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  21. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 70, bottom: 30, left: 40},
    var margin = {top: 20, right: 80, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  22. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 60, bottom: 30, left: 40},
    var margin = {top: 20, right: 70, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  23. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -105,7 +105,7 @@
    .attr("x2", 20);

    legend.append("text")
    .attr("x", 26)
    .attr("x", 23)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

  24. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -99,7 +99,7 @@
    .data(function(d) { return d.ages; })
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d) { return "translate(" + (x(d.State) + x.rangeBand() / 2) + "," + y((d.y0 + d.y1) / 2) + ")"; });
    .attr("transform", function(d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });

    legend.append("line")
    .attr("x2", 20);
  25. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -84,7 +84,7 @@
    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("class", "state")
    .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

    state.selectAll("rect")
  26. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -99,7 +99,7 @@
    .data(function(d) { return d.ages; })
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d) { return "translate(" + (x(d.State) + x.rangeBand() / 2) + "," + y((d.y0 + d.y1) / 2) + ")");
    .attr("transform", function(d) { return "translate(" + (x(d.State) + x.rangeBand() / 2) + "," + y((d.y0 + d.y1) / 2) + ")"; });

    legend.append("line")
    .attr("x2", 20);
  27. mbostock revised this gist Oct 13, 2012. 1 changed file with 20 additions and 1 deletion.
    21 changes: 20 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,12 +21,17 @@
    display: none;
    }

    .legend line {
    stroke: #000;
    shape-rendering: crispEdges;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    var margin = {top: 20, right: 60, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    @@ -90,6 +95,20 @@
    .attr("height", function(d) { return y(d.y0) - y(d.y1); })
    .style("fill", function(d) { return color(d.name); });

    var legend = svg.select(".state:last-child").selectAll(".legend")
    .data(function(d) { return d.ages; })
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d) { return "translate(" + (x(d.State) + x.rangeBand() / 2) + "," + y((d.y0 + d.y1) / 2) + ")");

    legend.append("line")
    .attr("x2", 20);

    legend.append("text")
    .attr("x", 26)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

    });

    </script>
  28. mbostock revised this gist Oct 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This variation of a [stacked bar chart](../3886208) shows percentages rather than absolute numbers.
    This variation of a [stacked bar chart](../3886208) shows percentages rather than absolute numbers. Colors by [Cynthia Brewer](http://colorbrewer2.org/).
  29. mbostock revised this gist Oct 13, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  30. mbostock revised this gist Oct 13, 2012. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,13 +41,12 @@

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.format(".0%"));
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));
    .tickFormat(d3.format(".0%"));

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)