Published
Edited
Sep 5, 2019
Insert cell
md`# top 5`
Insert cell
viewof r = html`<input type=range value=40 min=0.1 max=100 step=0.1></input>`
Insert cell
{
const svg = d3.select(DOM.svg(width, size(10000)*2 + 50));
const fmt = d3.format(" >5.2s");

var legend = d3.legendSize()
.shapePadding(width/5 - size(10000))
.orient("horizontal")
.shape("circle")
.labelFormat(fmt)
.title("Votantes por ciudad")
.scale(size);
let g = svg.append("g")
.attr("transform", "translate(50,20)");
yield svg.node();
g
.call(legend);
g.selectAll(".label")
.style("font", "10pt sans-serif");
g.selectAll(".swatch")
.style("fill", color(0));
}
Insert cell
d3.format(" >5.2s")(4042);
Insert cell
Insert cell
height = 700;
Insert cell
size = d3.scalePow().exponent(0.8)
.domain([0, d3.max(odss, d=> d.count)])
.range([1,r])
Insert cell
d3.max(odss, d => d.count)
Insert cell
r
Insert cell
Insert cell
size(1930)
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