Time Series Sketch Prototype

The Visualization

This is part of an exploratory visualization project looking at the time of day use patterns and the relationship between the number of users and quantitative weather attributes (temperature, humidity and windspeed).

The Data

Washington DC Bike Sharing Data Set

This data set contains the number of bike share system users (casual and registered) for each day (and hour) for two years (Jan 2011 - Dec 2012), as well as the day type (holiday, workingday), weather situation, temperature and humidity, apparent temperature and windspeed.

This data is from UCI Machine Learning Repository: Bike Sharing Data Set

The dataset file can be found here as a zip archive.

Daily Data Block Summary Hourly Data Block Summary

Inspiration and Sources

forked from mbostock's block: Brush & Zoom forked from curran's block: Line Chart of Temperature

forked from sajudson's block: Global Carbon Emissions by Year, 1751-2011

<!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>
    <title>Temperature Visualization</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
        stroke-width: 1;
      }
      .tick text {
        fill: #8E8883;
        font-size: 5pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 5pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="200"></svg>
    <script>
      const xValue = d => d.dteday;
      const xLabel = 'Date';
      const y1Value = d => d.registered;
      const y2Value = d => d.casual;
      const y3Value = d => d.atemp;
      const yLabel = 'Bike Share Users';
      const yLabelRight = 'Apparent Temperature';
      const margin = { left: 120, right: 120, top: 20, bottom: 120 };

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;
      yAxis2Position = innerWidth

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 50)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
      
      yAxisRightG.append('text')
          .attr('class', 'axis-label')
          .attr('x', +innerHeight / 2)
          .attr('y', -yAxis2Position +650)
          .attr('transform', `rotate(90)`)
          .style('text-anchor', 'middle')
          .text(yLabelRight);

const xScale = d3.scaleTime();
      const yScaleLeft = d3.scaleLinear();
			const yScaleRight = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .ticks(12)
      	.tickFormat(d3.timeFormat("%Y-%m-%d"))
        .tickSize(-innerHeight);

const yTicksLeft = 5;
      const yAxisLeft = d3.axisLeft()
        .scale(yScaleLeft)
        .ticks(yTicksLeft)
        .tickPadding(15)
        .tickSize(-innerWidth);
      
      const yTicksRight = 10;
      const yAxisRight = d3.axisRight()
        .scale(yScaleRight)
        .ticks(yTicksRight)
        .tickPadding(15)
        .tickSize(3);
			
      const line2 = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScaleLeft(y2Value(d)))
        .curve(d3.curveBasis);

const line1 = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScaleLeft(y1Value(d)))
        .curve(d3.curveBasis)
      
      const line3 = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScaleRight(y3Value(d)))
        .curve(d3.curveBasis)
      
      
      var parseTime = d3.timeParse("%Y-$m-%d");
      const row = d => {
        d.dteday = new Date(d.dteday);
        d.season = +d.season;
        d.yr = +d.yr;
        d.mnth = +d.mnth;
        d.holiday = +d.holiday;
        d.weekday = +d.weekday;
        d.workingday = +d.workingday;
        d.weathersit = +d.weathersit;
        d.temp = +d.temp;
        d.atemp = +d.atemp;
        d.hum = +d.hum;
        d.windspeed = +d.windspeed;
        d.casual = +d.casual;
        d.registered = +d.registered;
        d.cnt = +d.cnt;
        return d;
      };

d3.csv('day.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth]);

yScaleLeft
          .domain(d3.extent(data, y1Value))
          .range([innerHeight, 0])
          .nice(yTicksLeft);

yScaleRight
          .domain(d3.extent(data, y3Value))
          .range([innerHeight, 0])
          .nice(yTicksRight);

g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'darkblue')
            .attr('stroke-width', 1)
            .attr('d', line1(data));

g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'green')
            .attr('stroke-width', 1)
            .attr('d', line2(data));
       
        
        xAxisG.call(xAxis)
        			.selectAll("text")
            	.style("text-anchor", "middle")
              .attr("dx", "-.8em")
              .attr("dy", ".15em")
              .attr("transform", "rotate(0)");
        yAxisG.call(yAxisLeft);
        yAxisRightG.call(yAxisRight);
        
        g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'orange')
            .attr('stroke-width', 1)
            .attr('d', line3(data));

});
    </script>
  </body>
</html>

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