Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
barChartData = {
const xScale = d3.scaleTime().range([0, width])
const yScale = d3.scaleLinear().range([height, 0])
const colorScale = d3.scaleSequential(d3.interpolateSpectral)
const timeDomain = d3.extent(data, d => d.date);
const tempMax = d3.max(data, d => d.high);
const [minAvg, maxAvg] = d3.extent(data, d => d.avg);
xScale.domain(timeDomain);
yScale.domain([0, tempMax]);
colorScale.domain([maxAvg, minAvg]);
// calculate x and y for each rectangle
return data.map(d => {
const y1 = yScale(d.high);
const y2 = yScale(d.low);
return {
x: xScale(d.date),
y: y1,
height: y2 - y1,
fill: colorScale(d.avg),
}
});
}
lineChartData = {
// create scales
const xScale = d3.scaleTime().range([0, width])
const yScale = d3.scaleLinear().range([height, 0])
// set domains on the scales
const timeDomain = d3.extent(data, d => d.date);
const tempMax = d3.max(data, d => d.high);
xScale.domain(timeDomain);
yScale.domain([0, tempMax]);
// create and use line generator for high and low temperature
const lineGenerator = d3.line().x(d => xScale(d.date))
return [
{
fill: '#eb6a5b',
path: lineGenerator.y(d => yScale(d.high))(data),
},
{
fill: '#52b6ca',
path: lineGenerator.y(d => yScale(d.low))(data),
},
]
}
radialChartData = {
const radiusScale = d3.scaleLinear().range([0, width / 2])
const colorScale = d3.scaleSequential(d3.interpolateSpectral)
const tempMax = d3.max(data, d => d.high);
const [minAvg, maxAvg] = d3.extent(data, d => d.avg);
radiusScale.domain([0, tempMax]);
colorScale.domain([maxAvg, minAvg]);
// one arc per day, innerRadius is low temp, outerRadius is high temp
const arcGenerator = d3.arc()
const perSliceAngle = (2 * Math.PI) / data.length;
return data.map((d, i) => {
return {
fill: colorScale(d.avg),
path: arcGenerator({
startAngle: i * perSliceAngle,
endAngle: (i + 1) * perSliceAngle,
innerRadius: radiusScale(d.low),
outerRadius: radiusScale(d.high),
}),
};
});
}
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.
