Public
Edited
May 20, 2022
1 star
Insert cell
Insert cell
${viewof brewColour} ${ColoursSVG}
Insert cell
viewof brewColour = Inputs.select(brews, {label: "Select one"})
Insert cell
ColoursSVG = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 80])
.style('background', '#fff')
.attr('width',width)
.attr('height',80);

const out = svg.append('g')
for(let i = 0; i < colours.length; i++){
out.append('rect')
.attr('x', i*80)
.attr('y', 0)
.attr('width', 80)
.attr('height', 80)
.attr('fill',colours[i])
}
return svg.node()
}
Insert cell
colorbrewer = FileAttachment("colorbrewer.json").json()
Insert cell
brews = _.keys(colorbrewer)
Insert cell
colours = chroma.brewer[brewColour]
Insert cell
chroma = require('chroma-js@2.4.2/chroma.js') // https://www.npmjs.com/package/chroma-js
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