User Tools

Site Tools


dvd3js:creating_a_pie_layout

Creating a pie layout

github.com/mbostock/d3/wiki/Layouts

github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors

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);
dvd3js/creating_a_pie_layout.txt · Last modified: 2016/04/14 20:03 by leo