Hi. I'm Nicolas Lambert, research engineer in geographic information science at CNRS (France). My job is to draw maps and teach cartography at the university. I am a geographer 🌎, and not really a developer 🖥️
viz.spike({
height: 100,
width: 40,
fill: "#38896F",
stroke: "#38896F"
})
viz.plot({
type: "spike",
height: 100,
width: 40,
fill: "#38896F",
stroke: "#38896F"
})
The <mark>straight</mark> attribute allow to customize the curve (0 = curved ; 1 = straight).
viewof straight = Inputs.range([0, 1], { label: "straight", step: 0.05 })
viz.spike({
height: 100,
width: 40,
fill: "#38896F",
stroke: "#38896F",
straight
})
position = [300, 100]
{
// Container
let svg = viz.create({
width: 500,
domain: world,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Spike
svg.spike({
pos: position,
fill: "#38896F",
stroke: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
domain: world,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Spike
svg.spike({
coords: "geo",
pos: mumbai,
fill: "#38896F",
stroke: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Spikes
svg.spike({
data: world,
width: 10,
stroke: "#38896F",
straight: 0.5,
height: 10,
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 1000,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Spikes
svg.spike({
data: world,
width: 10,
k,
fillOpacity: 1,
stroke: "#38896F",
straight: 0.5,
height: "pop",
fill: "#38896F",
tip: true
});
// Render
return svg.render();
}
4 - Legends
viz.legend.spikes({ spike_stroke: "#38896F", title: "Number of inhabitants" })
viz.legend.spikes({
data: world.features.map((d) => d.properties.pop),
values_round: 0,
spike_stroke: "#38896F"
})
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.
