| license: mit |
This pie chart shows the distribution of earnings for City of Boston Employees for calendar year 2016.
This pie chart was forked from curran's block: Pie Chart.This data is from City of Boston.gov: Data Boston (scaled down to 7790 rows).
Built with blockbuilder.org
| Rank | Number | |
|---|---|---|
| < $20000 | 614 | |
| $20000 - $50000 | 1431 | |
| $50000 - $80000 | 1554 | |
| $80000 - $110000 | 2309 | |
| $110000 - $140000 | 1030 | |
| > $140000 | 600 |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
| <title>Pie Chart</title> | |
| <style> | |
| body { | |
| margin: 0px; | |
| } | |
| .domain { | |
| display: none; | |
| } | |
| .legendCells text { | |
| fill: #8E8883; | |
| font-size: 20pt; | |
| font-family: sans-serif; | |
| } | |
| .legend-label { | |
| fill: #635F5D; | |
| font-size: 40pt; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| const pieValue = d => d.Number; | |
| const colorValue = d => d.Rank; | |
| const colorLabel = 'Salary'; | |
| const margin = { left: 20, right: 400, top: 1, bottom: 1 }; | |
| const svg = d3.select('svg'); | |
| const width = svg.attr('width'); | |
| const height = svg.attr('height'); | |
| const innerWidth = width - margin.left - margin.right; | |
| const innerHeight = height - margin.top - margin.bottom; | |
| const pie = d3.pie().value(pieValue); | |
| const arc = d3.arc() | |
| .innerRadius(0) | |
| .outerRadius(innerHeight / 2); | |
| const g = svg.append('g') | |
| .attr('transform', `translate(${margin.left},${margin.top})`); | |
| const pieG = g.append('g') | |
| .attr('transform', `translate(${innerWidth / 2},${innerHeight / 2})`); | |
| const colorLegendG = g.append('g') | |
| .attr('transform', `translate(${innerWidth + 60}, 150)`); | |
| colorLegendG.append('text') | |
| .attr('class', 'legend-label') | |
| .attr('x', -15) | |
| .attr('y', -40) | |
| .text(colorLabel); | |
| const colorScale = d3.scaleOrdinal() | |
| .range(d3.schemeCategory10); | |
| const colorLegend = d3.legendColor() | |
| .scale(colorScale) | |
| .shape('circle'); | |
| const row = d => { | |
| d.population = +d.population; | |
| return d; | |
| }; | |
| d3.csv('dataset1_1.csv', row, data => { | |
| colorScale.domain(data.map(colorValue)); | |
| const arcs = pie(data); | |
| pieG.selectAll('path').data(arcs) | |
| .enter().append('path') | |
| .attr('d', arc) | |
| .attr('fill', d => colorScale(colorValue(d.data))); | |
| colorLegendG.call(colorLegend) | |
| .selectAll('.cell text') | |
| .attr('dy', '0.1em'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
