25:["$","title",null,{"children":"Focus sur Observable Plot & d3.js | Alain Ottenheimer | Observable"}] 4b:Tb0f,chart = (() => { // 1. Définition des dimensions et des marges const width = 400; const height = 350; const margin = { top: 70, right: 30, bottom: 50, left: 60 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // 2. Création du SVG via d3.create (spécifique à Observable) const svg = d3 .create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("max-width", "55%") .style("height", "auto"); // 3. Ajout manuel du Titre et du Sous-titre svg .append("text") .attr("x", margin.left) .attr("y", 30) .attr("font-weight", "bold") .attr("font-size", "16px") .text("Ventes de fruits par catégorie"); svg .append("text") .attr("x", margin.left) .attr("y", 50) .attr("fill", "#666") .attr("font-size", "12px") .text("Données de démonstration"); // 4. Création du groupe principal décalé par les marges const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // 5. Définition des échelles (Scales) - 'data' vient d'une autre cellule const x = d3 .scaleBand() .domain(data_1.map((d) => d.fruit)) .range([0, innerWidth]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data_1, (d) => d.quantite)]) .nice() .range([innerHeight, 0]); // 6. Ajout de l'axe X et de son libellé g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .append("text") .attr("x", innerWidth / 2) .attr("y", 40) .attr("fill", "currentColor") .attr("text-anchor", "middle") .text("Fruit"); // 7. Ajout de l'axe Y, de sa grille et de son libellé g.append("g") .call(d3.axisLeft(y).tickSize(-innerWidth)) .call((g) => g.selectAll(".tick line").attr("stroke", "#e0e0e0")) .call((g) => g.select(".domain").remove()) .append("text") .attr("transform", "rotate(-90)") .attr("y", -45) .attr("x", -innerHeight / 2) .attr("fill", "currentColor") .attr("text-anchor", "middle") .text("Quantité vendue"); // 8. Dessin des barres (rectangles) avec infobulle native g.selectAll(".bar") .data(data_1) .enter() .append("rect") .attr("x", (d) => x(d.fruit)) .attr("y", (d) => y(d.quantite)) .attr("width", x.bandwidth()) .attr("height", (d) => innerHeight - y(d.quantite)) .attr("fill", "steelblue") .append("title") .text((d) => `${d.fruit}: ${d.quantite}`); // 9. Ajout de la règle horizontale à y = 0 g.append("line") .attr("x1", 0) .attr("x2", innerWidth) .attr("y1", innerHeight) .attr("y2", innerHeight) .attr("stroke", "currentColor"); // 10. Retour de l'élément SVG pour l'assignation return svg.node(); })()4c:[{"id":"1734c862dd51ef67930fef3dcd19e8184bb65c405683f55a085f97ca01c233713a53062c251fe0a6d72f93863fd5f714eadef3c9455b1b4f2ed90546cbc57b32","href":"https://static.observableusercontent.com/files/1734c862dd51ef67930fef3dcd19e8184bb65c405683f55a085f97ca01c233713a53062c251fe0a6d72f93863fd5f714eadef3c9455b1b4f2ed90546cbc57b32","name":"gistemp(1).csv","type":"text/csv","lastModified":1793122424149.185,"size":27014},{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m(3).json","type":"application/json","lastModified":1793713125546.218,"size":107761},{"id":"5261f36e482718ee45ebbf0d0026ac3e4d60ba4d8ccb6e89e38900979260b8aee2e3cdf930817a38854cdcafd845bfa93db6c52d3e970af40fec22ae3e2c36f1","href":"https://static.observableusercontent.com/files/5261f36e482718ee45ebbf0d0026ac3e4d60ba4d8ccb6e89e38900979260b8aee2e3cdf930817a38854cdcafd845bfa93db6c52d3e970af40fec22ae3e2c36f1","name":"image.png","type":"image/png","lastModified":1793710962844.994,"size":41678}] 47:{"id":"6957322bccc225b1","slug":"meetup_novembre_2026","title":" Focus sur Observable Plot & d3.js ","thumbnail":"1cc57b38c2a041cc576ea92966b5f599e3e3d325c8cc0449353b508226884e3c","access_level":"public","create_time":"$D2026-10-27T12:36:53.184Z","update_time":"$D2026-11-04T16:18:58.699Z","view_time":null,"first_public_time":"$D2026-10-27T16:48:00.299Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024","bio":"Data Analysis, Data Viz \nJavascript, python, QGIS, Tableau, illustrator...","followed_by_you":false,"follows_you":false},"version":396,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"bio":"Data Analysis, Data Viz \nJavascript, python, QGIS, Tableau, illustrator...","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"titling":"auto","title":" Focus sur Observable Plot & d3.js ","cells":[{"id":0,"value":"# Focus sur Observable Plot & d3.js ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"---\n\n## Diagramme à barres avec [d3.js](https://d3js.org/) \n\n**LIBERTE INFINIE** mais \n- Courbe d’apprentissage abrupte\n- Code répétitif d’un graphique à l’autre \n- Nombre de lignes de code élevé\n\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"---\n\n## Diagramme à barres avec plot \n\nBibliothèque de haut niveau basée sur [d3.js](https://d3js.org/).\n\n- **SVG natif et ouvert** : graphiques vectoriels (éléments HTML standard svg) , stylables en CSS\n- **Concision extrême** : un graphique en quelques lignes de code\n- **Grammaire graphique** : inspirée de [ggplot2](https://ggplot2.tidyverse.org/) - la grammaire graphique consiste à construire un graphique brique par brique, un peu comme on forme des phrases avec des mots, des sujets et des verbes selon des règles de grammaire : les données, les marques, l'encodage visuel, les échelles, les transformations... => Une liberté totale de composition + lisibilité du code\n\nNative dans la plateforme [Observable](https://observablehq.com), plot peut aussi être intégrée dans n'importe quel projet web (React, Vue, HTML classique, etc.).\n\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"Plot.plot({\n title: \"Ventes de fruits par catégorie\",\n subtitle: \"Données de démonstration\",\n marks: [Plot.barY(data_1, { x: \"fruit\", y: \"quantite\", fill: \"steelblue\" })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data_1 = [\n { fruit: \"Pommes\", quantite: 45 },\n { fruit: \"Bananes\", quantite: 30 },\n { fruit: \"Oranges\", quantite: 55 },\n { fruit: \"Fraises\", quantite: 20 },\n { fruit: \"Kiwis\", quantite: 35 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"---\n\n\n\nNative dans la plateforme [Observable](https://observablehq.com), plot peut aussi être intégrée dans n'importe quel projet web (React, Vue, HTML classique, etc.).\n\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"![image.png](${await FileAttachment(\"image.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"---\n\n## Autre exemple Plot\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.dot(data_2, { x: \"Date\", y: \"Anomaly\", fill: \"lightgrey\" }),\n Plot.line(data_2, { x: \"Date\", y: \"Anomaly\", stroke: \"lightblue\" }),\n Plot.linearRegressionY(data_2, { x: \"Date\", y: \"Anomaly\", stroke: \"red\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"data_2 = FileAttachment(\"gistemp(1).csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"---\n\n## Options exemples \n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"Plot.plot({\n y: {\n domain: [\n d3.min(data_2, (d) => d.Anomaly) * 1.5,\n d3.max(data_2, (d) => d.Anomaly) * 1.5\n ],\n type: \"linear\",\n ticks: 5,\n tickFormat: \".2f\",\n labelOffset: 35,\n label: \"Anomaly\"\n },\n marks: [\n Plot.axisY({\n ticks: 5,\n tickFormat: \".2f\",\n fontSize: 12, // nombre, sans \"px\"\n label: \"Anomaly\",\n labelOffset: 50\n }),\n Plot.axisX({\n ticks: 5,\n fontSize: 14, // nombre, sans \"px\"\n label: \"Date\",\n labelOffset: 50\n }),\n Plot.ruleY([d3.min(data_2, (d) => d.Anomaly) * 1.5]),\n Plot.dot(data_2, { x: \"Date\", y: \"Anomaly\", fill: \"lightgrey\" }),\n Plot.line(data_2, { x: \"Date\", y: \"Anomaly\", stroke: \"lightblue\" }),\n Plot.linearRegressionY(data_2, { x: \"Date\", y: \"Anomaly\", stroke: \"red\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"__","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"viewof longitude = Inputs.range([-180, 180], { label: \"Longitude\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"carte = Plot.plot({\n projection: { type: \"orthographic\", rotate: [-longitude, -30] },\n r: { transform: (d) => Math.pow(10, d) }, // convert Richter to amplitude\n marks: [\n Plot.geo(land, { fill: \"currentColor\", fillOpacity: 0.2 }),\n Plot.sphere(),\n Plot.dot(earthquakes, {\n x: \"longitude\",\n y: \"latitude\",\n r: \"magnitude\",\n stroke: \"red\",\n fill: \"red\",\n fillOpacity: 0.2\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"world = FileAttachment(\"countries-110m(3).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"earthquakes = d3\n .json(\n \"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson\"\n )\n .then((d) =>\n d.features.map((f) => {\n const c = d3.geoCentroid(f);\n return { magnitude: f.properties.mag, longitude: c[0], latitude: c[1] };\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"---\n\n## Documentation \n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"Lien vers Observable Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"---\n\n## Limitations \n\nexemple : Observable Plot n’a pas de mark « arc » ni de coordonnées polaires.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"chart1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"import { chart1 } from \"@aotten/rose-des-vents\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"---\n\n## C'était avant l'IA ! \n\nEn demandant à l'IA de recoder la rose des vents en utilisant plot \n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"chart1_plot","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"import { chart1_plot } from \"@aotten/rose-des-vents\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"---\n\n## Impact de l'IA sur le développement des dataviz ! \n\n\nCodage en d3 brut ou avec plot ? \n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null