Skip to content

Instantly share code, notes, and snippets.

@tannerlinsley

tannerlinsley/.block

Forked from mbostock/.block
Created April 4, 2018 21:49
Show Gist options
  • Save tannerlinsley/df95132bac67b8d196b64fd77ce155c9 to your computer and use it in GitHub Desktop.
Save tannerlinsley/df95132bac67b8d196b64fd77ce155c9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tannerlinsley revised this gist Apr 4, 2018. 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
    @@ -45,7 +45,7 @@
    .selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
    // .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
    .enter().append("rect")
  2. @mbostock mbostock revised this gist Dec 24, 2016. 1 changed file with 23 additions and 14 deletions.
    37 changes: 23 additions & 14 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,10 +16,18 @@
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var x0 = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    x1 = d3.scaleBand(),
    y = d3.scaleLinear().rangeRound([height, 0]),
    z = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
    var x0 = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.1);

    var x1 = d3.scaleBand()
    .padding(0.05);

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

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

    d3.csv("data.csv", function(d, i, columns) {
    for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
    @@ -28,9 +36,10 @@
    if (error) throw error;

    var keys = data.columns.slice(1);

    x0.domain(data.map(function(d) { return d.State; }));
    x1.domain(keys).rangeRound([0, x0.bandwidth()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]);
    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();

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

    var legend = g.append("g")
    @@ -73,15 +82,15 @@
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    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", "0.35em")
    .attr("y", 9.5)
    .attr("dy", "0.32em")
    .text(function(d) { return d; });
    });

  3. @mbostock mbostock revised this gist Dec 23, 2016. 1 changed file with 55 additions and 90 deletions.
    145 changes: 55 additions & 90 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,123 +1,88 @@
    <!DOCTYPE html>
    <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 .domain {
    display: none;
    }

    </style>
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <svg width="960" height="500"></svg>
    <script src="https://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 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(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .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 + ")");

    d3.csv("data.csv", function(error, data) {
    var svg = d3.select("svg"),
    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 x0 = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    x1 = d3.scaleBand(),
    y = d3.scaleLinear().rangeRound([height, 0]),
    z = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

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

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

    var keys = data.columns.slice(1);
    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")
    .attr("transform", "translate(0," + height + ")")
    .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");
    x1.domain(keys).rangeRound([0, x0.bandwidth()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]);

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

    state.selectAll("rect")
    .data(function(d) { return d.ages; })
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
    .enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function(d) { return x1(d.name); })
    .attr("x", function(d) { return x1(d.key); })
    .attr("y", function(d) { return y(d.value); })
    .attr("width", x1.bandwidth())
    .attr("height", function(d) { return height - y(d.value); })
    .style("fill", function(d) { return color(d.name); });
    .attr("fill", function(d) { return z(d.key); });

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

    var legend = svg.selectAll(".legend")
    .data(ageNames.slice().reverse())
    g.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y).ticks(null, "s"))
    .append("text")
    .attr("fill", "#000")
    .attr("y", y(y.ticks().pop()))
    .attr("x", -28)
    .attr("dy", "-1em")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Population");

    var legend = g.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .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);
    .attr("fill", z);

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

    });

    </script>
  4. @mbostock 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
  5. @mbostock mbostock revised this gist Dec 18, 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
    @@ -87,7 +87,7 @@
    var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("class", "state")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

    state.selectAll("rect")
  6. @mbostock 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},
  7. @mbostock 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},
    @@ -57,6 +57,8 @@
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

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

    data.forEach(function(d) {
    @@ -118,4 +120,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) {