Skip to content

Instantly share code, notes, and snippets.

@ClashTheBunny

ClashTheBunny/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:11
Show Gist options
  • Save ClashTheBunny/83d21db6af87fdc90cc4 to your computer and use it in GitHub Desktop.
Save ClashTheBunny/83d21db6af87fdc90cc4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ClashTheBunny revised this gist Dec 17, 2014. 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 @@

    d3.select("body")
    .append("h2")
    .text("Belief in Factors of Success")
    .text("Belief in Factors of Success by Socioeconomic Status")

    var x0Within = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
  2. ClashTheBunny revised this gist Dec 17, 2014. 2 changed files with 32 additions and 6 deletions.
    5 changes: 5 additions & 0 deletions d3.v3.min.js
    View file
    5 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    33 changes: 27 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -25,9 +25,15 @@
    text-align: center;
    }

    .chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
    }

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

    var margin = {top: 20, right: 20, bottom: 90, left: 40},
    @@ -149,15 +155,23 @@
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x0Within(d.popSegment) + ",0)"; });

    socialClass.selectAll("rect")
    .data(function(d) { return d.factors; })
    .enter().append("rect")
    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")
    @@ -211,15 +225,22 @@

    console.log(data,dataBetween,ses)

    factors.selectAll("rect")
    var bar = factors.selectAll("rect")
    .data(function(d) { return d.opinions; }) // For each factor, we need a list of social oppinions
    .enter().append("rect")
    .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")
  3. ClashTheBunny revised this gist Dec 17, 2014. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,9 @@ This grouped bar chart is constructed from a CSV file storing the populations of
    You can see it fully rendered here:
    http://bl.ocks.org/ClashTheBunny/83d21db6af87fdc90cc4

    Be sure to "Open in a new window", so you can see the second graph:
    http://bl.ocks.org/ClashTheBunny/raw/83d21db6af87fdc90cc4/

    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding and color encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
  4. ClashTheBunny revised this gist Dec 17, 2014. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,8 @@
    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](http://viz.wtf/image/61604910467). The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    You can see it fully rendered here:
    http://bl.ocks.org/ClashTheBunny/83d21db6af87fdc90cc4

    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding and color encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
  5. ClashTheBunny revised this gist Dec 17, 2014. 2 changed files with 146 additions and 37 deletions.
    6 changes: 3 additions & 3 deletions data.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    popSegment,Good Education/High Qualification,Cunning/Cheating,Abilities/Talents,Connections with the Right People,Fortune/Good Luck,Hard Work,Entrepreneurial Spirit,The Presence of Initial Capital
    popSegment,Higher Ed./Qualified,Cunning/Cheating,Abilities/Talents,Right Network,Fortune/Good Luck,Hard Work,Entrepreneurial Spirit,Presence of Initial Capital
    Poor,18,32,7,39,12,16,16,27
    Middle Class,33,21,8,32,15,27,16,23
    Upper Class,28,11,13,9,13,38,27,15
    Middle,33,21,8,32,15,27,16,23
    Rich,28,11,13,9,13,38,27,15
    177 changes: 143 additions & 34 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,105 +30,214 @@
    <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: 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")

    var x0 = d3.scale.ordinal()
    var x0Within = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

    var x1 = d3.scale.ordinal();
    var x1Within = d3.scale.ordinal();

    var y = d3.scale.linear()
    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(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
    // .range(['rgb(141,211,199)','rgb(255,255,179)','rgb(190,186,218)','rgb(251,128,114)','rgb(128,177,211)','rgb(253,180,98)','rgb(179,222,105)','rgb(252,205,229)']);
    .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)']);
    // .range(['rgb(127,201,127)','rgb(190,174,212)','rgb(253,192,134)','rgb(255,255,153)','rgb(56,108,176)','rgb(240,2,127)','rgb(191,91,23)','rgb(102,102,102)']);
    // .range(['rgb(247,252,253)','rgb(224,236,244)','rgb(191,211,230)','rgb(158,188,218)','rgb(140,150,198)','rgb(140,107,177)','rgb(136,65,157)','rgb(110,1,107)']);
    // .range(['rgb(247,252,253)','rgb(224,236,244)','rgb(191,211,230)','rgb(158,188,218)','rgb(140,150,198)','rgb(140,107,177)','rgb(136,65,157)','rgb(129,15,124)']);

    var xAxis = d3.svg.axis()
    .scale(x0)
    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 yAxis = d3.svg.axis()
    .scale(y)
    var yAxisBetween = d3.svg.axis()
    .scale(yBetween)
    .orient("left")
    .tickFormat(d3.format(".2s"));

    var svg = d3.select("body").append("svg")
    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.ages = successFactors.map(function(name) { return {name: name, value: +d[name]}; });
    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]}; });
    });

    x0.domain(data.map(function(d) { return d.popSegment; }));
    x1.domain(successFactors).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
    x0Within.domain(data.map(function(d) { return d.popSegment; })); // Poor Middle and Rich
    x1Within.domain(successFactors).rangeRoundBands([0, x0Within.rangeBand()]); // Factors

    svg.append("g")
    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(xAxis);
    .call(xAxisWithin);

    svg.append("g")
    svgWithin.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .call(yAxisWithin)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Percent");

    var state = svg.selectAll(".state")
    .data(data)
    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(" + x0(d.popSegment) + ",0)"; });
    .attr("transform", function(d) { return "translate(" + x0Within(d.popSegment) + ",0)"; });

    state.selectAll("rect")
    .data(function(d) { return d.ages; })
    socialClass.selectAll("rect")
    .data(function(d) { return d.factors; })
    .enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function(d) { return x1(d.name); })
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); })
    .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); });

    var legend = svg.selectAll(".legend")
    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 + ")"; });

    legend.append("rect")
    legendWithin.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

    legend.append("text")
    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)

    factors.selectAll("rect")
    .data(function(d) { return d.opinions; }) // For each factor, we need a list of social oppinions
    .enter().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); });

    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>
  6. ClashTheBunny revised this gist Dec 16, 2014. 2 changed files 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,4 +1,4 @@
    This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:
    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](http://viz.wtf/image/61604910467). The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding and color encoding
    Binary file removed thumbnail.png
    View file
    Binary file not shown.
  7. ClashTheBunny revised this gist Dec 15, 2014. 2 changed files with 26 additions and 16 deletions.
    11 changes: 4 additions & 7 deletions data.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,4 @@
    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
    CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
    TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
    NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
    FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
    IL,894368,1558919,725973,1311479,3596343,3239173,1575308
    PA,737462,1345341,679201,1203944,3157759,3414001,1910571
    popSegment,Good Education/High Qualification,Cunning/Cheating,Abilities/Talents,Connections with the Right People,Fortune/Good Luck,Hard Work,Entrepreneurial Spirit,The Presence of Initial Capital
    Poor,18,32,7,39,12,16,16,27
    Middle Class,33,21,8,32,15,27,16,23
    Upper Class,28,11,13,9,13,38,27,15
    31 changes: 22 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,6 +21,10 @@
    display: none;
    }

    h2 {
    text-align: center;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    @@ -30,6 +34,10 @@
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    d3.select("body")
    .append("h2")
    .text("Belief in Factors of Success")

    var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

    @@ -39,7 +47,12 @@
    .range([height, 0]);

    var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
    // .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
    // .range(['rgb(141,211,199)','rgb(255,255,179)','rgb(190,186,218)','rgb(251,128,114)','rgb(128,177,211)','rgb(253,180,98)','rgb(179,222,105)','rgb(252,205,229)']);
    .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)']);
    // .range(['rgb(127,201,127)','rgb(190,174,212)','rgb(253,192,134)','rgb(255,255,153)','rgb(56,108,176)','rgb(240,2,127)','rgb(191,91,23)','rgb(102,102,102)']);
    // .range(['rgb(247,252,253)','rgb(224,236,244)','rgb(191,211,230)','rgb(158,188,218)','rgb(140,150,198)','rgb(140,107,177)','rgb(136,65,157)','rgb(110,1,107)']);
    // .range(['rgb(247,252,253)','rgb(224,236,244)','rgb(191,211,230)','rgb(158,188,218)','rgb(140,150,198)','rgb(140,107,177)','rgb(136,65,157)','rgb(129,15,124)']);

    var xAxis = d3.svg.axis()
    .scale(x0)
    @@ -57,14 +70,14 @@
    .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 successFactors = d3.keys(data[0]).filter(function(key) { return key !== "popSegment"; });

    data.forEach(function(d) {
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
    d.ages = successFactors.map(function(name) { return {name: name, value: +d[name]}; });
    });

    x0.domain(data.map(function(d) { return d.State; }));
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
    x0.domain(data.map(function(d) { return d.popSegment; }));
    x1.domain(successFactors).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

    svg.append("g")
    @@ -80,13 +93,13 @@
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Population");
    .text("Percent");

    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
    .attr("transform", function(d) { return "translate(" + x0(d.popSegment) + ",0)"; });

    state.selectAll("rect")
    .data(function(d) { return d.ages; })
    @@ -98,7 +111,7 @@
    .style("fill", function(d) { return color(d.name); });

    var legend = svg.selectAll(".legend")
    .data(ageNames.slice().reverse())
    .data(successFactors.slice().reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
    @@ -118,4 +131,4 @@

    });

    </script>
    </script>
  8. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -70,18 +70,18 @@
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .call(xAxis);

    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("Population");

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

    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
  9. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -70,7 +70,13 @@
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    .call(xAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Population");

    svg.append("g")
    .attr("class", "y axis")
  10. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions data.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    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
    CA,2704659,4499890,2159981,3853788,14106543,8819342,612463
    TX,2027307,3277946,1420518,2454721,9157082,5656528,332872
    NY,1208495,2141490,1058031,1999120,7564953,5120254,397954
    FL,1140516,1938695,925060,1607297,7448550,4746856,521366
    IL,894368,1558919,725973,1311479,4932730,3239173,238921
    PA,737462,1345341,679201,1203944,4758088,3414001,310242
    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
    CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
    TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
    NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
    FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
    IL,894368,1558919,725973,1311479,3596343,3239173,1575308
    PA,737462,1345341,679201,1203944,3157759,3414001,1910571
  11. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 16 additions and 16 deletions.
    32 changes: 16 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -76,8 +76,23 @@
    .attr("class", "y axis")
    .call(yAxis);

    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

    state.selectAll("rect")
    .data(function(d) { return d.ages; })
    .enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function(d) { return x1(d.name); })
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); })
    .style("fill", function(d) { return color(d.name); });

    var legend = svg.selectAll(".legend")
    .data(ageNames.reverse())
    .data(ageNames.slice().reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
    @@ -95,21 +110,6 @@
    .style("text-anchor", "end")
    .text(function(d) { return d; });

    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

    state.selectAll("rect")
    .data(function(d) { return d.ages; })
    .enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function(d) { return x1(d.name); })
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); })
    .style("fill", function(d) { return color(d.name); });

    });

    </script>
  12. @mbostock 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.
  13. @mbostock 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 @@
    .range([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(x0)
  14. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 5 additions and 8 deletions.
    13 changes: 5 additions & 8 deletions data.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,7 @@
    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
    TX,2027307,3277946,1420518,2454721,9157082,5656528,332872
    NY,1208495,2141490,1058031,1999120,7564953,5120254,397954
    FL,1140516,1938695,925060,1607297,7448550,4746856,521366
    IL,894368,1558919,725973,1311479,4932730,3239173,238921
    PA,737462,1345341,679201,1203944,4758088,3414001,310242
  15. @mbostock mbostock revised this gist Oct 14, 2012. 3 changed files with 10 additions and 4 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. Colors by [Cynthia Brewer](http://colorbrewer2.org/). The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:
    This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding and color encoding
    10 changes: 8 additions & 2 deletions data.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,10 @@
    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
    NY,1208495,2141490,1058031,1999120,7564953,5120254,397954
    TX,2027307,3277946,1420518,2454721,9157082,5656528,332872
    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
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@
    .range([height, 0]);

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

    var xAxis = d3.svg.axis()
    .scale(x0)
  16. @mbostock mbostock revised this gist Oct 14, 2012. 3 changed files with 14 additions and 64 deletions.
    4 changes: 1 addition & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. Colors by [Cynthia Brewer](http://colorbrewer2.org/). The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:
    This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. Colors by [Cynthia Brewer](http://colorbrewer2.org/). The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding and color encoding
    @@ -7,5 +7,3 @@ This stacked bar chart is constructed from a CSV file storing the populations of
    * [d3.max](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_max) - compute domains
    * [d3.keys](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_keys) - compute column names
    * [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes) - display axes

    This example doesn’t use [d3.layout.stack](https://github.com/mbostock/d3/wiki/Stack-Layout) because it’s easy to just stack each state independently via [array.forEach](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach).
    48 changes: 0 additions & 48 deletions data.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -1,52 +1,4 @@
    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
    26 changes: 13 additions & 13 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,17 +30,19 @@
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
    var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

    var x1 = d3.scale.ordinal();

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

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

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

    var yAxis = d3.svg.axis()
    @@ -58,15 +60,12 @@
    var ageNames = 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.total = d.ages[d.ages.length - 1].y1;
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
    });

    data.sort(function(a, b) { return b.total - a.total; });

    x.domain(data.map(function(d) { return d.State; }));
    y.domain([0, d3.max(data, function(d) { return d.total; })]);
    x0.domain(data.map(function(d) { return d.State; }));
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

    svg.append("g")
    .attr("class", "x axis")
    @@ -100,14 +99,15 @@
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

    state.selectAll("rect")
    .data(function(d) { return d.ages; })
    .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); })
    .attr("width", x1.rangeBand())
    .attr("x", function(d) { return x1(d.name); })
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); })
    .style("fill", function(d) { return color(d.name); });

    });
  17. @mbostock 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
    @@ -78,7 +78,7 @@
    .call(yAxis);

    var legend = svg.selectAll(".legend")
    .data(ageNames)
    .data(ageNames.reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  18. @mbostock mbostock revised this gist Oct 13, 2012. 1 changed file with 19 additions and 0 deletions.
    19 changes: 19 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -77,6 +77,25 @@
    .attr("class", "y axis")
    .call(yAxis);

    var legend = svg.selectAll(".legend")
    .data(ageNames)
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

    legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
  19. @mbostock 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,4 +1,4 @@
    This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:
    This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. Colors by [Cynthia Brewer](http://colorbrewer2.org/). The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding and color encoding
  20. @mbostock mbostock revised this gist Oct 13, 2012. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,11 @@
    This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:

    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding and color encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
    * d3.scale.ordinal - color encoding
    * d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
    * [d3.format](https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format) - SI prefix formatting (e.g., “10M” for 10,000,000)
    * [d3.max](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_max) - compute domains
    * [d3.keys](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_keys) - compute column names
    * [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes) - display axes

    This example doesn’t use [d3.layout.stack](https://github.com/mbostock/d3/wiki/Stack-Layout) because it’s easy to just stack each state independently via [array.forEach](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach).
  21. @mbostock 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.
  22. @mbostock 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
    @@ -37,7 +37,7 @@
    .range([height, 0]);

    var color = d3.scale.ordinal()
    .range(["rgb(215,48,39)","rgb(252,141,89)","rgb(254,224,144)","rgb(255,255,191)","rgb(224,243,248)","rgb(145,191,219)","rgb(69,117,180)"]);
    .range(["#b2182b", "#ef8a62", "#fddbc7", "#f7f7f7", "#d1e5f0", "#67a9cf", "#2166ac"]);

    var xAxis = d3.svg.axis()
    .scale(x)
  23. @mbostock mbostock revised this gist Oct 13, 2012. 2 changed files with 3 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ This stacked bar chart is constructed from a CSV file storing the populations of
    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
    * d3.scale.category20 - color encoding
    * d3.scale.ordinal - color encoding
    * d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
    * [d3.max](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_max) - compute domains
    * [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes) - display axes
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,8 @@
    var y = d3.scale.linear()
    .range([height, 0]);

    var color = d3.scale.category20();
    var color = d3.scale.ordinal()
    .range(["rgb(215,48,39)","rgb(252,141,89)","rgb(254,224,144)","rgb(255,255,191)","rgb(224,243,248)","rgb(145,191,219)","rgb(69,117,180)"]);

    var xAxis = d3.svg.axis()
    .scale(x)
  24. @mbostock mbostock revised this gist Oct 13, 2012. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -58,15 +58,14 @@

    data.forEach(function(d) {
    var y0 = 0;
    d.ages = ageNames.map(function(name) {
    return {name: name, y0: y0, y1: y0 += +d[name]};
    });
    d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.ages[d.ages.length - 1].y1;
    });

    data.sort(function(a, b) { return b.Total - a.Total; });
    data.sort(function(a, b) { return b.total - a.total; });

    x.domain(data.map(function(d) { return d.State; }));
    y.domain([0, d3.max(data, function(d) { return d.ages[d.ages.length - 1].y1; })]);
    y.domain([0, d3.max(data, function(d) { return d.total; })]);

    svg.append("g")
    .attr("class", "x axis")
  25. @mbostock mbostock revised this gist Oct 13, 2012. 2 changed files with 54 additions and 55 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,Total,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,16 Years and Over,18 Years and Over,15 to 44 Years,45 to 64 Years,65 Years and Over,85 Years and Over
    AL,4661900,310504,552339,259034,450818,3671200,3540023,1878306,1215966,641667,85079
    AK,686293,52083,85640,42153,74257,528405,506417,305207,183159,50277,4844
    AZ,6500180,515910,828669,362642,601943,4975709,4792959,2680368,1523681,862573,122985
    AR,2855390,202070,343207,157204,264160,2233398,2152909,1137988,727124,407205,58675
    CA,36756666,2704659,4499890,2159981,3853788,28492781,27392136,16091480,8819342,4114496,612463
    CO,4939456,358280,587154,261701,466194,3865113,3732321,2129158,1290094,511094,67286
    CT,3501252,211637,403658,196918,325110,2788471,2689039,1390702,968967,478007,79111
    DE,873092,59319,99496,47414,84464,690990,666863,350565,230528,121688,16118
    DC,591833,36352,50439,25225,75569,492806,479817,288300,140043,70648,11144
    FL,18328340,1140516,1938695,925060,1607297,14796088,14324069,7090172,4746856,3187797,521366
    GA,9685744,740521,1250460,557860,919876,7417769,7136903,4187887,2389018,981024,122419
    HI,1288198,87207,134025,64011,124834,1035429,1002955,529382,331817,190067,31681
    ID,1523816,121746,201192,89702,147606,1156761,1111176,621672,375173,182150,25501
    IL,12901563,894368,1558919,725973,1311479,10088978,9722303,5455020,3239173,1575308,238921
    IN,6376792,443089,780199,361393,605863,4974895,4792111,2603160,1647881,813839,118650
    IA,3002555,201321,345409,165883,306398,2374594,2289942,1182767,788485,444554,78699
    KS,2802134,202529,342134,155822,293114,2180905,2101649,1139193,713663,366706,62319
    KY,4269245,284601,493536,229927,381394,3378568,3261181,1735205,1134283,565867,74759
    LA,4410796,310716,542341,254916,471275,3432616,3302823,1826987,1128771,540314,72250
    ME,1316456,71459,133656,69752,112682,1077777,1041589,497847,397911,199187,28719
    MD,5633597,371787,651923,316873,543470,4455297,4293014,2340626,1513754,679565,91884
    MA,6497967,383568,701752,341713,665879,5245355,5070934,2707831,1751508,871098,143097
    MI,10003422,625526,1179503,585169,974480,7913100,7613224,4047073,2706100,1304322,186744
    MN,5220393,358471,606802,289371,507289,4113132,3965749,2142434,1391878,650519,106854
    MS,2938618,220813,371502,174405,305964,2259986,2171898,1202339,730133,371598,52235
    MO,5911605,399450,690476,331543,560463,4659430,4490136,2381522,1554812,805235,121678
    MT,967440,61114,106088,53156,95232,774664,747082,372043,278241,137312,20246
    NE,1783432,132092,215265,99638,186657,1387409,1336437,719367,451756,240847,41008
    NV,2600167,199175,325650,142976,212379,2004027,1932366,1089478,653357,296717,31930
    NH,1315809,75297,144235,73826,119114,1060287,1022451,520357,388250,169978,24480
    NJ,8682661,557421,1011656,478505,769321,6877132,6635079,3510101,2335168,1150941,175310
    NM,1984356,148323,241326,112801,203097,1539499,1481906,805851,501604,260051,35849
    NY,19490297,1208495,2141490,1058031,1999120,15624059,15082281,8158231,5120254,2607672,397954
    NC,9222414,652823,1097890,492964,883397,7228860,6978737,3831668,2380685,1139052,148054
    ND,641481,41896,67358,33794,82629,515794,498433,263162,166615,94276,17772
    OH,11485910,743750,1340492,646135,1081734,9085157,8755533,4590870,3083815,1570837,228649
    OK,3642361,266547,438926,200562,369916,2839156,2736326,1479166,918688,490637,69824
    OR,3790060,243483,424167,199925,338162,3025474,2922485,1534279,1036269,503998,76229
    PA,12448279,737462,1345341,679201,1203944,10033800,9686275,4877273,3414001,1910571,310242
    RI,1050788,60934,111408,56198,114502,850951,822248,434905,282321,147646,26001
    SC,4479800,303024,517803,245400,438147,3539603,3413573,1818126,1186019,596295,76604
    SD,804194,58566,94438,45305,82869,629010,605885,313905,210178,116100,20645
    TN,6214888,416334,725948,336312,550612,4907628,4736294,2524606,1646623,819626,106162
    TX,24326974,2027307,3277946,1420518,2454721,18315472,17601203,10540819,5656528,2472223,332872
    UT,2736424,268916,413034,167685,329585,1972123,1886789,1228432,538978,246202,32898
    VT,621270,32635,62538,33757,61679,509882,492340,242818,188593,86649,12364
    VA,7769089,522672,887525,413004,768475,6155777,5945888,3284355,2033550,940577,121693
    WA,6549224,433119,750274,357782,610378,5191341,5008049,2733393,1762811,783877,114860
    WV,1814468,105435,189649,91074,157989,1475218,1428310,697910,514505,285067,38502
    WI,5627967,362277,640286,311849,553914,4472917,4313555,2278148,1522038,750146,117154
    WY,532668,38253,60890,29314,53980,419262,404211,213580,147279,65614,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,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
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -54,11 +54,10 @@
    .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" && key !== "Total"; });
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

    data.forEach(function(d) {
    var y0 = 0;
    d.Total = +d.Total;
    d.ages = ageNames.map(function(name) {
    return {name: name, y0: y0, y1: y0 += +d[name]};
    });
    @@ -67,7 +66,7 @@
    data.sort(function(a, b) { return b.Total - a.Total; });

    x.domain(data.map(function(d) { return d.State; }));
    y.domain([0, d3.max(data, function(d) { return d.Total; })]);
    y.domain([0, d3.max(data, function(d) { return d.ages[d.ages.length - 1].y1; })]);

    svg.append("g")
    .attr("class", "x axis")
  26. @mbostock mbostock revised this gist Oct 13, 2012. 2 changed files with 7 additions and 6 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,5 +3,7 @@ This stacked bar chart is constructed from a CSV file storing the populations of
    * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
    * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - *x*-position encoding
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
    * d3.scale.category20 - color encoding
    * d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
    * [d3.max](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_max) - compute domains
    * [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes) - display axes
    11 changes: 5 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -58,17 +58,16 @@

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

    data.sort(function(a, b) { return b.Total - a.Total; });

    x.domain(data.map(function(d) { return d.State; }));
    y.domain([0, d3.max(data, function(d) { return d.ages[d.ages.length - 1].y1; })]);
    y.domain([0, d3.max(data, function(d) { return d.Total; })]);

    svg.append("g")
    .attr("class", "x axis")
  27. @mbostock 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
    @@ -26,7 +26,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

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

  28. @mbostock 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
    @@ -26,7 +26,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

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

  29. @mbostock mbostock revised this gist Oct 13, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,7 +44,8 @@

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

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
  30. @mbostock 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
    @@ -52,7 +52,7 @@
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

    data.forEach(function(d) {