Published
Edited
Feb 4, 2021
viewof makeColours = {
const button1 = html`<button value="red">Generate red colours</button>`;
const button2 = html`<button value="blue">Generate blue colours</button>`;
const control = html`${button1}${button2}<i>this can take a few seconds to respond</i>`;
button1.onclick = e => {
e && e.preventDefault(); // to avoid dispatching the 'click' event outside
control.value = button1.value;
control.dispatchEvent(new CustomEvent('input'));
};
button2.onclick = e => {
e && e.preventDefault(); // to avoid dispatching the 'click' event outside
control.value = button2.value;
control.dispatchEvent(new CustomEvent('input'));
};
return control;
}
makeColours
myColorScale = d3.scaleQuantize([1, 10],
makeColours=="red" ? d3.schemeReds[9] : d3.schemeBlues[9])
d3 = require("d3@6")
import {legend} from "@d3/color-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.
