Boston_Project_Visualizaiton

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.

<!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);

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.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>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js