Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active June 3, 2025 17:21
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save mbostock/3887235 to your computer and use it in GitHub Desktop.
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-pie-chart
  2. mbostock revised this gist Mar 7, 2017. 2 changed files with 29 additions and 37 deletions.
    7 changes: 3 additions & 4 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    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
    * [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
    * [d3-dsv](https://github.com/d3/d3-dsv) - load and parse data
    * [d3-scale](https://github.com/d3/d3-scale) - color encoding
    * [d3-shape](https://github.com/d3/d3-shape) - layout and render arcs
    59 changes: 26 additions & 33 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,56 +12,49 @@
    }

    </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 width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

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

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

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

    var labelArc = d3.svg.arc()
    var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

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

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

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

    var g = svg.selectAll(".arc")
    .data(pie(data))
    var arc = g.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); });
    arc.append("path")
    .attr("d", path)
    .attr("fill", function(d) { return color(d.data.age); });

    g.append("text")
    .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    arc.append("text")
    .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
    .attr("dy", "0.35em")
    .text(function(d) { return d.data.age; });
    });

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

    </script>
  3. 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
  4. mbostock revised this gist Nov 26, 2015. 2 changed files with 14 additions and 9 deletions.
    23 changes: 14 additions & 9 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 {
    @@ -26,6 +27,10 @@
    .outerRadius(radius - 10)
    .innerRadius(0);

    var labelArc = d3.svg.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

    var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });
    @@ -36,11 +41,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))
    @@ -52,11 +54,14 @@
    .style("fill", function(d) { return color(d.data.age); });

    g.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("transform", function(d) { return "translate(" + labelArc.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>
    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.
  5. 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,
  6. 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>
  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. 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 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
    View file
    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)
  9. 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
  10. 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>
  11. 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; });
  12. 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; });
  13. 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>
  14. 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")
  15. 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) {

  16. 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;
  17. 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);
  18. 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) {
  19. 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>