Customer Success at Observable.
Public
Edited
May 15, 2024
15 stars
myVega= vl.markRect({tooltip: {"content": "data"}, clip: true})
.width(width-150)
.height((width-150)*12/31)
.data(averageWeather)
.encode(
vl.y().fieldO("monthName").title("Month").sort({"op":"max", "field": "month"}),
vl.x().fieldO("day").title("Day of month"),
vl.color().fieldQ("value").scale({ scheme: "redyellowblue", reverse: true }),
)
.render()
x = d3.scaleBand()
.domain([...Array(31).keys()].map(d=>d+1))
.range([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(monthNames)
.range([margin.top, height-margin.bottom])
colorScale = d3.scaleSequential(d3.interpolateRdYlBu)
.domain(d3.extent(averageWeather, d=>d.value).reverse())
d3Chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Draw the axes
svg.append("g")
.attr("transform", `translate(0, ${height-margin.bottom})`)
.call(d3.axisBottom(x))
.append("text")
.attr("style", `fill:black; font-weight: 700; font-size: 12px`)
.attr("transform",`translate(${(width-margin.right-margin.left)/2 + margin.left}, 35)`)
.text("Day of month");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("style", `fill:black; font-weight: 700; font-size: 12px`)
.attr("text-anchor", "middle")
.attr("transform",`translate(-35,${(height-margin.bottom-margin.top)/2 + margin.top}),rotate(-90)`)
.text("Month");
// Now draw the boxes in each day - this time using selections
svg.append("g")
.classed("cells", true)
.selectAll("g.cells")
.data(averageWeather)
.join("g")
.attr("transform",d => `translate(${x(d.day)}, ${y(d.monthName)})`)
.append("rect")
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.attr("fill", d => colorScale(d.value))
.on("mouseover", (event, d) => mouseOver(event, d))
.on("mouseout", (event, d) => mouseOut(event, d));
// add the legend - using an import... if I had to draw the legend it would be quite a bit of code
svg.append("g")
.attr("transform", `translate(${margin.left},${height-50})`)
.append(() => legend({ color: colorScale, title: "Avg of tmax", width: 300 }));
return svg.node()
}
mouseOver = (event, d) => {
const g = d3.select(event.target.parentNode)
g.append("circle")
.attr("transform",`translate(${x.bandwidth()/2}, ${y.bandwidth()/2})`)
.attr("r", d3.min([x.bandwidth()/2, y.bandwidth()/2]))
.attr("fill", "#fff")
.attr("opacity", 0.5)
.style("pointer-events", "none")
g.append("text")
.text(d.value.toFixed(1))
.attr("transform", `translate(${x.bandwidth()/2}, ${y.bandwidth()/2})`)
.attr("dy", "0.1em")
.attr("style", `fill:black; font-size: 10px; font-family: sans-serif;`)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.style("pointer-events", "none")
}
mouseOut = (event, d) => {
const g = d3.select(event.target.parentNode)
g.selectAll("text").remove()
g.selectAll("circle").remove()
}
{
// reducers for x and y axes
const x = (d) => new Date(d.date).getUTCDate();
const y = (d) => new Date(d.date).getUTCMonth();
return Plot.plot({
height,
width,
padding: 0,
y: {
tickFormat: Plot.formatMonth("en", "short")
},
x: { label: "Day of month" },
color: {
type: "linear",
scheme: "BuYlRd",
legend: true
},
marks: [
Plot.cell(
weather,
Plot.group(
{ fill: "mean" },
{ x, y, fill: (d) => d.tmax }
)
),
Plot.tip(
weather,
Plot.pointer(
Plot.group(
{ title: (d) => d3.mean(d, (a) => a.tmax).toFixed(1) },
{ x, y }
)
)
)
]
});
}
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.
