Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active October 12, 2024 05:42
Download ZIP

Revisions

  1. mbostock revised this gist Oct 7, 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-bar-chart
  2. mbostock revised this gist Dec 24, 2016. 1 changed file with 19 additions and 20 deletions.
    39 changes: 19 additions & 20 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <style>

    .axis path {
    .axis .domain {
    display: none;
    }

    @@ -18,7 +18,7 @@

    var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.05)
    .paddingInner(0.05)
    .align(0.1);

    var y = d3.scaleLinear()
    @@ -27,19 +27,23 @@
    var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    var stack = d3.stack();

    d3.csv("data.csv", type, function(error, data) {
    d3.csv("data.csv", function(d, i, columns) {
    for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
    d.total = t;
    return d;
    }, function(error, data) {
    if (error) throw error;

    data.sort(function(a, b) { return b.total - a.total; });
    var keys = data.columns.slice(1);

    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; })]).nice();
    z.domain(data.columns.slice(1));
    z.domain(keys);

    g.selectAll("g")
    .data(stack.keys(data.columns.slice(1))(data))
    g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
    .attr("fill", function(d) { return z(d.key); })
    .selectAll("rect")
    @@ -57,23 +61,24 @@

    g.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y).ticks(10, "s"))
    .call(d3.axisLeft(y).ticks(null, "s"))
    .append("text")
    .attr("x", 2)
    .attr("y", y(y.ticks(10).pop()) + 0.5)
    .attr("y", y(y.ticks().pop()) + 0.5)
    .attr("dy", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start")
    .text("Population");

    var legend = g.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("text-anchor", "end")
    .selectAll("g")
    .data(data.columns.slice(1).reverse())
    .data(keys.slice().reverse())
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
    .style("font", "10px sans-serif");
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
    .attr("x", width - 19)
    @@ -88,10 +93,4 @@
    .text(function(d) { return d; });
    });

    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 Dec 24, 2016. 1 changed file with 17 additions and 22 deletions.
    39 changes: 17 additions & 22 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,13 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .bar {
    fill: steelblue;
    }

    .axis path {
    display: none;
    }

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

    var svg = d3.select("svg"),
    @@ -23,7 +18,7 @@

    var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1)
    .padding(0.05)
    .align(0.1);

    var y = d3.scaleLinear()
    @@ -43,10 +38,9 @@
    y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
    z.domain(data.columns.slice(1));

    g.selectAll(".serie")
    g.selectAll("g")
    .data(stack.keys(data.columns.slice(1))(data))
    .enter().append("g")
    .attr("class", "serie")
    .attr("fill", function(d) { return z(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    @@ -57,39 +51,40 @@
    .attr("width", x.bandwidth());

    g.append("g")
    .attr("class", "axis axis--x")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

    g.append("g")
    .attr("class", "axis axis--y")
    .attr("class", "axis")
    .call(d3.axisLeft(y).ticks(10, "s"))
    .append("text")
    .attr("x", 2)
    .attr("y", y(y.ticks(10).pop()))
    .attr("dy", "0.35em")
    .attr("text-anchor", "start")
    .attr("y", y(y.ticks(10).pop()) + 0.5)
    .attr("dy", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start")
    .text("Population");

    var legend = g.selectAll(".legend")
    var legend = g.append("g")
    .attr("text-anchor", "end")
    .selectAll("g")
    .data(data.columns.slice(1).reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
    .style("font", "10px sans-serif");

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

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

  4. mbostock revised this gist Jul 8, 2016. 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
    @@ -16,15 +16,15 @@
    <script>

    var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 60},
    margin = {top: 20, right: 20, 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.scaleBand()
    .rangeRound([0, width])
    .padding(0.1)
    .align(0.3);
    .align(0.1);

    var y = d3.scaleLinear()
    .rangeRound([height, 0]);
  5. mbostock revised this gist Jul 7, 2016. 1 changed file with 8 additions and 14 deletions.
    22 changes: 8 additions & 14 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -29,31 +29,25 @@
    var y = d3.scaleLinear()
    .rangeRound([height, 0]);

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

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y)
    .tickFormat(d3.format(".2s"));

    var stack = d3.stack();

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

    color.domain(data.columns.slice(1));
    stack.keys(data.columns.slice(1));

    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; })]).nice();
    z.domain(data.columns.slice(1));

    g.selectAll(".serie")
    .data(stack(data))
    .data(stack.keys(data.columns.slice(1))(data))
    .enter().append("g")
    .attr("class", "serie")
    .attr("fill", function(d) { return color(d.key); })
    .attr("fill", function(d) { return z(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    @@ -65,11 +59,11 @@
    g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    .call(d3.axisBottom(x));

    g.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis)
    .call(d3.axisLeft(y).ticks(10, "s"))
    .append("text")
    .attr("x", 2)
    .attr("y", y(y.ticks(10).pop()))
    @@ -89,7 +83,7 @@
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .attr("fill", color);
    .attr("fill", z);

    legend.append("text")
    .attr("x", width - 24)
  6. mbostock revised this gist Jul 7, 2016. 2 changed files with 62 additions and 80 deletions.
    17 changes: 7 additions & 10 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,8 @@
    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. The chart employs [conventional margins](/mbostock/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
    * [d3.scale.linear](https://github.com/mbostock/d3/wiki/Quantitative-Scales) - *y*-position encoding
    * [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). Here, it makes sense to group the rects by state (column), rather than grouping by age group (series), as you do with a [stacked area chart](../3885211).
    * [d3-dsv](https://github.com/d3/d3-dsv) - load and parse data
    * [d3-scale](https://github.com/d3/d3-scale) - *x*- and *y*-position, and color encoding
    * [d3-format](https://github.com/d3/d3-format) - SI prefix formatting (e.g., “10M” for 10,000,000)
    * [d3-array](https://github.com/d3/d3-array) - compute simple statistics (e.g., max)
    * [d3-axis](https://github.com/d3/d3-axis) - display axes
    * [d3-shape](https://github.com/d3/d3-shape) - computed stacked positions
    125 changes: 55 additions & 70 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,122 +2,107 @@
    <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;
    }

    </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: 20, 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: 20, bottom: 30, left: 60},
    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.3);

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

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

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

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

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

    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.total = d.ages[d.ages.length - 1].y1;
    });
    color.domain(data.columns.slice(1));
    stack.keys(data.columns.slice(1));

    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.total; })]).nice();

    g.selectAll(".serie")
    .data(stack(data))
    .enter().append("g")
    .attr("class", "serie")
    .attr("fill", function(d) { return color(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    .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());

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

    svg.append("g")
    .attr("class", "y axis")
    g.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("x", 2)
    .attr("y", y(y.ticks(10).pop()))
    .attr("dy", "0.35em")
    .attr("text-anchor", "start")
    .attr("fill", "#000")
    .text("Population");

    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x(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); })
    .style("fill", function(d) { return color(d.name); });

    var legend = svg.selectAll(".legend")
    .data(color.domain().slice().reverse())
    var legend = g.selectAll(".legend")
    .data(data.columns.slice(1).reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
    .style("font", "10px sans-serif");

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

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

    });

    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>
  7. 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
  8. 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
    @@ -23,7 +23,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: 20, bottom: 30, left: 40},
  9. 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
    @@ -23,7 +23,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: 20, bottom: 30, left: 40},
    @@ -55,6 +55,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) {
    @@ -118,4 +120,4 @@

    });

    </script>
    </script>
  10. 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
    @@ -75,7 +75,13 @@

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

    var state = svg.selectAll(".state")
    .data(data)
  11. mbostock revised this gist Oct 14, 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
    @@ -8,4 +8,4 @@ This stacked bar chart is constructed from a CSV file storing the populations of
    * [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).
    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). Here, it makes sense to group the rects by state (column), rather than grouping by age group (series), as you do with a [stacked area chart](../3885211).
  12. mbostock revised this gist Oct 14, 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
    @@ -55,11 +55,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.total = d.ages[d.ages.length - 1].y1;
    });

    @@ -92,7 +92,7 @@
    .style("fill", function(d) { return color(d.name); });

    var legend = svg.selectAll(".legend")
    .data(ageNames.slice().reverse())
    .data(color.domain().slice().reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  13. 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
  14. 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.
  15. 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
    @@ -37,7 +37,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)
  16. 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
    @@ -34,7 +34,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"]);
  17. mbostock revised this gist Oct 14, 2012. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -77,8 +77,22 @@
    .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(" + x(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); })
    .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 + ")"; });
    @@ -96,20 +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(" + x(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); })
    .style("fill", function(d) { return color(d.name); });

    });

    </script>
  18. mbostock revised this gist Oct 14, 2012. 2 changed files with 2 additions and 2 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 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 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 and color encoding
    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(["#b2182b", "#ef8a62", "#fddbc7", "#f7f7f7", "#d1e5f0", "#67a9cf", "#2166ac"]);
    .range(["#4682b4", "#536793", "#574d73", "#553355", "#733247", "#8c2f39", "#a52a2a"]);

    var xAxis = d3.svg.axis()
    .scale(x)
  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
    @@ -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 + ")"; });
  20. 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")
  21. 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
  22. 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).
  23. 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.
  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
    @@ -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)
  25. 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)
  26. 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")
  27. 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")
  28. 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")
  29. 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;

  30. 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;