Bike Share Users vs. Apparent Temp

The Visualization

This is an exploratory visualization looking at the relationship between the total number of users and the apparent temperature - a feature that reflects the effects of temperature and humidity on perceived comfort.

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.

forked from curran's block: Stylized Scatter Plot with Color Legend

forked from sajudson's block: CS Degrees Awarded 1971-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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>DC Bike Share Test Chart</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 8pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 12pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.atemp;
      const xLabel = 'Temperature';
      const yValue = d => d.cnt;
      const yLabel = 'Users';
      const margin = { left: 120, right: 300, 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;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 75)
          .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);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickFormat(d3.format('0'))
        .tickSize(-innerHeight);

const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(15)
        .tickSize(-innerWidth);

const row = d => {
        d.instant = +d.instant;
        //d.dteday = +d.dteday; //need to parse date
        d.season = +d.season;
        d.yr = +d.yr;
        d.mnth = +d.mnth;
        d.holiday = +d.holiday; //flag
        d.weekday = +d.weekday; //integer day of week (0-6)
        d.workingday = +d.workingday; //flag
        d.weathersit = +d.weathersit; //(1-4)
        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])
          .nice();

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', "green")
            .attr('fill-opacity', .2)
            .attr('r', 5);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        //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