D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kjudd
Full window
Github gist
Basic pie chart in d3
<html> <body> <head> My Pokemon </head> <div id="chart"></div> <script src="https://d3js.org/d3.v3.min.js"></script> <script> (function(d3) { 'use strict'; var dataset = [ { label: 'pikachu', count: 10 }, { label: 'charmander', count: 20 }, { label: 'bulbasaur', count: 30 }, { label: 'squirtle', count: 40 } ]; var width = 500; var height = 500; var radius = Math.min(width, height) / 2; var color = d3.scale.ordinal().range(['#ffff00', '#ff0000', '#00ff00', '#0099ff']); var svg = d3.select('#chart') .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')'); var arc = d3.svg.arc() .outerRadius(radius); var pie = d3.layout.pie() .value(function(d) { return d.count; }) .sort(null); var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var path = svg.selectAll('path') .data(pie(dataset)) .enter() .append('path') .attr('d', arc) .attr('fill', function(d, i) { return color(d.data.label); }); })(window.d3); </script> </body> </html>
https://d3js.org/d3.v3.min.js