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.symbol({ fill: "#38896F", r: 50 })
viz.symbol({ symbol: "fist", fill: "#38896F", r: 50 })
viz.tool.symbols()
viz.symbol({
symbol: "clover",
fill: "#38896F",
r: 50,
background: true,
background_fill: "red",
scale: 3,
rotate: 180
})
position = [300, 100]
{
// Container
let svg = viz.create({
width: 500,
domain: world,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Square
svg.symbol({
pos: position,
symbol: "heart",
r: 30,
fill: "#38896F"
});
// Render
return svg.render();
}
You can also give a geographic position in latitude and longitude. In this case, set <mark>coords</mark> to "geo". In this case, the symbol move when you zoom in on the map.
sfax = [10.76, 34.741]
{
// Container
let svg = viz.create({
domain: world,
width: 500,
zoomable: true
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Square
svg.symbol({
coords: "geo",
r: 20,
symbol: "human",
pos: sfax,
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
width: 500,
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Symbols
svg.symbol({
data: world,
width: 10,
r: 10,
stroke: "white",
strokeWidth: 1,
fill: "#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.symbol({
data: world,
symbol: "pentagon",
width: 10,
r: 5,
dodge: true,
dodgegap: -0.5,
stroke: "white",
strokeWidth: 1,
fill: "#38896F"
});
// Render
return svg.render();
}
{
// Container
let svg = viz.create({
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
const typo = viz.tool.typo(world.features.map((d) => d.properties.region));
// Spikes
svg.symbol({
data: world,
symbol: "region",
width: 10,
dodge: true,
r: 10,
stroke: "white",
strokeWidth: 1,
fill: (d) => typo.colorize(d.properties.region)
});
// Render
return svg.render();
}
{
let svg = viz.create({ projection: d3.geoNaturalEarth1(), zoomable: true });
svg.outline();
svg.graticule({ stroke: "white", step: 30 });
svg.path({ datum: world, fill: "white", fillOpacity: 0.3 });
svg.header({ text: "Nuclear Power Plants worldwide" });
svg.footer({
text: "source: https://github.com/cristianst85/GeoNuclearData"
});
svg.symbol({
data,
//dodge: true,
symbol: "nuke",
//fill: "#ebac00",
fill: "black",
background_fill: "#ebac00",
background_fillOpacity: 1,
background_stroke: "black",
background_strokeWidth: 1,
r: 12,
background: true,
tip: true
});
return svg.render();
}
viz.legend.symbol_vertical({ symbol_fill: "#38896F", rotate: 30 })
viz.legend.symbol_vertical({
subtitle: "subtitle",
note: "source",
types: ["pin", "hospital", "flower", "cloud", "human", "tent"],
symbols: ["pin", "hospital", "flower", "cloud", "human", "tent"],
symbol_background: true,
symbol_rotate: 180,
symbol_fill: "#38896F",
symbol_stroke: "none",
symbol_scale: 1,
symbol_size: 20
})
viz.legend.symbol_horizontal({
subtitle: "subtitle",
note: "source",
types: ["pin", "hospital", "flower", "cloud", "human", "tent"],
symbols: ["pin", "hospital", "flower", "cloud", "human", "tent"],
symbol_background: true,
symbol_spacing: 45,
values_textAnchor: "start",
values_dx: 23,
values_dy: -25,
symbol_rotate: 18,
symbol_fill: "#38896F",
symbol_stroke: "none",
symbol_scale: 1,
symbol_size: 20
})
{
// Container
let svg = viz.create({
zoomable: true,
domain: world
});
// Basemap
svg.path({ datum: world, fill: "#CCC" });
// Symbols
svg.symbol({
data: world,
symbol: "region",
order: ["Africa", "America", "Oceania"],
symbols: ["hospital", "flower", "cloud"],
width: 10,
background: true,
fill: "#38896F"
});
svg.legend.symbol_vertical({
pos: [20, 20],
frame: true,
symbol_background: true,
alphabetical: false,
types: ["Africa", "America", "Oceania", "Missing"],
symbols: ["hospital", "flower", "cloud", "missing"]
});
// Render
return svg.render();
}
viz.plot({ type: "symbol" })
The <mark>picto</mark> type allows you to use this mark with the appropriate legend.
viz.plot({ type: "symbol", data: world, symbol: "region" })
viz.plot({
type: "picto",
r: 6.5,
data: world,
fill: "black",
var: "region",
legend: true,
symbols: ["human", "heart", "fist", "clover", "rocket", "plane"],
dodge: true,
svg_margin: 20,
leg_type: "horizontal",
leg_pos: [400, 350],
leg_symbol_spacing: 40
})
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.
