Maps — and other representations of the world.
Public
Edited
Feb 19, 2024
Paused
1 fork
13 stars
mutable debug = null
notes = ({
0: "Aire non isolée, non polluée",
1: "Aire isolée ou polluée",
2: "Aire isolée et polluée",
3: "Proximité d’un site SEVESO"
})
aires2 = {
const a = aires
.filter(d => !isNaN(d.lon)) // 93 Seine-Saint-Denis Pantin accueil Projet au 172 avenue Jean Jaures
.map(d => {
const q = projection([+d.lon, +d.lat]),
p = { x: q[0], y: q[1], x0: q[0], y0: q[1] };
return { ...d, ...p };
});
d3.forceSimulation(a)
.force("x", d3.forceX(d => d.x0))
.force("y", d3.forceY(d => d.y0))
.force("collide", d3.forceCollide().radius(2.2))
.tick(20)
.stop();
return d3.sort(a, d => d.depno, d => d.Ville);
}
selection = {
const selection = search.filter(d => {
if (caracteristique && d["Caractéristique"] != caracteristique)
return false;
if (depno && d["depno"] != depno) return false;
if (note && d["Note"] != note) return false;
return true;
});
return selection;
}
airesGeojson = ({
type: "FeatureCollection",
features: aires
.filter((d) => +d.lon && +d.lat) // filter out non-valid geometries
.map((d) => ({
type: "Feature",
properties: { ...d },
geometry: { type: "Point", coordinates: [+d.lon, +d.lat] }
}))
})
function labelPos(d) {
const p = projection(d3.geoCentroid(d));
if (d.properties.code === "92") {
p[0] -= 2;
p[1] += 1.5;
}
return p;
}
createmap = () => {
const div = d3.create("div").style("width", width);
const details = div
.append("div")
.style("position", "absolute")
.style("top", 0)
.style("right", 0)
.style("width", "350px")
.style("height", "400px");
const svg = div.append("svg");
svg
.style("width", width)
.attr("viewBox", [0, 0, width, Math.min(height, 750)])
.style("font", "12px sans-serif");
const path = d3.geoPath(projection).pointRadius(2);
const hStyle = svg.append("defs").append("style");
const g = svg.append("g").style("vector-effect", "non-scaling-stroke");
svg.style("background", "white");
const bg = g
.append("g")
.on(
"click",
() => (
details.html(``),
dots
.selectAll(".dot")
.classed("selected", false)
.classed("highlight", false)
)
);
bg.append("path")
.datum(topojson.merge(deptsTopo, deptsTopo.objects.departements.geometries))
.attr("d", path)
.style("fill", "rgba(0,0,0,0.03)")
.style("stroke", "black")
.style("stroke-width", ".75");
bg.append("path")
.datum(topojson.mesh(deptsTopo))
.attr("d", path)
.style("fill", "none")
.style("stroke-width", 0.25)
.style("stroke", "black");
const phantoms = g
.append("path")
.attr("id", "phantoms")
.style("fill", "#ddd")
.datum({
type: "MultiPoint",
coordinates: aires2.map((d) => [d.lon, d.lat])
})
.attr("d", path);
const dots = g.append("g").attr("id", "dots").style("cursor", "pointer");
const deptLabelsBg = g
.append("g")
.style("text-anchor", "middle")
.selectAll("text")
.data(topojson.feature(deptsTopo, deptsTopo.objects.departements).features)
.join("text")
.text((d) => `${d.properties.code}`)
.attr("transform", (d) => `translate(${labelPos(d)})`)
.attr("pointer-events", "none");
const deptLabels = deptLabelsBg.clone(true);
deptLabelsBg.style("stroke", "white").style("stroke-width", 2.5);
let r = 1;
const zoom = d3
.zoom()
.scaleExtent([0.8, 10])
.on("zoom", ({ transform }) => {
g.attr("transform", transform);
r = 1 / Math.sqrt(transform.k);
deptLabels.style("font", `${12 * Math.pow(r, 1.5)}px sans-serif`);
deptLabelsBg
.style("font", `${12 * Math.pow(r, 1.5)}px sans-serif`)
.style("stroke-width", 2.5 * r * r);
if (transform.k > 8) {
deptLabelsBg.text((d) => `${d.properties.code}. ${d.properties.nom}`);
deptLabels.text((d) => `${d.properties.code}. ${d.properties.nom}`);
} else {
deptLabelsBg.text((d) => `${d.properties.code}`);
deptLabels.text((d) => `${d.properties.code}`);
}
resize();
});
svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
return Object.assign(div.node(), { update });
function update(data) {
const pts = dots
.selectAll(".dot")
.data(data)
.join("g")
.html("") // remove old title
.attr("transform", (d) => `translate(${d.x0},${d.y0}`)
.style("stroke-width", 0.75)
.style("stroke", "#333")
.attr("class", "dot")
.style("fill", (d) => color(d.Note));
pts.filter((d) => d.Note != 3).append("circle");
pts.filter((d) => d.Note == 3).append("rect"); // SEVESO en carrés
pts.append("title").text((d) => d.Ville);
pts.on("mouseover", function () {
const that = this;
d3.select(that).raise();
pts.classed("highlight", function () {
return this === that;
});
});
pts.on("click", (event, d) => {
if (d === details.datum()) d = undefined;
details.datum(d);
details.html(tipcontent);
pts.classed("selected", (x) => x === d);
event.preventDefault();
});
pts.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
resize();
}
function resize() {
phantoms.attr("d", path.pointRadius(2 * r));
const a = Math.min(1, Math.pow(r, 1.8));
dots
.selectAll(".dot circle")
.attr("r", 3 * r)
.attr("cx", (d) => a * d.x + (1 - a) * d.x0)
.attr("cy", (d) => a * d.y + (1 - a) * d.y0)
.style("vector-effect", "non-scaling-stroke");
dots
.selectAll(".dot rect")
.attr("width", 5.5 * r)
.attr("height", 5.5 * r)
.attr("x", (d) => a * d.x + (1 - a) * d.x0 - (5.5 * r) / 2)
.attr("y", (d) => a * d.y + (1 - a) * d.y0 - (5.5 * r) / 2)
.style("vector-effect", "non-scaling-stroke");
hStyle.text(`
circle.highlight {stroke-width: 2!important}
circle.selected {stroke-width: 3!important}
`);
}
}
function tipcontent(d) {
if (!d) return ``;
return `
<div style="background:#333; border-radius: 5px; padding: 10px; color: #fefefe;">
<h2 style="color: white">${d.Ville} <span style="font-size: smaller">(${
d.depno
}. ${d.dept})</span></h2>
<tt style="font-size: x-small">${d["coords"]}</tt>
<div style="max-height: 30em; overflow: auto">
<div>
<br>Distance mairie : ${d["Distance Mairie"]} (${
d["Temps de trajet à pied pour la mairie"]
})
${
d["Nuisances proches"]
? `<br>Nuisances proches : ${d["Nuisances proches"]}`
: ""
}
<iframe width="320" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=${+d.lon -
.003}%2C${+d.lat + .003}%2C${+d.lon + .003}%2C${+d.lat -
.003}&layer=mapnik" style="border: 1px solid black"></iframe>
<br>${d["Commentaires"]}
<br>Type : ${d["Caractéristique"]}
</div>
</div>
</div>`;
}
import { Search as __disabled, Select, Table } from "@observablehq/inputs"
import { Search } from "@fil/search-normalize"
projection = d3
.geoConicConformal()
.rotate([-3, 0])
.center([0, 46.5])
.parallels([44, 49]) // Lambert 93
.fitExtent(
[
[10, 10],
[Math.min(height, 750) - 10, Math.min(height, 750) - 20]
],
depts
)
// Source: gregoiredavid/france-geojson + mapshaper
deptsTopo = FileAttachment("departements-simplifies.json").json()
topojson.mergeArcs(deptsTopo, deptsTopo.objects.departements.geometries)
depts = topojson.feature(deptsTopo, deptsTopo.objects.departements)
// https://coolors.co/140279-b63e6a-fdae61-abdda4
color = d3.scaleOrdinal(
[0, 1, 2, 3],
[
"#abdda4" /* vert */,
"#fdae61" /* orange */,
"#B63E6A" /* rouge */,
"#140279" /* violet */
]
)
import { height } from "@fil/height"
d3 = require("d3@6")
formatFr = d3.formatLocale({ decimal: "," })
topojson = require("topojson-client@3")
// https://observablehq.com/@jeremiak/download-data-button
button = (data, filename = "data", { download = "Download" } = {}) => {
if (!data) throw new Error("Array of data required as first argument");
let downloadData;
if (filename.includes(".csv")) {
downloadData = new Blob([d3.csvFormat(data)], { type: "text/csv" });
} else if (filename.includes(".zip")) {
downloadData = new Blob([data], { type: "application/zip" });
} else if (filename.includes(".svg")) {
downloadData = new Blob([data], { type: "image/svg" });
} else {
downloadData = new Blob([JSON.stringify(data, null, 2)], {
type: "application/json"
});
}
const size = (downloadData.size / 1024).toFixed(0);
const button = DOM.download(
downloadData,
filename,
`${download} ${filename}` // (~${size} KB)`
);
return button;
}
button(d3.select(map).select("svg").node().outerHTML, "map.svg")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.