Published
Edited
Apr 29, 2021
7 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
getRectWidth = color => {
const [min, max] = colorScale.invertExtent(color);
return Math.round(axisScale((max || axisDomain[1]) - (min || axisDomain[0])));
}
Insert cell
scheme = d3.schemeRdYlBu
Insert cell
breaksDefault = [0.25, 0.5, 0.75]
Insert cell
breaks = breaksInput.length
? breaksInput.split(",").map(str => Number(str))
: breaksDefault
Insert cell
colors = scheme[breaks.length + 1] || scheme[3]
Insert cell
colorScale = d3.scaleThreshold(breaks, colors)
Insert cell
margin = ({ top: 0, right: 12, bottom: 24, left: 12 })
Insert cell
width = 324
Insert cell
height = 36
Insert cell
axisDomain = [0, 1]
Insert cell
axisValues = colorScale.domain()
Insert cell
axisRange = [0, width - margin.right - margin.left] // [0, width] //
Insert cell
axisScale = d3.scaleLinear(axisDomain, axisRange)
Insert cell
axis = g =>
g
.attr(
"transform",
`translate(${margin.left}, ${height - margin.bottom - margin.top})`
)
.call(
d3
.axisBottom(axisScale)
.tickSize(-height - margin.bottom - margin.top)
.tickFormat(d => `${d3.format(".2f")(d) * 100}%`)
.tickValues(axisValues)
)
.call(g => g.select(".domain").remove())
Insert cell
selectedScaleType = "discrete"
Insert cell
import { chart, viewof showLabels, viewof replay } with {
colorScale,
selectedScaleType
} from "@clhenrick/color-scales-continuous-vs-discrete"
Insert cell
import { Text } from "@observablehq/inputs"
Insert cell
d3 = require("d3")
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