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 🖥️
md`# Hello map `
height = 480
projection = d3.geoPatterson()
path = d3.geoPath(projection)
borders = topojson.mesh(
world,
world.objects.world_countries_data,
(a, b) => a !== b
)
md `If you want to extract borders only for one country, you can do like that`
id = "USA"
borders_country = topojson.mesh(
world,
world.objects.world_countries_data,
(a,b) => (a.properties.ISO3 == id & b.properties.ISO3 != id) || (b.properties.ISO3 == id & a.properties.ISO3 != id)
)
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
svg
.append("path")
.datum(borders)
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-width", 1)
.attr("d", path);
svg
.append("path")
.datum(borders_country)
.attr("fill", "none")
.attr("stroke", "#ed87c8")
.attr("stroke-width", 3)
.attr("d", path);
return svg.node();
}
merged = topojson.merge(world, world.objects.world_countries_data.geometries)
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
svg
.append("path")
.datum(merged)
.attr("fill", "#fae6f2")
.attr("stroke", "#ed87c8")
.attr("stroke-width", 1)
.attr("d", path);
return svg.node();
}
neighbors = topojson.neighbors(world.objects.world_countries_data.geometries)
ids = countries.features.map(d => d.properties.ISO3)
getcontig = id => {
var result = [];
var contig = neighbors[ids.indexOf(id)];
result = contig.map(i => ids[i]);
return result;
}
mycountry = "CHN"
me = countries.features.filter(d => d.properties.ISO3 == mycountry)
neighborhood = countries.features.filter(d =>
getcontig(mycountry).includes(d.properties.ISO3)
)
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
// Sphere
svg
.append("path")
.datum(countries)
.attr("fill", "#eeeeee")
.attr("stroke", "white")
.attr("stroke-width", 0.4)
.attr("d", path);
svg
.append("path")
.data(me)
.attr("fill", "#ed87c8")
.attr("stroke", "white")
.attr("stroke-width", 0.4)
.attr("d", path);
svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(neighborhood)
.join("path")
.attr("fill", "#f0d175")
.attr("d", path);
return svg.node();
}
world_simplified = {
let world_simplified = topojson.presimplify(world);
let min_weight = topojson.quantile(world_simplified, minArea);
world_simplified = topojson.simplify(world_simplified, min_weight);
return world_simplified;
}
countries2 = topojson.feature(
world_simplified,
world_simplified.objects.world_countries_data
).features
world_simplified.objects.world_countries_data.geometries
viewof minArea = Range([0.01, 0.1], { step: 0.001 })
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(countries2)
.join("path")
.attr("fill", "#ed87c8")
.attr("stroke", "white")
.attr("stroke-width", 0.4)
.attr("d", path);
return svg.node();
}
md`# Same thing with geoCurvePath`
path2 = smooth(d3.curveBasisClosed, projection)
land_simplified = {
let w = topojson.presimplify(world);
let min_weight = topojson.quantile(w, minArea2);
w = topojson.simplify(w, min_weight);
//Merge the simplified countries into a new land shape
return topojson.merge(w, w.objects.world_countries_data.geometries);
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
land_simplified2 = {
let w = topojson.presimplify(world);
let min_weight = topojson.quantile(w, minArea2);
w = topojson.simplify(w, min_weight);
//Merge the simplified countries
return topojson.merge(w, w.objects.world_countries_data.geometries);
}
viewof minArea2 = Range([0.005, 0.1], { step: 0.001 })
map = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
svg
.append("path")
.datum(land_simplified)
.attr("d", path2)
.style("fill", "#e3a3cc");
return svg.node();
}
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.
