Uber - Dataset Visualization Alpha

This example summarizes a data table using Datalib. You can fork this Block and change the data to get a quick overview of the shape of your data.

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.

forked from curran's block: Line Chart of Temperature

forked from curran's block: Data Table Summary

forked from YouthBread's block: Data Table Summary - Uber Drive

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

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

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>

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

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