The avatar for @fpassaniti
Frédéric Passaniti
Published
Edited
Jul 21, 2020
Fork of Continuous scales
•
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colorScale = d3.scaleLinear().domain([0,1]).range([rgbLow,rgbHigh])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
valueScale = d3.scalePow().exponent(k).domain([0,1]).range([0,1])
Insert cell
visualizeTicksValues(valueScale, steps)
Insert cell
Insert cell
steps.map(d3.scalePow().exponent(k).domain([0,1]).range([0,1]).invert)
Insert cell
Insert cell
thresholdScale = d3.scaleThreshold()
.domain(steps.slice(1, nbClasses).map(d3.scalePow().exponent(k).domain([0,1]).range([0,1]).invert))
.range(steps.slice(0, nbClasses).map(colorScale))
Insert cell
Insert cell
Insert cell
valueScaleNoClass = d3.scalePow().exponent(k).domain([0,1]).range([rgbLow,rgbHigh])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function visualizeTicksValues(scale, tickValues) {
const height = 20, m = width > 599 ? 90 : 10;

scale.range([m, width - m]);

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);

svg.append("g").call(d3.axisBottom(scale).tickValues(tickValues).tickFormat(d3.format(",.2f")));

return svg.node();
}
Insert cell
Insert cell
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