News and graphics at @ClimateLab, a project of @PostGraphics.
d3.select(DOM.element("div")).call(gradient).node();
gradient = d3.keyGradient()
.values(gradientValues) // An array of values underlying the legend (see below)
.colors(gradientColors) // An array of colors to map those values to (see below)
.width(300) // The width of the legend's wrapper
.height(28) // The height of the legend's wrapper
.barHeight(8) // The height of the rectangle and half the tick lines
.padding(13) // The left and right padding – useful if your tick text overflows
.id("myLegend") // The ID of the linearGradient element, which defaults to "gradient-legend"
.tickValues([0, 5000, 20000, 45000, 80000, 125000]) // The tick values to display
.tickFormat(d => d >= 1e3 ? `${d / 1e3}k` : d) // A function to format the tick values
.scale(d3.scaleSqrt()); // A type of scale from d3-scale to use to display the legend
d3.select(DOM.element("div")).call(threshold).node();
threshold = d3.keyThreshold()
.values(thresholdValues) // An array of values underlying the legend (see below)
.colors(thresholdColors) // An array of colors to map those values to (see below)
.width(300) // The width of the legend's wrapper
.height(28) // The height of the legend's wrapper
.barHeight(12) // The height of the rectangle and half the tick lines
.padding(13) // The left and right padding – useful if your tick text overflows
.tickValues(thresholdValues) // The tick values to display
.tickFormat(d => d * 100 + (d === 1 ? "%" : ""))
.tickHeight(5)
.tickTop(12)
.tickPadding(2)
.scale(d3.scaleSqrt()); // A type of scale from d3-scale to use to display the legend
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.
