barChartData = {
// 1. Map date to the x-position
// get min and max
const extent = d3.extent(data, d => d.date)
const xScale = d3.scaleTime().domain(extent).range([0, width])
console.log(xScale(new Date('1/1/2017')))
// 2. map high temo to y-position
// get min/max of high temp
const [min, max] = d3.extent(data, d => d.high)
const yScale = d3.scaleLinear().domain([Math.min(min, 0), max]).range([height, 0])
console.log(yScale(70))
// 3. Map avg temp to a color
// get min/max of avg
const colorExtent = d3.extent(data, d => d.avg).reverse()
const colorScale = d3.scaleSequential()
.domain(colorExtent)
.interpolator(d3.interpolateRdYlBu)
return data.map(d => {
return {
x : xScale(d.date),
y: yScale(d.high),
height : yScale(d.low) - yScale(d.high),
fill: colorScale(d.avg)
}
})
}
lineChartData = {
// 1. map time to x
const xExtent = d3.extent(data, d => d.date)
const xScale = d3.scaleTime().domain(xExtent).range([0, width])
const lowMin = d3.min(data, d => d.low)
const highMax = d3.max(data, d => d.high)
const yScale = d3.scaleLinear().domain([lowMin, highMax]).range([height, 0])
const lineGen = d3.line().x(d => xScale(d.date))
// ...
return [
{path: lineGen.y(d => yScale(d.high))(data), fill : "red"},
{path: lineGen.y(d => yScale(d.low))(data), fill : "blue"}
]
}
radialChartData = {
// ...
return []
}
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.
