D3 Examples - Uber - Dataset Visualization Alpha

Uber Drives
This data is from My Uber Drives. Here are the details informations of a Uber Drives of 2016. He is sharing this dataset for data science community to learn from the behavior of an ordinary Uber customer.
This dataset is about each Uber drives' start date, end date, start place, end place, miles and purpose.
xxxxxxxxxx
 
<!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>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .tick text, .legendCells text {
        fill: #111111;
        font-size: 10pt;
        font-family: 'Open Sans', sans-serif;
      }
      .axis-label, .legend-label {
        fill: #AAAAAA;
        font-size: 10pt;
        font-family: 'Open Sans', sans-serif;
      }
      .subtitle {
        font-size: 40pt;
        font-family: 'Open Sans', sans-serif;
        alignment-baseline: middle;
        fill: #001f3f;
    }
        circle:hover {
        fill: #F012BE;
    }
      div.tooltip { 
            position: absolute;         
            text-align: center;         
            width: 150px;                   
            height: 30px;
        vertical-align: middle;
        line-height: 30px;
                font-family:'Open Sans', sans-serif;
            background: #FFDC00;    
            border: 0px;        
            border-radius: 8px;         
            pointer-events: none;           
        }
      
    </style>
  </head>
  <body>
    <script>
      const parseTime = d3.timeParse("%m/%d/%Y");
      const yValue = d => d.Counts;
      const yLabel = 'Bomb Counts';
      const colorValue = d => d.Country;
      const colorLabel = 'Countries';
      const margin = { left: 120, right: 120, top: 20, bottom: 120 };
​
      const svg = d3.select("body").append("svg")
        .attr("width", 1000)
        .attr("height", 500);
      
      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 g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top+50})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
​
      var temp = d3.select('body').append('div')    
            .attr('class', 'tooltip')               
            .style('opacity', 0);
      
      
      g.append('text')
        .attr('class', 'subtitle')
        .attr('x', 0)
        .attr('y', margin.top-50)
            .style('font-weight', 'bold')
        .text('Uber rides daily frequency');
      
      
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 50)
          .text('Date');
​
      yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text('Ride Count');
      
      const xScale = d3.scaleTime();
      const yScale = d3.scaleLinear();
      const rScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
​
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(10)
        .tickPadding(20)
        .tickFormat(d3.timeFormat("%y/%m/%d"))
        .tickSize(5);
​
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(10)
        .tickPadding(15)
        .tickSize(5);
      
​
      var line = d3.line()
        .x(function(d) {return xScale(parseTime(d.key));})
        .y(function(d) {return yScale(d.value);});
      
      d3.csv('My Uber Drives - 2016.csv', data => {
        data = data.filter(function(d){ return d.START_DATE != 'Totals';})
​
        xScale
          .domain(d3.extent(data, d=>parseTime(d.START_DATE.split(' ')[0])))
          .range([0, innerWidth])
          .nice();
        
        data = d3.nest()
                        .key(function(d) {return d.START_DATE.split(' ')[0]; }).sortKeys(function(a,b) { return new Date(b) - new Date(a);})
                                .rollup(d => d.length)
                                .entries(data);
​
​
        yScale
          .domain([0,15])
          .range([innerHeight, 0])
          .nice();
        
​
        g.append('path')
           .datum(data)
             .attr("fill", "none")
               .attr("stroke", d => colorScale(d.key))
             .attr("stroke-linejoin", "round")
             .attr("stroke-linecap", "round")
             .attr("stroke-width", 1)
             .attr("d", line)
        
        
        
        
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>
​
    