2b:null 2c:["$","title",null,{"children":"Rose des vents — Villes de France | Alain Ottenheimer | Observable"}] 31:T6b8,title_ = md`# Rose des vents — Villes de France #### Secteurs vs barres • Échelle linéaire vs radiale • Multiples petits --- ### Problème de représentation La **représentation standard** d'une rose des vents utilise une **échelle linéaire** avec des **secteurs circulaires**. Cependant, dans ce type de graphique, **les surfaces colorées ne sont pas proportionnelles aux valeurs**. Par exemple, **l’aire correspondant à 10 % est plus de deux fois celle correspondant à 5 %**, ce qui peut induire une perception visuelle trompeuse. --- ### Alternative : l’échelle radiale La **représentation radiale** modifie l’échelle de façon à ce que **les aires des secteurs soient proportionnelles aux valeurs**. Cela permet à l’œil de **mieux percevoir l’importance relative des différentes catégories de vent**. En contrepartie : - la **lecture des valeurs devient plus difficile** - l’**empilement des catégories** rend l’interprétation moins immédiate voir impossible --- ### Autres alternatives de visualisation Deux approches permettent d'améliorer la lisibilité : **1. Multiples petits (small multiples)** Créer un graphique distinct pour **chaque catégorie de vent**. **2. Barres empilées** Remplacer les **secteurs circulaires** par des **barres empilées**, ce qui facilite la comparaison des proportions. --- Source des données : https://www.data.gouv.fr/datasets/donnees-climatologiques-de-base-quotidiennes/ FXY : maximum quotidien de la force maximale horaire du vent moyenné sur 10 mn, à 10 m FXI : maximum quotidien de la force maximale horaire du vent instantané, à 10 m `32:Td2e,chart1 = { const height = 500; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); SetScales(); var g = svg .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // Create new bars var bars_all = g.selectAll(".radialbar_all").data(StackData(data)); // Update the bars bars_all .enter() .append("g") .attr("fill", (d) => { return "#eee"; }) .attr("stroke", "none") .selectAll("path") .data((d) => { return d; }) .enter() .append("path") .attr( "d", d3 .arc() .innerRadius((d) => { return y(d[0]); }) .outerRadius((d) => { return y(d[1]); }) .startAngle((d) => { return x(d.data.Angle); }) .endAngle((d) => { return x(d.data.Angle) + x.bandwidth(); }) .padAngle(0.01) .padRadius(innerRadius) ) .attr("transform", (d) => { return "rotate(" + angleOffset + ")"; }); // Create new bars var bars = g.selectAll(".radialbar").data(stacked); // Update the bars bars .enter() .append("g") .attr("fill", (d) => { return colour(d.key); }) .attr("stroke", "grey") .selectAll("path") .data((d) => { return d; }) .enter() .append("path") .attr( "d", d3 .arc() .innerRadius((d) => { return y(d[0]); }) .outerRadius((d) => { return y(d[1]); }) .startAngle((d) => { return x(d.data.Angle); }) .endAngle((d) => { return x(d.data.Angle) + x.bandwidth(); }) .padAngle(0.01) .padRadius(innerRadius) ) .attr("transform", (d) => { return "rotate(" + angleOffset + ")"; }); //Set up label positions var label = g .append("g") .selectAll("g") .data(labels) .enter() .append("g") .attr("text-anchor", "middle") .attr("transform", (d) => { return LabelTransform(d); }); //Add labels label .append("text") .attr("transform", (d) => { return TextTransform(d); }) .text((d) => { return d.Angle; }) .style("font-size", 14); //Add radial axes g.selectAll(".axis") .data(labels) .enter() .append("g") .attr("class", "axis") .attr("transform", (d) => { return "rotate(" + (x(d.Angle) * 180) / Math.PI + ")"; }) .call(d3.axisLeft().scale(y).tickValues([])); var yAxis = g.append("g").attr("text-anchor", "middle"); //set circles to indicate speeds var yTick = yAxis .selectAll("g") .data(y.ticks(5).slice(1)) .enter() .append("g"); yTick .append("circle") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-dasharray", "4,4") .attr("r", y); yTick .append("text") .attr("y", function (d) { return -y(d); }) .attr("dy", ".35em") .attr("x", function () { return -10; }) .attr("dx", "-0.5em") .attr("x", -10) .text((d) => y.tickFormat(1, "s")(d) + "%"); g.append("text") .attr("class", "titre") .attr("x", 0) .attr("y", 14 - height / 2) .style("text-anchor", "middle") .attr("font-size", 14) .text(file.name.split("&")[1]); return svg.node(); }33:Tf47,//chart2 = () => { chart2 = { const posX = 500; const posY = 500; const svg = d3 .create("svg") .attr("viewBox", [0, 0, numCols * 500, numRows * 500]); //.attr("transform", `translate(${posX},${posY})`); SetScales(); // Boucle sur chaque position de la grille for (let i = 0; i < gridPositions.length - interval; i++) { const gx = svg .append("g") .attr( "transform", `translate(${posX / 2 + posX * gridPositions[i].col}, ${ posY / 2 + posY * gridPositions[i].row })` ); // ---- Radial bars background ---- const bars_all = gx.selectAll(".radialbar_all").data(stacked); bars_all .enter() .append("g") .attr("fill", "#eee") .attr("stroke", "none") .selectAll("path") .data((d) => d) .enter() .append("path") .attr( "d", d3 .arc() .innerRadius((d) => y(d[0])) .outerRadius((d) => y(d[1])) .startAngle((d) => x(d.data.Angle)) .endAngle((d) => x(d.data.Angle) + x.bandwidth()) .padAngle(0.01) .padRadius(innerRadius) ) .attr("transform", `rotate(${angleOffset})`); // ---- Radial bars colored ---- const bars = gx .selectAll(".radialbar") .data( StackData( data.filter( (d) => d.Speed === Array.from(new Set(file.data.map((d) => d.Speed)))[i] ) ) ); bars .enter() .append("g") .attr("fill", (d) => colour(d.key)) .attr("stroke", "grey") .selectAll("path") .data((d) => d) .enter() .append("path") .attr( "d", d3 .arc() .innerRadius((d) => y(d[0])) .outerRadius((d) => y(d[1])) .startAngle((d) => x(d.data.Angle)) .endAngle((d) => x(d.data.Angle) + x.bandwidth()) .padAngle(0.01) .padRadius(innerRadius) ) .attr("transform", `rotate(${angleOffset})`); // ---- Labels ---- const label = gx .append("g") .selectAll("g") .data(labels) .enter() .append("g") .attr("text-anchor", "middle") .attr("transform", (d, j) => LabelTransform(d)); label .append("text") .attr("transform", (d) => TextTransform(d)) .text((d) => d.Angle) .style("font-size", 14); // ---- Radial axes ---- const yAxis = gx.append("g").attr("text-anchor", "middle"); const yTick = yAxis .selectAll("g") .data(y.ticks(5).slice(1)) .enter() .append("g"); yTick .append("circle") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-dasharray", "4,4") .attr("r", (d) => y(d)); yTick .append("text") .attr("y", (d) => -y(d)) .attr("dy", "-0.35em") .attr("dx", "-0.5em") .attr("x", -10) .text((d) => y.tickFormat(5, "s")(d) + "%") .style("font-size", 14); // ---- Radial axis lines ---- gx.selectAll(".axis") .data(labels) .enter() .append("g") .attr("class", "axis") .attr("transform", (d) => `rotate(${(x(d.Angle) * 180) / Math.PI})`) .call(d3.axisLeft().scale(y).tickValues([])); gx.append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") // centre verticalement .style("font-size", Math.min(posX, posY) * 0.2) // 20% de la taille du "bloc" .style("font-weight", "bold") .text(() => { // Exemple : afficher la Speed correspondante return Array.from(new Set(file.data.map((d) => d.Speed)))[i] + "m/s"; }); } svg .append("text") .attr("class", "titre") .attr("x", (posX * numCols) / 2) .attr("y", 10) .style("text-anchor", "middle") .attr("font-size", 14) .text(file.name.split("&")[1]); return svg.node(); }34:T9f8,chart3 = { const height = 500; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const tickness = (2 * Math.PI * innerRadius) / 16; SetScales(); const g = svg .append("g") .attr("transform", `translate(${width / 2},${height / 2})`); // === MAIN STACKED RECTANGULAR RADIAL BARS === const barGroups = g .selectAll(".radialbar") .data(stacked) // e.g. d3.stack() output .enter() .append("g") .attr("class", "radialbar") .attr("fill", (d) => colour(d.key)) .attr("stroke", "none"); barGroups .selectAll("rect") .data((d) => d) .enter() .append("rect") .attr("width", tickness) // angular thickness .attr("height", (d) => y(d[1]) - y(d[0])) // radial bar length .attr("x", -tickness / 2) // center the bar on its axis .attr("y", (d) => -y(d[1])) // position outer edge .attr("transform", function (d) { // rotate each bar so it radiates outward const angleDeg = (x(d.data.Angle) * 180) / Math.PI; //+ angleOffset; return `rotate(${angleDeg}) `; }) .attr("fill", function () { // ✅ use normal function, not arrow, so `this` works return d3.select(this.parentNode).attr("fill"); }); // === LABELS === const label = g .append("g") .selectAll("g") .data(labels) .enter() .append("g") .attr("text-anchor", "middle") .attr("transform", (d) => LabelTransform(d)); label .append("text") .attr("transform", (d) => TextTransform(d)) .text((d) => d.Angle) .style("font-size", 14); // === RADIAL AXES === g.selectAll(".axis") .data(labels) .enter() .append("g") .attr("class", "axis") .attr("transform", (d) => `rotate(${(x(d.Angle) * 180) / Math.PI})`) .call(d3.axisLeft().scale(y).tickValues([])); // === GRID CIRCLES === const yAxis = g.append("g").attr("text-anchor", "middle"); const yTick = yAxis .selectAll("g") .data(y.ticks(5).slice(1)) .enter() .append("g"); yTick .append("circle") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-dasharray", "4,4") .attr("r", (d) => y(d)); yTick .append("text") .attr("y", (d) => -y(d)) .attr("dy", ".35em") .attr("x", -10) .text((d) => y.tickFormat(1, "s")(d) + "%"); // === TITLE === g.append("text") .attr("class", "titre") .attr("x", 0) .attr("y", 14 - height / 2) .style("text-anchor", "middle") .attr("font-size", 14) .text(file.name.split("&")[1]); return svg.node(); }35:Tfa8,chart3_smallMultiples = { const cellSize = 500; // width/height for each mini chart const svg = d3 .create("svg") .attr("viewBox", [0, 0, numCols * cellSize, numRows * cellSize]); SetScales(); // must define x, y, innerRadius, etc. // --- UNIQUE VALUES to iterate over (e.g. Speed levels) const uniqueKeys = Array.from(new Set(file.data.map((d) => d.Speed))); // --- LOOP through grid positions --- for (let i = 0; i < gridPositions.length && i < uniqueKeys.length; i++) { const key = uniqueKeys[i]; const gx = svg.append("g").attr( "transform", `translate(${cellSize / 2 + cellSize * gridPositions[i].col}, ${ cellSize / 2 + cellSize * gridPositions[i].row })` ); // === BACKGROUND BARS (reference) === const bars_all = gx .selectAll(".radialbar_all") .data(stacked) .enter() .append("g") .attr("fill", "#eee") .attr("stroke", "none"); bars_all .selectAll("rect") .data((d) => d) .enter() .append("rect") .attr("width", (2 * Math.PI * innerRadius) / 16) .attr("height", (d) => y(d[1]) - y(d[0])) .attr("x", -((2 * Math.PI * innerRadius) / 16) / 2) .attr("y", (d) => -y(d[1])) .attr("transform", (d) => `rotate(${(x(d.data.Angle) * 180) / Math.PI})`); // === COLORED RADIAL BARS (filtered data) === const filtered = data.filter((d) => d.Speed === key); const stackedFiltered = StackData(filtered); const bars = gx .selectAll(".radialbar") .data(stackedFiltered) .enter() .append("g") .attr("fill", (d) => colour(d.key)) .attr("stroke", "none"); bars .selectAll("rect") .data((d) => d) .enter() .append("rect") .attr("width", (2 * Math.PI * innerRadius) / 16) .attr("height", (d) => y(d[1]) - y(d[0])) .attr("x", -((2 * Math.PI * innerRadius) / 16) / 2) .attr("y", (d) => -y(d[1])) .attr("transform", (d) => `rotate(${(x(d.data.Angle) * 180) / Math.PI})`) .attr("fill", function () { return d3.select(this.parentNode).attr("fill"); }); // === LABELS === const label = gx .append("g") .selectAll("g") .data(labels) .enter() .append("g") .attr("text-anchor", "middle") .attr("transform", (d) => LabelTransform(d)); label .append("text") .attr("transform", (d) => TextTransform(d)) .text((d) => d.Angle) .style("font-size", 14); // === GRID CIRCLES === const yAxis = gx.append("g").attr("text-anchor", "middle"); const yTick = yAxis .selectAll("g") .data(y.ticks(5).slice(1)) .enter() .append("g"); yTick .append("circle") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-dasharray", "4,4") .attr("r", (d) => y(d)); yTick .append("text") .attr("y", (d) => -y(d)) .attr("dy", "-0.35em") .attr("dx", "-0.5em") .attr("x", -10) .text((d) => y.tickFormat(5, "s")(d) + "%") .style("font-size", 14); // === RADIAL AXES === gx.selectAll(".axis") .data(labels) .enter() .append("g") .attr("class", "axis") .attr("transform", (d) => `rotate(${(x(d.Angle) * 180) / Math.PI})`) .call(d3.axisLeft().scale(y).tickValues([])); // === TITLE for each mini chart === gx.append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", Math.min(cellSize) * 0.2) .style("font-weight", "bold") .text(`${key} m/s`); } // === GLOBAL TITLE === svg .append("text") .attr("class", "titre") .attr("x", (cellSize * numCols) / 2) .attr("y", 10) .style("text-anchor", "middle") .attr("font-size", 14) .text(file.name.split("&")[1]); return svg.node(); }36:[{"id":"fe7625ab9c9d973ed0e8ab9420a038c6e6397f193cc6e321111ea5d6ada13731c29c89dd24c4979e577262e2770823b12ffc8d93d562ffc0426fbf1146678583","href":"https://static.observableusercontent.com/files/fe7625ab9c9d973ed0e8ab9420a038c6e6397f193cc6e321111ea5d6ada13731c29c89dd24c4979e577262e2770823b12ffc8d93d562ffc0426fbf1146678583","name":"FXI_concat_rose_des_vents@1.json","type":"application/json","lastModified":1773415665474.497,"size":133655},{"id":"4b9695d1fbf8e54e5021988fbb9f16d4523e8671565e1536216ccf087df3af37f80e9ca7b38983906f3de666b4add74271543581f7b3781321e827262c346376","href":"https://static.observableusercontent.com/files/4b9695d1fbf8e54e5021988fbb9f16d4523e8671565e1536216ccf087df3af37f80e9ca7b38983906f3de666b4add74271543581f7b3781321e827262c346376","name":"FXY_concat_rose_des_vents@1.json","type":"application/json","lastModified":1773414868903.2,"size":118901}] 2f:{"id":"fe01cda197696cda","slug":"rose-des-vents","title":"Rose des vents — Villes de France","thumbnail":"01b6046cb43af3a2478cbba6604c7aadd7bd1387552d7df597859bb4413029b9","access_level":"public","create_time":"$D2025-09-30T14:34:35.176Z","update_time":"$D2026-05-21T19:44:29.511Z","view_time":null,"first_public_time":"$D2026-03-14T10:42:45.354Z","fork":true,"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"},"version":1460,"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}],"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":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"title":"Rose des vents — Villes de France","cells":[{"id":1303,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"viewof outerRadius = Inputs.range([0, 250], {\n value: 200,\n step: 1,\n label: \"outerRadius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"viewof selectedColour = Inputs.select(colorRamps, {\n label: \"Colour Ramps\",\n value: \"Blues\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1447,"value":"d3[\"scheme\" + selectedColour][stacked.length]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1106,"value":"viewof selected_name = Inputs.select(allNames, {\n label: \"localisation\",\n value:\n \"rose des vents Q_04_previous-1950-2023_RR-T-Vent &…001_2005&_[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"viewof innerRadius = Inputs.range([0, 100], {\n value: 36,\n step: 1,\n label: \"innerRadius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"viewof scale = Inputs.radio([\"Linear\", \"Radial\"], {\n label: \"Select scale\",\n value: \"Radial\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1315,"value":"legend = {\n const keys = stacked.map((d) => d.key);\n\n const scale = d3.scaleOrdinal(keys, colour_legend.range());\n\n const size = 14;\n const gap = 6;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", keys.length * 90)\n .attr(\"height\", 80);\n\n svg\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 12)\n .attr(\"font-weight\", \"normal\")\n .selectAll(\"tspan\")\n .data([file_.name.slice(0, 3), selected_name, \"Vitesse du vent en m/s\"])\n .enter()\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"dy\", (d, i) => (i ? \"1.2em\" : 0))\n .text((d) => d);\n\n const g = svg\n .selectAll(\"g\")\n .data(keys)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 90},60)`);\n\n g.append(\"rect\").attr(\"width\", size).attr(\"height\", size).attr(\"fill\", scale);\n\n g.append(\"text\")\n .attr(\"x\", size + gap)\n .attr(\"y\", size / 2)\n .attr(\"dy\", \"0.35em\")\n .style(\"font-size\", 12)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":812,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1250,"value":"DOM.download(\n await serialize(chart1),\n \"chart1_\" + scale + \"_\" + file.name + \".svg\",\n \"Download as svg\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"{\n const keys = stacked.map((d) => d.key);\n\n const scale = d3.scaleOrdinal(keys, colour_legend.range());\n\n const size = 14;\n const gap = 6;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", keys.length * 90)\n .attr(\"height\", 80);\n\n svg\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 12)\n .attr(\"font-weight\", \"normal\")\n .selectAll(\"tspan\")\n .data([file_.name.slice(0, 3), selected_name, \"Vitesse du vent en m/s\"])\n .enter()\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"dy\", (d, i) => (i ? \"1.2em\" : 0))\n .text((d) => d);\n\n const g = svg\n .selectAll(\"g\")\n .data(keys)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 90},60)`);\n\n g.append(\"rect\").attr(\"width\", size).attr(\"height\", size).attr(\"fill\", scale);\n\n g.append(\"text\")\n .attr(\"x\", size + gap)\n .attr(\"y\", size / 2)\n .attr(\"dy\", \"0.35em\")\n .style(\"font-size\", 12)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":731,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"DOM.download(\n await serialize(chart2),\n \"chart2_\" + scale + \"_\" + file.name + \".svg\",\n \"Download as svg\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1384,"value":"{\n const keys = stacked.map((d) => d.key);\n\n const scale = d3.scaleOrdinal(keys, colour_legend.range());\n\n const size = 14;\n const gap = 6;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", keys.length * 90)\n .attr(\"height\", 80);\n\n svg\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 12)\n .attr(\"font-weight\", \"normal\")\n .selectAll(\"tspan\")\n .data([file_.name.slice(0, 3), selected_name, \"Vitesse du vent en m/s\"])\n .enter()\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"dy\", (d, i) => (i ? \"1.2em\" : 0))\n .text((d) => d);\n\n const g = svg\n .selectAll(\"g\")\n .data(keys)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 90},60)`);\n\n g.append(\"rect\").attr(\"width\", size).attr(\"height\", size).attr(\"fill\", scale);\n\n g.append(\"text\")\n .attr(\"x\", size + gap)\n .attr(\"y\", size / 2)\n .attr(\"dy\", \"0.35em\")\n .style(\"font-size\", 12)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1209,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":365,"value":"DOM.download(\n await serialize(chart3),\n \"chart3_\" + scale + \"_\" + file.name + \".svg\",\n \"Download as svg\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1387,"value":"{\n const keys = stacked.map((d) => d.key);\n\n const scale = d3.scaleOrdinal(keys, colour_legend.range());\n\n const size = 14;\n const gap = 6;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", keys.length * 90)\n .attr(\"height\", 80);\n\n svg\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 12)\n .attr(\"font-weight\", \"normal\")\n .selectAll(\"tspan\")\n .data([file_.name.slice(0, 3), selected_name, \"Vitesse du vent en m/s\"])\n .enter()\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"dy\", (d, i) => (i ? \"1.2em\" : 0))\n .text((d) => d);\n\n const g = svg\n .selectAll(\"g\")\n .data(keys)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 90},60)`);\n\n g.append(\"rect\").attr(\"width\", size).attr(\"height\", size).attr(\"fill\", scale);\n\n g.append(\"text\")\n .attr(\"x\", size + gap)\n .attr(\"y\", size / 2)\n .attr(\"dy\", \"0.35em\")\n .style(\"font-size\", 12)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1259,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1271,"value":"DOM.download(\n await serialize(chart3_smallMultiples),\n \"chart3_smallMultiples\" + scale + \"_\" + file.name + \".svg\",\n \"Download as svg\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"md`### Small multiple parameter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"numCols = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"numRows = Math.ceil(\n Array.from(new Set(file.data.map((d) => d.Speed))).length / numCols\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":938,"value":"interval = {\n const uniqueSpeeds = Array.from(\n new Set(file.data.map((d) => d.Speed))\n ).length;\n const frac = uniqueSpeeds / numCols - Math.ceil(uniqueSpeeds / numCols);\n\n let temp;\n if (frac == 0) {\n temp = 0;\n } else if (frac >= 0.5) {\n temp = 1;\n } else if (frac < 0.5) {\n temp = 2;\n }\n\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"gridPositions = coordinates.map(([row, col]) => ({ row, col }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"coordinates = d3.cross(d3.range(numRows), d3.range(numCols))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1410,"value":"file_ = FileAttachment(\"FXY_concat_rose_des_vents@1.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1412,"value":"rose_des_vents_concat = file_.json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1102,"value":"allNames = rose_des_vents_concat.files.map((f) =>\n f.name.split(\"_\")[3].slice(10)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1120,"value":"index = allNames.findIndex((name) => name.includes(selected_name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1093,"value":"file = rose_des_vents_concat.files[index]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"data_temp = file.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"data = {\n let temp = [];\n let speeds = Array.from(new Set(file.data.map((d) => d.Speed)));\n\n for (let i = 0; i < speeds.length; i++) {\n let subset = [];\n for (let j = 0; j < data_temp.length; j++) {\n if (data_temp[j].Speed === speeds[i]) {\n temp.push({\n Angle: data_temp[j].Angle,\n Speed: data_temp[j].Speed,\n Hours: data_temp[j].Hours,\n Row: gridPositions[i].row,\n Col: gridPositions[i].col\n });\n }\n }\n //temp.push(subset);\n }\n\n return temp; //.filter((d) => d.Speed == \"1-2\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"md `We need to 'stack' the data up, one stack per speed range:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"stacked = StackData(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"md `Labels is a helper for setting out the axes and labelling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"labels = GetLabels(stacked[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"md` angleOffset allows each stack to be centred on the cardinal directions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"angleOffset = -360/32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"speedRanges = [...new Set(data.map((item) => item.Speed))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"md` ### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"function GetLabels(d)\n{\n let labels =[];\n for(var i = 0;i < d.length;i++)\n {\n labels.push(d[i].data);\n }\n return labels;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"function StackData(data) {\n let simpleData = [];\n //get unique arrays for Angle and Speed\n let a = [...new Set(data.map((item) => item.Angle))];\n let b = [...new Set(data.map((item) => item.Speed))];\n for (var i = 0; i < a.length; i++) {\n var d = { Angle: a[i] };\n var results = data.filter((obj) => {\n return obj.Angle === a[i];\n });\n var total = 0;\n for (var j = 0; j < results.length; j++) {\n d[results[j].Speed] = Number(results[j].Hours);\n total += Number(results[j].Hours);\n }\n d[\"Total\"] = total;\n simpleData.push(d);\n }\n var stackedData = d3.stack().keys(b)(simpleData);\n return stackedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"//set the domain of scales from the data\nfunction SetScales() {\n x.domain(\n data.map((d) => {\n return d.Angle;\n })\n );\n y.domain([\n 0,\n d3.max(\n labels.map((d) => {\n return d.Total;\n })\n )\n ]);\n //y.domain([0, 40]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"function LabelTransform(d)\n{\n let angle = (x(d.Angle) + x.bandwidth() / 2) * 180 / Math.PI - (90-angleOffset);\n let translateX = outerRadius+30;\n return \"rotate(\" + angle + \") translate(\" + translateX + \" ,0)\";\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"function TextTransform(d)\n{\n let sector = (x(d.Angle) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI);\n if(sector < Math.PI)\n return \"rotate(90) translate(0,16)\";\n else\n return \"rotate(-90) translate(0,-9)\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1163,"value":"verif_total_secteurs = labels.reduce((sum, obj) => sum + (obj.Total || 0), 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md` ## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"y = scale == \"Radial\"\n ? createScale(\"Radial\", data, innerRadius, outerRadius)\n : createScale(\"Linear\", data, innerRadius, outerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"function createScale(scale, data, innerRadius, outerRadius) {\n const maxValue = d3.max(data, (d) => d.total);\n\n return (scale === \"Radial\" ? d3.scaleRadial() : d3.scaleLinear())\n .domain([0, maxValue])\n .range([innerRadius, outerRadius]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"//handles angular scaling\nx = d3.scaleBand()\n .range([0, 2 * Math.PI])\n .align(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"function colour(i){\n let t = speedRanges.indexOf(i)/speedRanges.length;\n let scale = \"interpolate\"+selectedColour;\n return d3[scale](t);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1451,"value":"colour_legend.range()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1320,"value":"colour_legend = d3\n .scaleOrdinal()\n .domain(stacked.map((d) => d.key))\n .range(d3[\"scheme\" + selectedColour][stacked.length])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1453,"value":"stacked.map((d) => d.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1455,"value":"d3[\"scheme\" + selectedColour][stacked.length]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"md`## Appendices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"colorRamps = ['Blues', 'Greens', 'Greys', 'Oranges', 'Purples', 'Reds','BuGn', 'BuPu', 'GnBu', 'OrRd', 'PuBuGn', 'PuBu','PuRd', 'RdPu', 'YlGnBu', 'YlGn', 'YlOrBr', 'YlOrRd','Viridis', 'Inferno', 'Magma', 'Plasma', 'Warm', 'Cool', 'CubehelixDefault','BrBG', 'PRGn', 'PiYG', 'PuOr', 'RdBu', 'RdGy', 'RdYlBu', 'RdYlGn', 'Spectral','Rainbow', 'Sinebow'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"md`#### Inspired by: \n* https://bl.ocks.org/ssmaroju/96af159c1872c2928a972c441bccaf50\n* https://observablehq.com/@d3/radial-stacked-bar-chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"