Public
Edited
Jul 24, 2024
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("heatmap_data@1.csv").csv()
Insert cell
Insert cell
import { Table } from "@observablehq/inputs"
Insert cell
Table(data.slice(0, 5))
Insert cell
Insert cell
Insert cell
width = 800
Insert cell
height = width
Insert cell
Insert cell
margins = ({
top: 80,
bottom: 30,
left: 40,
right: 25
})
Insert cell
Insert cell
Insert cell
x = d3.scaleBand()
.domain(d3.map(data, d => d.group))
.range([margins.left, width - margins.right])
Insert cell
y = d3.scaleBand()
.domain(d3.map(data, d => d.variable))
.range([height - margins.bottom, margins.top])
Insert cell
color = d3.scaleSequential()
.interpolator(d3.interpolatePlasma)
.domain([1, 100])
Insert cell
Insert cell
Insert cell
emptyChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])

// Add the x-axis and label.
const xaxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Variable 1 →"))

// Add the y-axis and label, and remove the domain line.
const yaxis = svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Frequency (no. of counties)"))

return svg.node()
}
Insert cell
Insert cell
Insert cell
heatmapChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])

// Add the x-axis and label.
const xaxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Variable 1 →"))

// Add the y-axis and label, and remove the domain line.
const yaxis = svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Variable 2"))
// add the squares
const squares = svg.selectAll()
.data(data, d => d.group + ':' + d.variable)
.join("rect")
.attr("x", d => x(d.group))
.attr("y", d => y(d.variable))
.attr("rx", 5)
.attr("ry", 5)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => color(d.value))
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)

return svg.node()
}
Insert cell
Insert cell
Insert cell
import {Legend} from "@d3/color-legend"
Insert cell
legendChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])

const legendMap = svg.append("g")
.attr("transform", "translate(550,20)")
.append(() => Legend(color, {title: "Unemployment rate (%)", width: 220}))

// Add the x-axis and label.
const xaxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Variable 1 →"))

// Add the y-axis and label, and remove the domain line.
const yaxis = svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Variable 2"))
// add the squares
const squares = svg.selectAll()
.data(data, d => d.group + ':' + d.variable)
.join("rect")
.attr("x", d => x(d.group))
.attr("y", d => y(d.variable))
.attr("rx", 4)
.attr("ry", 4)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => color(d.value))
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)

// Add a title
const title = svg.append("g")
.append("text")
.attr("x", width / 2)
.attr("y", (margins.top / 2))
.attr("text-anchor", "middle")
.attr("front-weight", "bold")
.attr("font-family", "Helvetica Neue, Arial")
.attr("font-size", "20px")
.text("Heatmap")

return svg.node()
}
Insert cell
Insert cell
Insert cell
tooltipChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])

const legendMap = svg.append("g")
.attr("transform", "translate(550,20)")
.append(() => Legend(color, {title: "Unemployment rate (%)", width: 220}))

// Add the x-axis and label.
const xaxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Variable 1 →"))

// Add the y-axis and label, and remove the domain line.
const yaxis = svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Variable 2"))
// add the squares
const squares = svg.selectAll()
.data(data, d => d.group + ':' + d.variable)
.join("rect")
.attr("x", d => x(d.group))
.attr("y", d => y(d.variable))
.attr("rx", 4)
.attr("ry", 4)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => color(d.value))
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)

const tooltip = svg.append("g").style("display", "none")
squares
.on("mouseover", function(e, d){

const [xm, ym] = d3.pointer(e)
d3.select(this)
.style("stroke", "black")
.style("opacity", 1)

const labelText = d.value

// tooltip
tooltip
.transition()
.duration(200)
.style("display", null)
tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`);

const path = tooltip.append("path")
.attr("fill", "white")
.attr("stroke", "black");

const textLabel = `Energy: ${d.value}`

const text = tooltip
.append("text")
.text(textLabel)

size(text, path)
})
.on("mousemove", function(e, d){
const [xm, ym] = d3.pointer(e)

d3.select(this)
.transition()
.duration(200)
.attr("stroke", d => "#00cc99")
tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`);

const path = tooltip.selectAll("path")
.attr("fill", "white")
.attr("stroke", "black");

const textLabel = `Energy: ${d.value}`

const text = tooltip.selectAll("text")
.text(textLabel);

size(text, path);
})
.on("mouseleave", function(e, d){
d3.select(this)
.style("stroke", "none")
.style("opacity", 0.8)

// label.attr("display", "none")
tooltip
.style("display", "none")
})

// Wraps the text with a callout path of the correct size, as measured in the page.
function size(text, path) {
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10}, 5H-5l5, -5l5, 5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}

// Add a title
const title = svg.append("g")
.append("text")
.attr("x", width / 2)
.attr("y", (margins.top / 2))
.attr("text-anchor", "middle")
.attr("front-weight", "bold")
.attr("font-family", "Helvetica Neue, Arial")
.attr("font-size", "20px")
.text("Heatmap")

return svg.node()
}
Insert cell
Insert cell
Insert cell
titleChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])

const legendMap = svg.append("g")
.attr("transform", "translate(550,20)")
.append(() => Legend(color, {title: "Unemployment rate (%)", width: 220}))

// Add the x-axis and label.
const xaxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Variable 1 →"))

// Add the y-axis and label, and remove the domain line.
const yaxis = svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Variable 2"))
// add the squares
const squares = svg.selectAll()
.data(data, d => d.group + ':' + d.variable)
.join("rect")
.attr("x", d => x(d.group))
.attr("y", d => y(d.variable))
.attr("rx", 4)
.attr("ry", 4)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => color(d.value))
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)

const tooltip = svg.append("g").style("display", "none")
squares
.on("mouseover", function(e, d){

const [xm, ym] = d3.pointer(e)
d3.select(this)
.style("stroke", "black")
.style("opacity", 1)

const labelText = d.value

// tooltip
tooltip
.transition()
.duration(200)
.style("display", null)
tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`);

const path = tooltip.append("path")
.attr("fill", "white")
.attr("stroke", "black");

const textLabel = `Energy: ${d.value}`

const text = tooltip
.append("text")
.text(textLabel)

size(text, path)
})
.on("mousemove", function(e, d){
const [xm, ym] = d3.pointer(e)

d3.select(this)
.transition()
.duration(200)
.attr("stroke", d => "#00cc99")
tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`);

const path = tooltip.selectAll("path")
.attr("fill", "white")
.attr("stroke", "black");

const textLabel = `Energy: ${d.value}`

const text = tooltip.selectAll("text")
.text(textLabel);

size(text, path);
})
.on("mouseleave", function(e, d){
d3.select(this)
.style("stroke", "none")
.style("opacity", 0.8)

// label.attr("display", "none")
tooltip
.style("display", "none")
})

// Wraps the text with a callout path of the correct size, as measured in the page.
function size(text, path) {
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10}, 5H-5l5, -5l5, 5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}

// Add a title
const title = svg.append("g")
.append("text")
.attr("x", width / 2)
.attr("y", (margins.top / 2))
.attr("text-anchor", "middle")
.attr("front-weight", "bold")
.attr("font-family", "Helvetica Neue, Arial")
.attr("font-size", "20px")
.text("Heatmap")

return svg.node()
}
Insert cell
Insert cell
Insert cell
Insert cell
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
Insert cell
import {toc} from "@jonfroehlich/collapsible-toc"
Insert cell

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.
Learn more