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).
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
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
forked from sajudson's block: Time Series Sketch Prototype
xxxxxxxxxx
<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
const g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const xAxisG = g.append('g')
.attr('transform', `translate(0, ${innerHeight})`);
const yAxisG = g.append('g');
const yAxisRightG = g.append('g')
.attr('transform', "translate(" + yAxis2Position +", 0)");
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