Published unlisted
Edited
Jun 16, 2021
chart = heatmap(data, "title")
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
// Set the svg size; this can be made responsive later (if even wanted)
const width = 600;
const height = 600;
// Row height (legend has a half height for now)
let rowHeight = height/6
let rowGap = 6;
let margin = {"top": rowHeight/3, "bottom": rowHeight/3}
// Initiate svg
const svg = d3.select(DOM.svg(width, height));
// Color Ramp
const colorRamp = d3.scaleLinear()
.domain([0, 1, 2, 4])
.range(["#D22027", "#FDB52A", "#589643", "#027546"])
data.forEach( function (comp, i) {
svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", margin.top + i * rowHeight)
.attr("y2", margin.top + i * rowHeight)
.attr("stroke-width", 0.75)
.attr("stroke", "#999999")
svg.append("rect")
.attr("y", margin.top + rowHeight * i + rowGap/2)
.attr("height", rowHeight - rowGap)
.attr("width", rowHeight/5)
.attr("fill", colorRamp(Math.floor(comp.maturity)))
let littleRow = (rowHeight - rowGap)/comp.dimensions.length
})
svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", margin.top + 5 * rowHeight)
.attr("y2", margin.top + 5 * rowHeight)
.attr("stroke-width", 0.75)
.attr("stroke", "#999999")
return svg.node()
}
css = `
text {
font-family: "Arial Narrow", "Open Sans", sans-serif;
font-size: 14px;
}
div.components, div.dimensions {
display: table;
vertical-align: middle
}
div.components text, div.dimensions text {
display: table-cell;
vertical-align: middle;
}
div.components text {
font-weight: bold;
padding-left: 14px;
}
div.dimensions text {
line-height: 14px
}
text.chartTitle {
font-size: 16px;
}
foreignObject body {margin: 0}
// svg:hover {
// cursor: default;
// }
`
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.
