md`# D3 Transitions from FullStack DataViz`
d3 = require("d3@5")
drawBars(selectedMetricIndex)
async function drawBars(selectedMetricIndex) {
// load data
const dataset = await d3.json("https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json")
// dimensions
let dimensions = {
width: width,
height: width * 0.6,
margin: {
top: 30,
right: 10,
bottom: 50,
left: 50,
}
}
dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom
// canvas
const wrapper = d3.select(DOM.svg(dimensions.width, dimensions.height))
const bounds = wrapper.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
// initialize static elements
bounds.append("g")
.attr("class", "bins")
bounds.append("line")
.attr("class", "mean")
bounds.append("g")
.attr("class", "x-axis")
.style("transform", `translateY(${dimensions.boundedHeight}px)`)
.append("text")
.attr("class", "x-axis-label")
.attr("x", dimensions.boundedWidth / 2)
.attr("y", dimensions.margin.bottom - 10)
// draw histogram func
const drawHistogram = metric => {
const metricAccessor = d => d[metric]
const yAccessor = d => d.length
// Scales
const xScale = d3.scaleLinear()
.domain(d3.extent(dataset, metricAccessor))
.range([0, dimensions.boundedWidth])
.nice()
const binsGenerator = d3.histogram()
.domain(xScale.domain())
.value(metricAccessor)
.thresholds(12)
const bins = binsGenerator(dataset)
const yScale = d3.scaleLinear()
.domain([0, d3.max(bins, yAccessor)])
.range([dimensions.boundedHeight, 0])
.nice()
// drawData
const barPadding = 1
const exitTransition = d3.transition().duration(speed / 2)
const updateTransition = exitTransition.transition().duration(speed / 2)
let binGroups = bounds.select(".bins")
.selectAll(".bin")
.data(bins)
const oldBinGroups = binGroups.exit()
oldBinGroups.selectAll("rect")
.style("fill", "orangered")
.transition(exitTransition)
.attr("y", dimensions.boundedHeight)
.attr("height", 0)
oldBinGroups.selectAll("text")
.transition(exitTransition)
.attr("y", dimensions.boundedHeight)
oldBinGroups
.transition(exitTransition)
.remove()
const newBinGroups = binGroups.enter().append("g")
.attr("class", "bin")
newBinGroups.append("rect")
.attr("height", 0)
.attr("x", d => xScale(d.x0) + barPadding)
.attr("y", dimensions.boundedHeight)
.attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]))
.style("fill", colorStart)
newBinGroups.append("text")
.attr("x", d => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
.attr("y", dimensions.boundedHeight)
// update bin groups
binGroups = newBinGroups.merge(binGroups)
const barRects = binGroups.select("rect")
.transition(updateTransition)
.attr("x", d => xScale(d.x0) + barPadding)
.attr("y", d => yScale(yAccessor(d)))
.attr("height", d => dimensions.boundedHeight - yScale(yAccessor(d)))
.attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]))
.transition()
.style("fill", colorFinal)
const barText = binGroups.select("text")
.transition(updateTransition)
.attr("x", d => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
.attr("y", d => yScale(yAccessor(d)) -5)
.text(d => yAccessor(d) || "")
const mean = d3.mean(dataset, metricAccessor)
const meanLine = bounds.selectAll(".mean")
.transition(updateTransition)
.attr("x1", xScale(mean))
.attr("x2", xScale(mean))
.attr("y1", -20)
.attr("y2", dimensions.boundedHeight)
// Peripherals
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
const xAxis = bounds.select(".x-axis")
.transition(updateTransition)
.call(xAxisGenerator)
const xAxisLabel = xAxis.select(".x-axis-label")
.text(metric)
}
let metricIndex = selectedMetricIndex
drawHistogram(metrics[metricIndex])
return wrapper.node()
}
metrics = [
"windSpeed",
"moonPhase",
"dewPoint",
"humidity",
"uvIndex",
"windBearing",
"temperatureMin",
"temperatureMax",
]
count = {
let i = 0;
while (true) yield Promises.delay(speed, ++i);
}
mutable selectedMetricIndex = count % (metrics.length - 1) + 1
html`<style>
.bin rect {
fill: ${colorFinal};
}
.bin text {
text-anchor: middle;
fill: darkgrey;
font-size: 12px;
font-family: sans-serif;
}
.mean {
stroke: maroon;
stroke-dasharray: 2px 4px;
}
.x-axis-label {
fill: black;
font-size: 1.4em;
text-transform: capitalize;
}
</style>`
import {color} from "@jashkenas/inputs"
import {slider} from "@jashkenas/inputs"
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.
