Bike Share Users by Month

The Visualization

This is an exploratory visualization looking at the relationship between the total number of users and the the month of the year.

The Data

Washington DC Bike Sharing Data Set

The 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

forked from sajudson's block: Bike Share Test Chart

<!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>
    <script src="https://d3js.org/d3-random.v1.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.mnth;
      const xLabel = 'Month';
      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;
      };
      
      const xJitter = function(d){
        xTrue = xScale(xValue(d))
        jitter = (Math.random()-.5)*.15
        xDrawn = xScale(xValue(d) + jitter)
        console.log(xValue(d),xTrue,jitter,xDrawn)
        return(xDrawn)
      };
      
     
      
      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 => xJitter(d))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', "purple")
            .attr('fill-opacity', .1)
            .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

https://d3js.org/d3-random.v1.min.js