|
<!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 |
|
|
|
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> |