Cartography associate professor (MCF) at Toulouse-Jean Jaurès university.
map = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto")
.style("background-color", "white");
svg.append("g").call(template);
svg.append("g").call(drawIsochrones);
svg.append("g").call(legend).attr("transform", "translate(65, 520)");
svg
.selectAll(".isochrones")
.on("touchmove mousemove", function (e, d) {
d3.select(this).attr("fill", "#547096");
d3.select(`#leg_${d.properties.isochrone20m*20}`)
.attr("stroke", "#547096")
.raise();
})
.on("touchend mouseleave", function (e, d) {
d3.select(this).attr("fill", color(d.properties.isochrone20m));
d3.select(`#leg_${d.properties.isochrone20m*20}`).attr("stroke", "none");
});
svg
.selectAll(".leg")
.on("touchmove mousemove", function (e, d) {
d3.select(this).attr("stroke", "#547096").raise();
d3.select(`#isochrone_${d/20}`).attr("fill", "#547096");
})
.on("touchend mouseleave", function (e, d) {
d3.select(this).attr("stroke", "none");
d3.select(`#isochrone_${d/20}`).attr("fill", color(d/20));
});
return svg.node();
}
legend = (selection) => {
const g = selection.append("g");
const title = "Travel time";
const subtitle = "(in minutes)";
const w = 30;
const h = 10;
const delta = 30;
const txtsize = 8;
const decalY = 510;
g.append("g")
.append("text")
.text(title)
.attr("x", 0)
.attr("y", 0)
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
.attr("fill", "#4a524d")
.style("font-size", "20px");
g.append("g")
.append("text")
.text(subtitle)
.attr("x", 0)
.attr("y", 15)
.attr("font-family", "sans-serif")
.attr("fill", "#4a524d")
.style("font-size", "13px");
g.append("g")
.selectAll("rect")
.data(distances.map((d) => d[1]))
.join("rect")
.attr("class", "leg")
.attr("id", (d) => "leg_" + d)
.attr("x", 0)
.attr("y", (d, i) => decalY - delta - (i+1) * h)
.attr("width", w)
.attr("height", h)
.style("fill", (d) => color(d/20))
.attr("stroke", "none")
.attr("stroke-width", 2);
g.append("g")
.selectAll("text")
.data([0].concat(distances.map((d) => d[1])))
.join("text")
.attr("x", w + 5)
.attr("y", (d, i) => decalY - delta - i * h)
.attr("font-family", "sans-serif")
.attr("fill", "#4a524d")
.attr("font-size", `${txtsize}px`)
.attr("alignment-baseline", "central")
.text((d) => d);
}
sources = "https://observablehq.com/@neocartocnrs/paris-by-road-osrm & https://neocarto.github.io/rspatial/osrm/osrm.html"
d3 = require("d3@6")
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.
