Skip to content

Instantly share code, notes, and snippets.

@mheiber
Forked from mbostock/.block
Created April 23, 2014 23:56

Revisions

  1. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  2. @mbostock mbostock revised this gist Oct 14, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
    This pie chart is constructed from a CSV file storing the populations of various age groups. The chart employs 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) - color encoding
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@

    var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);
    .innerRadius(0);

    var pie = d3.layout.pie()
    .sort(null)
  3. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs 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) - color encoding
    * [d3.svg.arc](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-arc) - display arcs
    * [d3.layout.pie](https://github.com/mbostock/d3/wiki/Pie-Layout) - compute arc angles from data
  4. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,14 @@
    <meta charset="utf-8">
    <style>

    body {
    font: 10px sans-serif;
    }

    .arc path {
    stroke: #fff;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  5. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -44,8 +44,7 @@
    .style("fill", function(d) { return color(d.data.age); });

    g.append("text")
    .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2) * (radius - 40); })
    .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2) * (radius - 40); })
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.data.age; });
  6. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -44,8 +44,8 @@
    .style("fill", function(d) { return color(d.data.age); });

    g.append("text")
    .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); })
    .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); })
    .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2) * (radius - 40); })
    .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2) * (radius - 40); })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.data.age; });
  7. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 12 additions and 4 deletions.
    16 changes: 12 additions & 4 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -8,14 +8,15 @@
    <script>

    var width = 960,
    height = 500;
    height = 500,
    radius = Math.min(width, height) / 2;

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

    var arc = d3.svg.arc()
    .outerRadius(Math.min(width, height) / 2 - 10)
    .innerRadius(Math.min(width, height) / 2 - 70);
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

    var pie = d3.layout.pie()
    .sort(null)
    @@ -42,6 +43,13 @@
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.age); });

    g.append("text")
    .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); })
    .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.data.age; });

    });

    </script>
    </script>
  8. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -18,6 +18,7 @@
    .innerRadius(Math.min(width, height) / 2 - 70);

    var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });

    var svg = d3.select("body").append("svg")
  9. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -15,14 +15,16 @@

    var arc = d3.svg.arc()
    .outerRadius(Math.min(width, height) / 2 - 10)
    .innerRadius(Math.min(width, height) / 2 - 50);
    .innerRadius(Math.min(width, height) / 2 - 70);

    var pie = d3.layout.pie()
    .value(function(d) { return d.population; });

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    d3.csv("data.csv", function(error, data) {

  10. @mbostock mbostock revised this gist Oct 14, 2012. 2 changed files with 1 addition and 1 deletion.
    File renamed without changes.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@
    .attr("width", width)
    .attr("height", height);

    d3.tsv("data.tsv", function(error, data) {
    d3.csv("data.csv", function(error, data) {

    data.forEach(function(d) {
    d.population = +d.population;
  11. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,9 @@
    var width = 960,
    height = 500;

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

    var arc = d3.svg.arc()
    .outerRadius(Math.min(width, height) / 2 - 10)
    .innerRadius(Math.min(width, height) / 2 - 50);
  12. @mbostock mbostock revised this gist Oct 14, 2012. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,10 @@
    var pie = d3.layout.pie()
    .value(function(d) { return d.population; });

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    d3.tsv("data.tsv", function(error, data) {

    data.forEach(function(d) {
  13. @mbostock mbostock created this gist Oct 14, 2012.
    8 changes: 8 additions & 0 deletions data.tsv
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    age,population
    <5,2704659
    5-13,4499890
    14-17,2159981
    18-24,3853788
    25-44,14106543
    45-64,8819342
    ≥65,612463
    37 changes: 37 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

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

    var width = 960,
    height = 500;

    var arc = d3.svg.arc()
    .outerRadius(Math.min(width, height) / 2 - 10)
    .innerRadius(Math.min(width, height) / 2 - 50);

    var pie = d3.layout.pie()
    .value(function(d) { return d.population; });

    d3.tsv("data.tsv", function(error, data) {

    data.forEach(function(d) {
    d.population = +d.population;
    });

    var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

    g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.age); });

    });

    </script>