Time Variation of Main Contributing Factors in the NYPD Vehicle Collisions Dataset

<!DOCTYPE html>
<html>

<head>
  <style>
      body {
      background-color: "aliceblue";
      font-size: 14px;
      font-family: 'Raleway', sans-serif;
    }
    
    p {
      color: gray;
      margin: 50px;
    }
    
    a {
      color: #4FDEF2;
    }
    
    .axis {
      fill: gray;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
    
    .axis .halo {
      stroke: gray;
      stroke-width: 4px;
      stroke-linecap: round;
    }
    
    .handle path {
      stroke: gray;
      stroke-width: 20px;
      stroke-linecap: round;
      pointer-events: none;
    }
    
    .handle text {
      fill: gray;
      text-align: center;
      font
  </style>
  <title>"How do the main contributing factors for accidents vary over the years?"</title>
  <h1> How do the main contributing factors for accidents vary over the years? </h1>
</head>

<body>

// parameters
    var margin = {
        top: 50,
        right: 50,
        bottom: 50,
        left: 50
      },
      width = 900 - margin.left - margin.right,
      height = 150 - margin.bottom - margin.top;
      
      var dur = 2000;

// scale function
    var timeScale = d3.scaleTime()
      .domain([new Date('2013-02'), new Date('2018-01')])
      .range([0, width])
      .clamp(true);

var formatDate = d3.timeFormat("%b, 20%y");
    var format2 = d3.timeFormat("20%y-%m")
      
      
      var w = 900;
      var h = 400;
      var margin2 = {top: 25, right: 25, bottom: 25,
          left: 150};
      var innerWidth = w - margin2.left - margin2.right;
      var innerHeight = h - margin2.top - margin2.bottom;
      var dur = 1500;                                 // NEW

// scales 
      var bardata = dataset.filter(function(element){ return element.MONTH_YEAR == '2013-02'; });

var yScale = d3.scaleBand()
          .domain(key.keys())
          .range([innerHeight, 0])
          .paddingInner(.1);

var xScale = d3.scaleLinear()
          .domain([0,5500])
//          .domain([0, Math.max(d3.max(map1.keys().map(Number)),d3.max(map2.keys().map(Number)))])
          .range([0, innerWidth])

var xAxis = d3.axisBottom()                     // NEW
          .scale(xScale);

var yAxis = d3.axisLeft()
          .scale(yScale);

var svg1 = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
      
      
      var bars = svg1.append("g")
          .attr("id", "plot")                         // NEW
          .attr("transform", `translate (${margin2.left}, ${margin2.top})`)
          .selectAll("rect")
          .data(bardata);

var rects = bars.enter().append("rect")
          .attr("x", d => xScale(0))
          .attr("y", (d, i) => yScale(d["CONTRIBUTING FACTOR VEHICLE 1"]))
          .attr("width", d => xScale(d["NUMBER_OF_ACCIDENTS"]))
          .attr("height", d => yScale.bandwidth())
          .attr("fill", "blue");

x = svg1.append("g")
          .attr("class", "xAxis")
          .attr("transform", `translate (${margin2.left}, ${h - margin2.bottom})`);
      x.call(xAxis);

y = svg1.append("g")
          .attr("class", "yAxis")
          .attr("transform", `translate (${margin2.left}, ${margin2.top})`);      
      y.call(yAxis);

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      // classic transform to position g
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
      .style("pointer-events", "all")
      .style("fill", "none")
      .attr("width", width)
      .attr("height", height)
      .style("cursor", "crosshair")
      .on("mousedown", function(){
        updatePos(this);
      })
      .on("mousemove", function(){
        if (d3.event.which === 1){
          updatePos(this);
        }
      });

function updatePos(elem){
      var xPos = d3.mouse(elem)[0];
      handle.attr('transform', 'translate(' + xPos + ",0)");
      var v = timeScale.invert(xPos);
      text.text(formatDate(v));

bardata1 = dataset.filter(function(element){ return element.MONTH_YEAR == format2(v); });

var yScale = d3.scaleBand()
          .domain(key.keys())
          .range([innerHeight, 0])
          .paddingInner(.1);

var yAxis = d3.axisLeft()
          .scale(yScale);

y
//          .transition().duration(dur)
          .call(yAxis)
        
      console.log(yScale(bardata1[0]["CONTRIBUTING FACTOR VEHICLE 1"]))
      console.log(yScale(bardata1[1]["CONTRIBUTING FACTOR VEHICLE 1"]))
      console.log(yScale(bardata1[2]["CONTRIBUTING FACTOR VEHICLE 1"]))
      console.log(yScale(bardata1[3]["CONTRIBUTING FACTOR VEHICLE 1"]))
      console.log(yScale(bardata1[4]["CONTRIBUTING FACTOR VEHICLE 1"]))
      console.log(yScale(bardata1[5]["CONTRIBUTING FACTOR VEHICLE 1"]))
        
      rects.attr("x", d => xScale(0))
//          .transition().duration(dur)
          .attr("y", (d, i) => yScale(bardata1[i]["CONTRIBUTING FACTOR VEHICLE 1"]))
          .attr("width", (d, i) => xScale(bardata1[i]["NUMBER_OF_ACCIDENTS"]))
          .attr("height", d => yScale.bandwidth())
          .attr("fill", "blue");
                
    }

svg.append("g")
      .attr("class", "x axis")
      // put in middle of screen
      .attr("transform", "translate(0," + height / 2 + ")")
      // inroduce axis
      .call(d3.axisBottom()
        .scale(timeScale)
        .tickFormat(function(d) {
          return formatDate(d);
        })
        .tickSize(0)
        .tickPadding(12)
        .tickValues([timeScale.domain()[0], timeScale.domain()[1]]))
      .select(".domain")
      .select(function() {
        console.log(this);
        return this.parentNode.appendChild(this.cloneNode(true));
      })
      .attr("class", "halo");

var handle = svg.append("g")
      .attr("class", "handle")
      
    handle.append("path")
      .attr("transform", "translate(0," + height / 2 + ")")
      .attr("d", "M 0 -10 V 10")

var text = handle.append('text')
      .text(formatDate(timeScale.domain()[0]))
      .attr("transform", "translate(" + (-18) + " ," + (height / 2 - 25) + ")");

</script>
  <br>
  <br>
  <br>
  <h2 style="color: dimgray"> Observations from the data: </h2>
  <ul style="color: gray">
   <li> Driver inattention / distraction has been the leading cause of accidents over the years. </li> <br>
   <li> Accidents due to Driver Inattention / Distraction has been increasing over the years. </li> <br>
   <li> May-Aug 2016 have very little accidents probably due to missing data collection </li> <br>
   <li> The top contributing factors leading to accidents have approximately the same proportion over time. </li><br>
   <li> The top 10 reasons for accidents seem to increase over the years. </li>
  </ul>
  <br>
  <h2 style="color: dimgray"> Sources: </h2>
  <ul style="color: dimgray">
        <li> Data: <a style="color: gray", href = 'https://data.cityofnewyork.us/Public-Safety/NYPD-Motor-Vehicle-Collisions/h9gi-nx95'> NYPD Motor Vehicle Collisions | NYC Open Data </a> </li><br>
    <li> Slider: <a style="color: gray", href = 'https://bl.ocks.org/mbostock/6452972'> Adapted from Mike Bostock's page | bl.ocks </a> </li>  
      
    
  </ul>
  <br>
  <br>
  <br>
  <br>
<p align="center" style="color: gray"> Created by Aakanksha Joshi, Adarsh Chavakula, Harsheel Soin and Deepak Maran for the course STATGR5702: Exploratory Data Analysis and Visualization at Columbia University in the City of New York (Spring 2018) </p>

</body>

</html>

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