Public
Edited
Mar 19, 2024
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viz.plot({
type: "prop",
data: world,
var: "pop"
})
Insert cell
Insert cell
Insert cell
viz.plot({
type: "prop",
data: world,
var: "pop",
symbol,
fill: "red"
})
Insert cell
Insert cell
{
let svg = viz.create({ projection: d3.geoNaturalEarth1(), zoomable: true });
svg.plot({ type: "outline" });
svg.plot({
type: "graticule",
stroke: "white",
step: 40,
strokeWidth: 2,
strokeOpacity: 0.3
});
svg.plot({ type: "path", datum: world, fill: "white", fillOpacity: 0.3 });
svg.plot({
type: "prop",
symbol: "square",
data: world,
var: "pop",
fill: "#4c86a6",
leg_type: "nested",
leg_values_factor: 1 / 1000000,
leg_pos: [100, 300],
leg_title: "Number of inhabitants",
leg_subtitle: "(in million)",
tip: true
});
return svg.render();
}
Insert cell
Insert cell
Insert cell
viz.plot({
type: "propchoro",
data: world,
symbol: "circle",
k: 40,
var1: "pop",
var2: "gdppc",
dodge: true,
stroke: "black",
strokeWidth: 0.2,
leg1_pos: [150, 255],
method: "q6",
colors: "RdYlGn",
reverse: true,
leg1_title: "Population",
leg1_subtitle: "in milion inh.",
leg1_values_factor: 1 / 1000000,
leg2_title: "Gdp per capita",
leg2_values_round: 0,
leg2_type: "horizontal",
leg2_missing_text: "Not available"
})
Insert cell
Insert cell
Insert cell
viz.plot({
type: "proptypo",
data: world,
symbol: "spike",
k: 150,
width: 40,
var1: "pop",
var2: "region"
})
Insert cell
Insert cell
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