2a:null 2b:["$","title",null,{"children":"Prix de l’essence dans l’UE | vincent | Observable"}] 30:T7e2,const priceByCountry = new Map(selectedData.map(d => [d.country, d.price_eur_per_litre])) const nameByISO = new Map(euMap.features.map(d => [d.properties.ISO2, d.properties.NAME])) const colorScale = { type: "linear", domain: priceDomain, range: ["#2b2b2b", "#ffffff"], unknown: "#111", label: "€/litre" } const ranking = Plot.plot({ width: 380, height: 800, marginLeft: 110, style: {background: "black", color: "white"}, title: "Classement des prix", subtitle: "Du plus cher au moins cher", x: {domain: [0, priceDomain[1]], label: "€/litre", grid: true}, y: {label: null}, color: colorScale, marks: [ Plot.barX(selectedData, { y: d => nameByISO.get(d.country) ?? d.country, x: "price_eur_per_litre", fill: "price_eur_per_litre", sort: {y: "-x"}, stroke: "white", strokeWidth: 0.5 }), Plot.text(selectedData, { y: d => nameByISO.get(d.country) ?? d.country, x: "price_eur_per_litre", text: d => d.price_eur_per_litre.toFixed(2), dx: 4, textAnchor: "start", fill: "white" }) ] }) const map = Plot.plot({ width: 900, height: 800, style: {background: "black", color: "white"}, title: `Prix de l'essence dans l'UE — ${selectedDate.toLocaleDateString("fr-FR")}`, subtitle: "Essence sp95", projection: { type: "conic-equal-area", parallels: [35, 65], rotate: [-10, 0], domain: euMap }, color: {...colorScale, legend: true}, marks: [ Plot.geo(euMap, { fill: d => priceByCountry.get(d.properties.ISO2), stroke: "black", strokeWidth: 0.8, channels: { Pays: d => d.properties.NAME, Prix: d => priceByCountry.has(d.properties.ISO2) ? priceByCountry.get(d.properties.ISO2).toFixed(3) + " €/L" : "Pas de données" }, tip: {format: {fill: false}} }) ] }) display(html`

${ranking}${map}

`)31:T11b2,const colorScaleGreen = { type: "linear", domain: priceDomain, scheme: "greens", unknown: "#eeeeee", label: "€/litre" }; const meanSeries = weeks.map((w, i) => ({ date: weekDates[i], mean: d3.mean(petrolData.filter(d => +d.date === w), d => d.price_eur_per_litre) })); function renderGreen(i, pick) { const sel = petrolData.filter(d => +d.date === weeks[i]); const byCountry = new Map(sel.map(d => [d.country, d.price_eur_per_litre])); const label = d => nameByISO.get(d.country) ?? d.country; const ranking = Plot.plot({ width: 380, height: 800, marginLeft: 110, style: {background: "white", color: "black"}, title: "Classement des prix", subtitle: "Du plus cher au moins cher", x: {domain: [0, priceDomain[1]], label: "€/litre", grid: true}, y: {label: null}, color: colorScaleGreen, marks: [ Plot.barX(sel, {y: label, x: "price_eur_per_litre", fill: "price_eur_per_litre", sort: {y: "-x"}, stroke: "black", strokeWidth: 0.5}), Plot.text(sel, {y: label, x: "price_eur_per_litre", text: d => d.price_eur_per_litre.toFixed(2), dx: 4, textAnchor: "start"}) ] }); const map = Plot.plot({ width: 900, height: 700, style: {background: "white", color: "black"}, title: `Prix de l'essence dans l'UE — ${weekDates[i].toLocaleDateString("fr-FR")}`, subtitle: "Essence sp95", projection: {type: "conic-equal-area", parallels: [35, 65], rotate: [-10, 0], domain: euMap}, color: {...colorScaleGreen, legend: true}, marks: [ Plot.geo(euMap, { fill: d => byCountry.get(d.properties.ISO2), stroke: "white", strokeWidth: 0.8, channels: { Pays: d => d.properties.NAME, Prix: d => byCountry.has(d.properties.ISO2) ? byCountry.get(d.properties.ISO2).toFixed(3) + " €/L" : "Pas de données" }, tip: {format: {fill: false}} }) ] }); const cur = meanSeries[i]; const chart = Plot.plot({ width: 900, height: 220, style: {background: "white", color: "black", cursor: "ew-resize"}, title: "Prix moyen dans l'UE", subtitle: "Moyenne des pays, par semaine ", x: {type: "utc", label: null}, y: {label: "€/litre", grid: true, nice: true}, marks: [ Plot.areaY(meanSeries, {x: "date", y: "mean", fill: "#238b45", fillOpacity: 0.15}), Plot.lineY(meanSeries, {x: "date", y: "mean", stroke: "#00441b"}), Plot.ruleX([cur.date], {stroke: "#00441b", strokeWidth: 1.5}), Plot.dot([cur], {x: "date", y: "mean", fill: "#00441b", r: 5}), Plot.text([cur], {x: "date", y: "mean", text: d => d.mean.toFixed(3) + " €/L", dy: -12, fontWeight: "bold"}) ] }); const xScale = chart.scale("x"); const pickFromEvent = event => { const rect = chart.getBoundingClientRect(); const px = (event.clientX - rect.left) * (900 / rect.width); const t = xScale.invert(px); const j = d3.bisector(d => d.date).center(meanSeries, t); pick(Math.max(0, Math.min(weeks.length - 1, j))); }; chart.addEventListener("pointerdown", event => { chart.setPointerCapture?.(event.pointerId); chart.dragging = true; pickFromEvent(event); }); chart.addEventListener("pointermove", event => { if (chart.dragging) pickFromEvent(event); }); chart.addEventListener("pointerup", () => { chart.dragging = false; }); const right = html`

${map}${chart}

`; return [ranking, right]; } const greenApp = (() => { const last = weeks.length - 1; const slider = html``; const dateLabel = html`

`; const content = html`

`; const side = html`

${dateLabel}${slider}

`; const root = html`

${content}${side}

`; const update = () => { const i = +slider.value; dateLabel.textContent = weekDates[i].toLocaleDateString("fr-FR"); content.replaceChildren(...renderGreen(i, j => { if (+slider.value !== j) { slider.value = j; update(); } })); }; slider.addEventListener("input", update); update(); return root; })(); display(greenApp);32:T130e,const app3d = (() => { const W = 1100, H = 700, MAXH = 25; const last = weeks.length - 1; const COLOR = "#b9d3e8"; // bleu pastel unique const proj = d3.geoConicEqualArea().parallels([35, 65]).rotate([-10, 0]).fitSize([W * 0.7, H * 0.7], euMap); const heightScale = d3.scaleLinear([0, priceDomain[1]], [0, MAXH]); // Scène const scene = new THREE.Scene(); scene.background = new THREE.Color("white"); const camera = new THREE.PerspectiveCamera(40, W / H, 1, 5000); camera.position.set(W * 0.35, 650, W * 0.35 + 350); const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(W, H); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(W * 0.35, 0, H * 0.35); controls.maxPolarAngle = Math.PI / 2 - 0.02; controls.update(); scene.add(new THREE.AmbientLight(0xffffff, 0.8)); const sun = new THREE.DirectionalLight(0xffffff, 1.0); sun.position.set(-400, 900, 600); scene.add(sun); // Une forme extrudée par pays (profondeur 1, mise à l'échelle ensuite), sans traits const group = new THREE.Group(); group.rotation.x = -Math.PI / 2; const meshes = new Map(); const ringPts = ring => ring.map(c => { const [x, y] = proj(c); return new THREE.Vector2(x, -y); }); for (const f of euMap.features) { const polys = f.geometry.type === "Polygon" ? [f.geometry.coordinates] : f.geometry.coordinates; const shapes = polys.map(rings => { const s = new THREE.Shape(ringPts(rings[0])); for (const h of rings.slice(1)) s.holes.push(new THREE.Path(ringPts(h))); return s; }); const geom = new THREE.ExtrudeGeometry(shapes, {depth: 1, bevelEnabled: false}); const mat = new THREE.MeshStandardMaterial({color: COLOR, roughness: 0.9, metalness: 0}); const mesh = new THREE.Mesh(geom, mat); mesh.userData = {iso: f.properties.ISO2, name: f.properties.NAME}; group.add(mesh); meshes.set(f.properties.ISO2, mesh); } scene.add(group); // Interface const title = html`

`; const sub = html`

Hauteur proportionnelle au prix de l'essence sp95 (€/litre)

`; const tip = html``; const dateLabel = html``; const slider = html``; const canvasBox = html`

${renderer.domElement}${tip}

`; const root = html`

${title}${sub}${canvasBox}

Semaine ${dateLabel}${slider}

`; // Mise à jour des hauteurs let byCountry = new Map(); let target = new Map(); const update = () => { const i = +slider.value; const sel = petrolData.filter(d => +d.date === weeks[i]); byCountry = new Map(sel.map(d => [d.country, d.price_eur_per_litre])); for (const [iso] of meshes) target.set(iso, Math.max(0.5, heightScale(byCountry.get(iso) ?? 0))); dateLabel.textContent = weekDates[i].toLocaleDateString("fr-FR"); title.textContent = `Prix de l'essence dans l'UE en 3D — ${weekDates[i].toLocaleDateString("fr-FR")}`; }; slider.addEventListener("input", update); for (const [iso, mesh] of meshes) mesh.scale.z = 0.5; update(); // Survol const ray = new THREE.Raycaster(), mouse = new THREE.Vector2(); renderer.domElement.addEventListener("pointermove", e => { const r = renderer.domElement.getBoundingClientRect(); mouse.set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1); ray.setFromCamera(mouse, camera); const hit = ray.intersectObjects([...meshes.values()], false)[0]; if (hit) { const {iso, name} = hit.object.userData; const p = byCountry.get(iso); tip.textContent = `${name} : ${p == null ? "pas de données" : p.toFixed(3) + " €/L"}`; tip.style.left = (e.clientX - r.left + 12) + "px"; tip.style.top = (e.clientY - r.top + 12) + "px"; tip.style.display = "block"; } else tip.style.display = "none"; }); let raf; const loop = () => { for (const [iso, mesh] of meshes) mesh.scale.z += (target.get(iso) - mesh.scale.z) * 0.2; controls.update(); renderer.render(scene, camera); raf = requestAnimationFrame(loop); }; loop(); invalidation.then(() => { cancelAnimationFrame(raf); renderer.dispose(); controls.dispose(); }); return root; })(); display(app3d);33:[{"id":"3f86a0cb02b6b670b1deee06b4ef3a07d4af5190bd5303ad603443542794f9538e05a3c53deb1b7f5409004e4648ab69eb0f1303b902b1009ad63eb10e4912be","href":"https://static.observableusercontent.com/files/3f86a0cb02b6b670b1deee06b4ef3a07d4af5190bd5303ad603443542794f9538e05a3c53deb1b7f5409004e4648ab69eb0f1303b902b1009ad63eb10e4912be","name":"eu_oil_bulletin.csv","type":"application/vnd.ms-excel","lastModified":1790690920585,"size":4523739}] 2e:{"id":"0622597e6e33cf41","slug":"prix-de-l-essence-dans-l-ue","title":"Prix de l’essence dans l’UE","thumbnail":"cf4c3ca51c0fe73b311835f33bb0dd4c0620198e704d38917878b4d1334fb00f","access_level":"public","create_time":"$D2026-09-29T14:23:17.647Z","update_time":"$D2026-09-30T16:05:48.663Z","view_time":null,"first_public_time":"$D2026-09-30T15:27:05.580Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"675bf9da80483327","login":"vincentheauensg","name":"vincent","avatar_url":"https://avatars-next.observableusercontent.com/9abb0d8e44432fe20e45898e75f5eac83637a2f61a5e317ba5db6f4413e3a0be","tier":"starter_2024"},"version":137,"publish_version":137,"role":null,"authored":false,"authors":[{"type":"individual","id":"09078e52af539986","login":"vincentheau","name":"Vincent Heau","avatar_url":"https://avatars-next.observableusercontent.com/dbe02c61e7c0226f002378b30b6045e13b9bd27db2ac88df41e70b465c9a0fd9","tier":null}],"members":[{"type":"team","id":"675bf9da80483327","login":"vincentheauensg","name":"vincent","avatar_url":"https://avatars-next.observableusercontent.com/9abb0d8e44432fe20e45898e75f5eac83637a2f61a5e317ba5db6f4413e3a0be","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Prix de l’essence dans l’UE","cells":[{"id":1,"value":"# Prix de l'essence dans l'UE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"const oilData = FileAttachment(\"eu_oil_bulletin.csv\")\nconst data = await oilData.csv({ typed: true })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"const europe = await d3.json(\n \"https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/GeoJSON/europe.geojson\"\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"europe.features.length","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"europe.features[0].properties","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"europe.features.slice(0, 5).map(d => d.properties)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"const euCountries = new Set([\n \"AT\", \"BE\", \"BG\", \"HR\", \"CY\", \"CZ\", \"DK\", \"EE\",\n \"FI\", \"FR\", \"DE\", \"GR\", \"HU\", \"IE\", \"IT\", \"LV\",\n \"LT\", \"LU\", \"MT\", \"NL\", \"PL\", \"PT\", \"RO\", \"SK\",\n \"SI\", \"ES\", \"SE\"\n])\n\nconst euMap = {\n ...europe,\n features: europe.features.filter(\n d => euCountries.has(d.properties.ISO2)\n )\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"euMap.features.length","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"euMap.features[0].properties","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"const petrolData = data.filter(\n d => d.fuel_type === \"petrol_95\" && euCountries.has(d.country)\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const weeks = Array.from(\n new Set(petrolData.map(d => +d.date))\n).sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"const weekDates = weeks.map(d => new Date(d))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"const weekIndex = view(\n Inputs.range(\n [0, weeks.length - 1],\n {\n step: 1,\n value: weeks.length - 1,\n label: \"Semaine\"\n }\n )\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"const selectedDate = weekDates[weekIndex]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"const selectedData = petrolData.filter(\n d => +d.date === weeks[weekIndex]\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"const priceDomain = d3.extent(petrolData, d => d.price_eur_per_litre)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import * as THREE from \"npm:three\";\nimport {OrbitControls} from \"npm:three/examples/jsm/controls/OrbitControls\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$32","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"