DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

|<- [[Using external data]]|[[Improving our pie layout]] ->|

===== Creating a pie layout =====

-> [[https://github.com/mbostock/d3/wiki/Layouts|github.com/mbostock/d3/wiki/Layouts]]

-> [[https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors|github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors]]

<code>
var width = 400;
var height = 400;
var radius = 200;
var colors = d3.scale.category20c();

var piedata = [
  {
    label: 'Maurice',
    value: 1,
  },
  {
    label: 'Mireille',
    value: 50,
  },
  {
    label: 'Bob',
    value: 49,
  },
];

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

var arc = d3.svg.arc()
  .outerRadius(radius);

var myChart = d3.select('#chart').append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
    .attr('transform', 'translate(' + (width - radius) + ', ' + (height - radius) + ')')
    .selectAll('path').data(pie(piedata))
    .enter().append('path')
      .attr('fill', function (d, i) {
        return colors(i);
      })
      .attr('d', arc);
</code>