Old school D3 from simpler times

All examples By author By category About

sajudson

Full window Github gist

Radial Time Series - Daily Data

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

Originally forked from curran's block: Line Chart of Temperature

Draws code from Scott Judson's blocks including:

[Global Carbon Emissions by Year, 1751-2011](/sajudson/ad02a7cf9ba7fd7eed0017ecd4dd0b13)

[Bike Share Users Time Series](/sajudson/6868f6f0836fc6f88566587b9e9e4a50)

[Bike Share Users Radial Time Series](/sajudson/60aec6f286928b4089d01f74ba4cd627)

<!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>Radial User Prototype</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
        stroke-width: 1;
      }
      .tick text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 12pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="700" height="500"></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: 60, right: 60, top: 60, bottom: 60 };

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

const g = svg.append('g')
          .attr('transform', `translate(${innerWidth/2+margin.left},${innerHeight/2+margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');

function tickEndPoint(angle,radius){
  			x = radius * Math.cos(angle)
        y = radius * Math.sin(angle)
 	      return [x,y]}; 
      
      const tickAngles = function(numberOfTicks){
        let tickAngles = []
				console.log(numberOfTicks)
        for(i=0; i<numberOfTicks; i++){
          console.log(i/numberOfTicks)
          console.log(Math.PI *2)
          angle = Math.PI *2 * i/numberOfTicks
          console.log(angle)
          tickAngles.push(angle)        }
        return tickAngles};
      
       
      function tickCoordinates(numberOfTicks,tickRadius){
				let tickAngle = tickAngles(numberOfTicks)
       	let xTickArray =[]
        for (i = 0; i <tickAngle.length; i++){
          xy = tickEndPoint(tickAngle[i],tickRadius)
          xTickArray.push(xy)
        }		
       	return xTickArray 
       };
      let numTicks =12;
      let t = tickAngles(numTicks);
      let yScaleMax = innerHeight/2;
		  let xTickLength = yScaleMax *1.05;
      let xTickArray = tickCoordinates (numTicks,xTickLength)
      
      console.log(t)
      console.log(xTickArray)
      
      
       yTicks =  [.25,.5,.75,1];
        
        for (i in yTicks){
          g.append('circle')
        		.attr('cx',0)
        		.attr('cy',0)
            .attr('fill', 'none')
            .attr('stroke', 'lightgrey')
            .attr('stroke-width', 1)
            .attr('r', yScaleMax * yTicks[i])
        };
        
      
				xTickLabel = ['Jan','Feb', 'Mar',
                      'Apr','May','Jun',
                      'Jul','Aug','Sep',
                     	'Oct','Nov','Dec'];
      
        for (i in xTickArray){
          g.append('line')
        		.attr('x1',0)
        		.attr('y1',0)
            .attr('x2',xTickArray[i][0])
        		.attr('y2',xTickArray[i][1])
            .attr('fill', 'none')
            .attr('stroke', 'lightgrey')
            .attr('stroke-width', 1);
   				g.append('text')
          	.attr('class', "tick text")
          	.text("xtick")
            .attr('text-anchor', 'middle')   
            .attr("x", xTickArray[i][0])
            .attr("y",xTickArray[i][1])
        .attr('transform',`rotate(${90+(t[i])*360/(2*Math.PI)},${xTickArray[i][0]},${xTickArray[i][1]})`)
            .attr('font-family', 'sans-serif')
            .attr('fill',"grey")
          	.attr('font-size', 11)
            .text(xTickLabel[i])
        };
      
      
      
      
      
      const xScale = d3.scaleTime();
      const yScaleLeft = d3.scaleLinear();
			
     
      
      function deltaDays(date1, date2){
        const dayms = 1000 * 60 * 60 * 24;
        var date1ms = date1.geTime();
        var date2ms = date2.getTime();
        var deltams = date1ms-date2ms
        return (deltams/dayms)
        }; 
      
      const minDate = new Date(2012,1,1)
      const offset = innerHeight/2;
      //getting a 
      //const days = d => deltaDays(d.dteday,minDate);
  
      const days = d =>(d.dteday.getTime()/(1000*60*60*24))
      const angleDays = d => (days(d)/365 *Math.PI*2);
      const radialScale = d => (innerHeight/2* d.cnt/maxUser.Total);
      
      const radialScale1 = d => (innerHeight/2* d.casual/8000);
      const radialScale2 = d => (innerHeight/2* d.registered/8000);
        const radialX = d => (radialScale(d) * Math.cos(theta(d))+offset);
      const radialY = d => (radialScale(d) * Math.sin(theta(d))+offset);
      
      
      const curveFunction = d3.curveCatmullRom;      
  		const radialPath = d3.lineRadial()
        .angle(d => angleDays(d))
        .radius(d => radialScale2(d))
        .curve(curveFunction);
          
      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 => {
        
     
      
                
        g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'green')
            .attr('stroke-width', 2)
            .attr('d', radialPath(data));

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

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