| license: mit |
Built with blockbuilder.org This dataset is about 341 item of boston roadway resurfacing, roadway reconstruction, and sidewalk reconstruction, the raw csv file can be found here.
More about this theme click this link.
This pie chart presents the total length of roads to be constructed in each work type.
Chart code forked from Curran Kelleher’s block.
| ScopeOfWor,Shape_Leng | |
| ARP,119695.0729 | |
| CRP,59852.13412 | |
| DEEP MILL,4529.859242 | |
| Full Reconstruction,41336.91774 | |
| PRESERVATION,12437.72602 | |
| Proposed Full Recon,1653.999647 | |
| Sidewalk Recon,23240.45707 |
| <!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>CITY OF BOSTON PROJECTS FY2017</title> | |
| <style> | |
| body { | |
| margin: 20px; | |
| } | |
| .domain { | |
| display: none; | |
| } | |
| .legendCells text { | |
| fill: #8E8883; | |
| font-size: 18pt; | |
| font-family: sans-serif; | |
| } | |
| .legend-label { | |
| fill: #635F5D; | |
| font-size: 36pt; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| const pieValue = d => d.Shape_Leng; | |
| const colorValue = d => d.ScopeOfWor; | |
| const colorLabel = 'Scope Of Work'; | |
| 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', -30) | |
| .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('data', 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> |