The avatar for @marcuswac
Marcus Carvalho
Published
Edited
Dec 5, 2018
2 forks
1 star
Insert cell
Insert cell
{
const svg = d3.select(DOM.svg(width, 40));
yield svg.node();
svg.append("g").call(legend);
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
legend = d3.legendColor()
.scale(colorLogScale)
.cells([start, 322522, 7108973, end])
.orient("horizontal")
.shapeWidth(150)
.labelFormat(d3.format("$,"))


Insert cell
start = 14632

Insert cell
end = 156694340
Insert cell
logScale = d3.scaleLog()
.domain([start, end])
Insert cell
colorLogScale = d3.scaleSequential(
(d) => d3.interpolateYlOrRd(logScale(d))
)
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
d3 = require("https://d3js.org/d3.v5.min.js", "d3-svg-legend@2")
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

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