D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
denisemauldin
Full window
Github gist
Pie chart
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="chart"></div> <script> dataset = [{"Company":"A", "value":131}, {"Company":"B", "value":74}, {"Company":"C", "value":97}]; var width = 360; var height = 360; var radius = Math.min(width, height) / 2; var color = d3.scaleOrdinal(d3.schemeCategory20b); 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.arc() .innerRadius(0) .outerRadius(radius); var pie = d3.pie() .value(function(d) { return d.value; }) .sort(null); var path = svg.selectAll('path') .data(pie(dataset)) .enter() .append('path') .attr('d', arc) .attr('fill', function(d) { return color(d.data.Company); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js