primary = '#1a1a1a'
Public
Edited
Mar 16, 2021
scale = 2
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', secondary)
const container = svg.append('g')
.attr('transform',`translate(${padding.x},${padding.y})`)
const monthsWrap = container
.selectAll('g.wrap')
.data(vizData)
.join('g')
.attr('class', 'wrap')
.attr('transform', d => `translate(${yearScale(d.year)},${monthScale(d.month)})`)
const months = monthsWrap
.selectAll('g.month')
.data(d => [d])
.join('g')
.attr('class', 'month')
.style('transform', d => `rotate(${7*(d.tempAvg - d.avg40)}deg)`)
months
.selectAll('rect.above')
.data(d => [d])
.join('rect')
.attr('class', 'above')
.attr('width', 6)
.attr('height', d => aboveDaysScale(d.above))
// .attr('stroke', primary)
.attr('fill', warmer)
months
.selectAll('rect.below')
.data(d => [d])
.join('rect')
.attr('class', 'below')
.attr('width', 3)
.attr('y', d => aboveDaysScale(d.above))
.attr('height', d => belowDaysScale(d.below))
// .attr('stroke', primary)
.attr('fill', colder)
months
.selectAll('rect.snow')
.data(d => [d.snow.filter(d => d)])
.join('rect')
.attr('class', 'snow')
// .attr('width', snowScale)
// .attr('height', 1)
.attr('x', 6)
.attr('width', d => d3.sum(d) ? snowScale(d3.sum(d)) : 0 )
.attr('y', d => snowDayScale(d.length))
.attr('height', 2)
// .attr('x', 5)
// .attr('stroke', primary)
.attr('fill', snowDepth)
const yearAxis = svg.append('g')
.attr('transform', `translate(${padding.x},0)`)
yearAxis.selectAll('text')
.data(d3.range(startYear, endYear+1))
.join('text')
.style('font-family', 'sans-serif')
.style('font-size', 10)
.attr('dy', '0.7em')
.attr('x', yearScale)
.text(d => d)
const monthAxis = svg.append('g')
.attr('transform', `translate(0,${padding.y})`)
monthAxis.selectAll('text')
.data(['Jan', 'Feb', 'Mar', 'Apr',
'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec'])
.join('text')
.style('font-family', 'sans-serif')
.style('font-size', 10)
.attr('dy', '0.2em')
.attr('y', (d,i) => monthScale(i+1) + cellWidth/2)
.text(d => d)
const avgTempContainer = svg.append('g')
.attr('transform', `translate(${padding.x},${padding.y + cellWidth * 12})`)
return svg.node()
}
vizData = data.filter(d => d.year >= startYear)
snowScale(1)
belowDaysScale = d3.scaleLinear()
.domain([0, 31])
.range([0, cellWidth - cellPadding])
aboveDaysScale = d3.scaleLinear()
.domain([0, 31])
.range([0, cellWidth - cellPadding])
snowScale = {
const allSnow = data.map(d => d3.sum(d.snow))
return d3.scaleLinear()
.domain([0, 2])
.range([0, cellWidth - cellPadding])
}
snowDayScale = d3.scaleBand()
.domain(d3.range(0, 32))
.range([cellWidth - cellPadding, 0])
monthScale = d3.scaleOrdinal()
.domain(d3.range(1,13))
.range(d3.range(0, height - 2*padding.y, cellWidth))
yearScale = d3.scaleBand()
.domain(d3.range(startYear, endYear+1))
.range([ 0, width - 2*padding.x - cellWidth ])
cellWidth = (width - 2*padding.y)/(endYear - startYear)
cellPadding = 5 * scale
padding = ({
x: 30,
y: 30
})
startYear = 1987
endYear = 2020
secondary = '#fff'
colder = '#1f77b4'
warmer = '#d62728'
snowDepth = '#888'
d3.schemeCategory10
width = 1024 * scale
height = 400 * scale
d3 = require('d3@6')
luxon = require("luxon@1/build/amd/luxon.js")
DateTime = luxon.DateTime
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
