The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Jun 8, 2024
4 stars
Plot.cellX(d3.range(20)).plot({
caption: "Specifying the start and end color using the default linear scale and RGB color space to interpolate.",
color: {
range: ["steelblue", "brown"]
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying more than two colors, again interpolating in the default RGB color space. The color scale type must be set to linear since Plot would otherwise assume that more than two range values indicates an ordinal or categorical scale. The four colors here subdivide the scheme into three equal parts: steelblue to lightgreen, lightgreen to darkorange, and darkorange to brown.",
color: {
type: "linear",
range: ["steelblue", "lightgreen", "darkorange", "brown"]
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying the start and end color using the HSL color space.",
color: {
range: ["steelblue", "brown"],
interpolate: "hsl"
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying the start and end color using the HSL color space, but using D3’s interpolateHsl implementation instead of the name “hsl”; identical to the above.",
color: {
range: ["steelblue", "brown"],
interpolate: d3.interpolateHsl
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a custom interpolate function. The interpolate function is invoked with the start and end colors, and must return a function that takes a single parameter t in [0, 1]; this latter function is then repeatedly invoked to return the scale’s colors; identical to the above.",
color: {
range: ["steelblue", "brown"],
interpolate: (start, end) => d3.interpolateHsl(start, end)
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a custom interpolate function. The interpolate function is invoked with the start and end colors, and must return a function that takes a single parameter t in [0, 1]; this latter function is then repeatedly invoked to return the scale’s colors; identical to the above.",
color: {
range: ["steelblue", "brown"],
interpolate: (start, end) => (t) => d3.interpolateHsl(start, end)(t)
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a named continuous color scheme.",
color: {
scheme: "viridis"
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a custom “fixed” interpolate function: a function that takes a single argument will receive receive a parameter t in [0, 1], and should return the start color for t = 0, the end color for t = 1, and colors in between for other values of t; identical to the above.",
color: {
interpolate: d3.interpolateViridis
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a custom “fixed” interpolate function: a function that takes a single argument will receive receive a parameter t in [0, 1], and should return the start color for t = 0, the end color for t = 1, and colors in between for other values of t; identical to the above.",
color: {
interpolate: (t) => d3.interpolateViridis(t)
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a custom “fixed” interpolate function: a function that takes a single argument will receive receive a parameter t in [0, 1], and should return the start color for t = 0, the end color for t = 1, and colors in between for other values of t.",
color: {
interpolate: (t) => `oklch(60% 60% ${t * 360})`
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a custom “fixed” interpolate function: a function that takes a single argument will receive receive a parameter t in [0, 1], and should return the start color for t = 0, the end color for t = 1, and colors in between for other values of t.",
color: {
interpolate: (t) => `color-mix(in oklch, steelblue, brown ${t * 100}%)`
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying a custom interpolate function using D3’s built-in RGB color space interpolator, but specifying a custom gamma.",
color: {
range: ["steelblue", "brown"],
interpolate: d3.interpolateRgb.gamma(2)
}
})
Plot.cellX(d3.range(20)).plot({
caption: "Specifying the range option as a subset of a built-in continuous color scheme; a range of [0, 0.5] indicates that only the first half of the turbo scheme should be used.",
color: {
range: [0, 0.5],
scheme: "turbo"
}
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.