Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active July 25, 2018 18:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbostock/3887193 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbostock/3887193 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mbostock revised this gist Oct 8, 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-donut-chart
  2. 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
  3. mbostock revised this gist Nov 26, 2015. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,9 @@
    <meta charset="utf-8">
    <style>

    body {
    .arc text {
    font: 10px sans-serif;
    text-anchor: middle;
    }

    .arc path {
    @@ -36,11 +37,8 @@
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

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

    data.forEach(function(d) {
    d.population = +d.population;
    });
    d3.csv("data.csv", type, function(error, data) {
    if (error) throw error;

    var g = svg.selectAll(".arc")
    .data(pie(data))
    @@ -54,9 +52,12 @@
    g.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.data.age; });

    });

    function type(d) {
    d.population = +d.population;
    return d;
    }

    </script>
  4. mbostock revised this gist Oct 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,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 width = 960,
  5. mbostock revised this gist Jun 11, 2015. 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
    @@ -12,7 +12,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 width = 960,
    @@ -59,4 +59,4 @@

    });

    </script>
    </script>
  6. mbostock revised this gist May 13, 2013. No changes.
  7. mbostock revised this gist Oct 14, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added 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.
  8. mbostock revised this gist Oct 14, 2012. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions README.md
    View file
    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
  9. mbostock revised this gist Oct 14, 2012. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions index.html
    View file
    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>
  10. mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    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; });
  11. mbostock revised this gist Oct 14, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -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; });
  12. mbostock revised this gist Oct 14, 2012. 1 changed file with 12 additions and 4 deletions.
    16 changes: 12 additions & 4 deletions index.html
    View file
    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>
  13. mbostock revised this gist Oct 14, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    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")
  14. mbostock revised this gist Oct 14, 2012. 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
    @@ -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) {

  15. mbostock revised this gist Oct 14, 2012. 2 changed files with 1 addition and 1 deletion.
    0 data.tsv → data.csv
    View file
    File renamed without changes.
    2 changes: 1 addition & 1 deletion index.html
    View file
    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;
  16. mbostock revised this gist Oct 14, 2012. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions index.html
    View file
    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);
  17. mbostock revised this gist Oct 14, 2012. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions index.html
    View file
    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) {
  18. mbostock created this gist Oct 14, 2012.
    8 changes: 8 additions & 0 deletions data.tsv
    View file
    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
    View file
    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>