Published
Edited
Feb 5, 2021
1 star
Insert cell
Insert cell
{
const svg = d3.select(DOM.svg(width, width / 3));
svg.style('background', colScale(value));
svg
.append('text')
.attr('x', '75%')
.attr('y', '50%')
.style('font-size', '2rem')
.text(colScale(value));

return svg.node();
}
Insert cell
viewof value = slider({ min: -1, max: 1, step: 0.1 })
Insert cell
colScale = d3
.scaleQuantile()
.domain([-1, 1])
.range([
'#bc3618',
'#cc4f16',
'#db6513',
'#eb7b0c',
'#fa9100',
'#bcdc50',
'#92b54d',
'#6a9049',
'#416d43',
'#0f4b3c'
])
Insert cell
d3 = require('d3@5')
Insert cell
import { slider } from "@jashkenas/inputs"
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