Public
Edited
Feb 16, 2024
2 stars
Insert cell
Insert cell
Insert cell
viz = require("geoviz@0.5.0")
Insert cell
Insert cell
Insert cell
map = {
// 1 - Creating a container
let svg = viz.create({
projection: d3.geoNaturalEarth1()
});
// 2 - Data import and handling
let targetvalue = dotvalue;
let world = await FileAttachment("world.json").json();
let centroids = viz.tool.centroid(world);
let dots = viz.tool.replicate(centroids, {
field: "pop",
targetvalue: targetvalue * 1000000
});
let dodgedots = viz.tool.dodge(dots, {
projection: svg.projection,
r: radius,
iteration: 300
});

// 3 - Typology
let typo = viz.tool.typo(
dodgedots.features.map((d) => d.properties.region),
{ colors: "Bold" }
);

// 4 - Map layers
svg.outline();
svg.path({ datum: world, fill: "white", fillOpacity: 0.3 });
svg.circle({
coords: "svg",
data: dodgedots,
r: radius,
fill: (d) => typo.colorize(d.properties.region)
});

// 5 - Legend
viz.legend.typo_horizontal(svg, {
title: `1 dot = ${targetvalue} million inh.`,
pos: [480, 400],
alphabetical: true,
rect_width: 30,
rect_spacing: 10,
colors: typo.colors,
types: typo.types,
missing: false
});

// 6 - Render
return svg.render();
}
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