2b:null 2c:["$","title",null,{"children":"Quartiers de la politique de la ville | ToulouseDataviz | Observable"}] 31:T188c,radialTree = { const svg = d3 .select(DOM.svg(width, width)) .style("width", "100%") .style("height", "auto") .style("padding", "10px") .style("box-sizing", "border-box") .style("font", "16px sans-serif"); let tree = (data) => d3 .tree() .size([2 * Math.PI, radius]) .separation((a, b) => (a.parent == b.parent ? 1 : 3) / a.depth)( d3.hierarchy(data) ); const g = svg.append("g"); const linkgroup = g .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const nodegroup = g .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3); function newdata(animate = true) { let root = tree(data); let links_data = root.links(); let links = linkgroup .selectAll("path") .data(links_data, (d) => d.source.data.name + "_" + d.target.data.name); links.exit().remove(); let newlinks = links .enter() .append("path") .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius(0.1) ); let t = d3 .transition() .duration(animate ? 400 : 0) .ease(d3.easeLinear) .on("end", function () { const box = g.node().getBBox(); svg .transition() .duration(1000) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); }); let alllinks = linkgroup.selectAll("path"); alllinks .transition(t) /*.attr( "stroke", d => d.target.data.children // ? radialColor(d.target.data.name) // : radialColor(d.source.data.name) // ) */ .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius((d) => d.y) ); let nodes_data = root.descendants().reverse(); let nodes = nodegroup.selectAll("g").data(nodes_data, function (d) { if (d.parent) { return d.parent.data.name + d.data.name; } return d.data.name; }); nodes.exit().remove(); let newnodes = nodes.enter().append("g"); let allnodes = animate ? nodegroup.selectAll("g").transition(t) : nodegroup.selectAll("g"); allnodes.attr( "transform", (d) => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ); newnodes .append("circle") .attr("r", (d) => d.data[select_atttibut] >= 0 ? select_atttibut == "population" ? Math.sqrt(d.data[select_atttibut] / (2 * diametre)) : Math.sqrt(d.data[select_atttibut] * 11 * diametre) : 8 ) .on("click", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; d.data.children = altChildren; d.data.altChildren = children; newdata(); }); nodegroup .selectAll("g circle") /* .attr("fill", d => d.data.children ? radialColor(d.data.name) : radialColor(d.parent.data.name) ) .attr("fill-opacity", 0.9) .attr("stroke", d => d.data.children ? radialColor(d.data.name) : radialColor(d.parent.data.name) ) .attr("stroke-width", 0.5) */ .attr("fill", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "#999" : color_circle(select_atttibut); }) .attr("opacity", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "1" : ".5"; }); //###################################################### if (button == "1") { newnodes .append("text") .attr("dy", "0.31em") .text(function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? d.data.name : select_atttibut == "population" ? d.data.name + " - " + d.data[select_atttibut].toLocaleString("fr-FR") + " hab" : d.data.name + " - " + d.data[select_atttibut].toLocaleString("fr-FR") + "%"; }) // .style("font", "30px sans-serif") .attr("stroke", "none") //.attr("fill", "red"); .attr("fill", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "lightblue" // ? "#666" : "#888"; }) .clone(true) .lower(); } nodegroup .selectAll("g text") .attr("x", (d) => (d.x < Math.PI === !d.children ? decalage : -decalage)) //6 //.attr("x", (d) => (d.x < Math.PI === !d.children ? 6 : -6)) .attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end" ) .attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null)); } newdata(false); document.body.appendChild(svg.node()); const box = g.node().getBBox(); //box.width = box.height = Math.max(box.width, box.height)*1.2; svg .remove() .attr("width", box.width) .attr("height", box.height) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); // ----------------------- Affichage du titre ------------------------------------- g.append("text") .attr("transform", "translate(" + 0 + "," + (width + 30) + ")") .style("text-anchor", "middle") .attr("font-size", 30) .attr("fill", "#222") .text( select_region.toUpperCase() + " (Département(s) : " + num_dept_liste + ") - " + select_atttibut ); return svg.node(); }32:T1349,tidyTree = { let tree = (data) => d3 .tree() .nodeSize([50, 70]) //.size([width, width / 1.5]) .separation((a, b) => (a.parent == b.parent ? 1 : 3))(d3.hierarchy(data)); const svg = d3 .select(DOM.svg(width, width)) .style("width", "100%") .style("height", "400em") .style("padding", "10px") .style("box-sizing", "border-box") .style("font", "16px sans-serif"); const g = svg.append("g"); const linkgroup = g .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const nodegroup = g .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3); function newdata(animate = true) { let root = tree(data); let links_data = root.links(); let links = linkgroup .selectAll("path") .data(links_data, (d) => d.source.data.name + "_" + d.target.data.name); links.exit().remove(); let newlinks = links.enter().append("path"); let t = d3 .transition() .duration(animate ? 400 : 0) .ease(d3.easeLinear) .on("end", function () { const box = g.node().getBBox(); svg .transition() .duration(1000) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); }); let alllinks = linkgroup.selectAll("path"); alllinks.transition(t).attr( "d", d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x) ); let nodes_data = root.descendants().reverse(); let nodes = nodegroup.selectAll("g").data(nodes_data, function (d) { if (d.parent) { return d.parent.data.name + d.data.name; } return d.data.name; }); nodes.exit().remove(); let newnodes = nodes.enter().append("g"); let allnodes = animate ? nodegroup.selectAll("g").transition(t) : nodegroup.selectAll("g"); allnodes.attr( "transform", (d) => ` translate(${d.y},${d.x}) ` ); newnodes .append("circle") .attr("r", (d) => d.data[select_atttibut] >= 0 ? select_atttibut == "population" ? Math.sqrt(d.data[select_atttibut] / (2 * diametre)) : Math.sqrt(d.data[select_atttibut] * 11 * diametre) : 8 ) .on("click", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; d.data.children = altChildren; d.data.altChildren = children; newdata(); }); nodegroup .selectAll("g circle") .attr("fill", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "#999" : color_circle(select_atttibut); }) .attr("opacity", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "1" : ".5"; }); if (button == "1") { newnodes .append("text") .attr("dy", "0.31em") .text(function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? d.data.name : select_atttibut == "population" ? d.data.name + " - " + d.data[select_atttibut].toLocaleString("fr-FR") + " hab" : d.data.name + " - " + d.data[select_atttibut].toLocaleString("fr-FR") + "%"; }) .clone(true) .lower(); //.attr("stroke", "white"); } nodegroup .selectAll("g text") .attr("x", (d) => (!d.children ? 6 : -6)) .attr("text-anchor", (d) => (!d.children ? "start" : "end")); //.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null); } newdata(false); document.body.appendChild(svg.node()); const box = g.node().getBBox(); //box.width = box.height = Math.max(box.width, box.height)*1.2; svg .remove() .attr("width", box.width) .attr("height", graphicheight) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); // ----------------------- Affichage du titre ------------------------------------- g.append("text") .attr("transform", "translate(" + 0 + "," + (width + 20) + ")") .style("text-anchor", "middle") .attr("font-size", 16) .attr("fill", "#222") .text( select_region.toUpperCase() + " (Département(s) : " + num_dept_liste + ") - " + select_atttibut ); return svg.node(); }33:T53a,data = { var newData = { //name: select_region + '(' + num_dept_liste + ')', name: "Quartiers Prioritaires", // value: "", children: [] }, levels = ["nom_dept", "lib_com"]; // For each data row, loop through the expected levels traversing the output tree data_qp_reg_dept_selected.forEach(function(d) { // Keep this as a reference to the current level var depthCursor = newData.children; // Go down one level at a time levels.forEach(function(property, depth) { // Look to see if a branch has already been created var index; depthCursor.forEach(function(child, i) { if (d[property] == child.name) index = i; }); // Add a branch if it isn't there if (isNaN(index)) { depthCursor.push({ name: d[property], children: [] }); index = depthCursor.length - 1; } // Now reference the new child array as we go deeper into the tree depthCursor = depthCursor[index].children; // This is a leaf, so add the last element to the specified branch if (depth === levels.length - 1) depthCursor.push({ name: d.lib_qp, population: d.population_qp, ratio_population: d.ratio_population, ratio_etranger: d.ratio_etranger }); }); }); return newData; }34:Td83,function circleLegend(selection, domain, range) { let instance = {}; // set some defaults var api = { domain: domain, // the values min and max range: range, // the circle area/size mapping values: [8, 34, 89], // values for circles x: 500, y: 500, suffix: '', // ability to pass in a suffix circleColor: '#888', textPadding: 80, textColor: '#454545', fontSize: 14, fontFamily: 'Arial', format: d3.format("~g"), title: 'Default title' }; const sqrtScale = d3 .scaleSqrt() .domain(api.domain) .range(api.range); instance.render = function() { const s = selection .append('g') .attr('class', 'legend-wrap') // push down to radius of largest circle .attr( 'transform', 'translate(0,' + sqrtScale(d3.max(Math.abs(api.values))) + ')' ); // append the values for circles s.append('g') .attr('class', 'values-wrap') .selectAll('circle') .data(api.values) .enter() .append('circle') .attr('class', d => 'values values-' + d) // .attr('r', d => Math.abs(sqrtScale(d))) .attr('cx', api.x) .attr('cy', d => api.y - Math.abs(sqrtScale(d))) .style('fill', 'none') .style('stroke', api.circleColor) .style('opacity', 0.9); // append some lines based on values s.append('g') .attr('class', 'values-line-wrap') .selectAll('.values-labels') .data(api.values) .enter() .append('line') .attr('x1', d => api.x + sqrtScale(d)) .attr( 'x2', api.x + Math.abs( sqrtScale( Math.max(Math.abs(api.domain[0]), Math.abs(api.domain[1])) ) ) + 14 ) .attr('y1', d => api.y - Math.abs(sqrtScale(d))) .attr('y2', d => api.y - Math.abs(sqrtScale(d))) .style('stroke', api.textColor) .style('stroke-dasharray', '2,2'); // append some labels from values s.append('g') .attr('class', 'values-labels-wrap') .selectAll('.values-labels') .data(api.values) .enter() .append('text') .attr( 'x', api.x + Math.abs( sqrtScale( Math.max(Math.abs(api.domain[0]), Math.abs(api.domain[1])) ) ) + 14 + api.textPadding ) .attr('y', d => api.y - Math.abs(sqrtScale(d)) + 4) .attr('shape-rendering', 'crispEdges') .style('text-anchor', 'end') .style('fill', api.textColor) .attr('font-family', api.fontFamily) .attr('font-size', api.fontSize + 10) .text(d => api.format(d) + api.suffix); s.append('g') .selectAll('text') .data(api.values) .enter() .append('text') //.attr('text', api.title) .attr('x', api.x) .attr('y', api.y + 20) .attr('font-family', api.fontFamily) .attr('font-size', api.fontSize + 14) .style('text-anchor', 'middle') .text(d => api.title); return instance; }; // convert api fields to setter functions for (let key in api) { instance[key] = getSet(key, instance).bind(api); } return instance; // https://gist.github.com/gneatgeek/5892586 function getSet(option, component) { return function(_) { if (!arguments.length) { return this[option]; } this[option] = _; return component; }; } }35:[{"id":"1cbc25610e7b54e670d677b154ce91b68187c19fb317b4fc2eff29835aabee0f0182266605644828db63d8aca1c3673a4c3a4cebe5d989127493aeefbcf4f128","href":"https://static.observableusercontent.com/files/1cbc25610e7b54e670d677b154ce91b68187c19fb317b4fc2eff29835aabee0f0182266605644828db63d8aca1c3673a4c3a4cebe5d989127493aeefbcf4f128","name":"DEMO_2020_V1_DEP@1.csv","type":"text/csv","lastModified":1739211201784.944,"size":269567},{"id":"2ff27aaf740ec247aea6c540409039e35015cfc528fedcb2570e424f5bfcd4508e93fbb4b836beda12c2b2ce4c434c59fb8669d8af2a6f48dff5e85a17dde6a6","href":"https://static.observableusercontent.com/files/2ff27aaf740ec247aea6c540409039e35015cfc528fedcb2570e424f5bfcd4508e93fbb4b836beda12c2b2ce4c434c59fb8669d8af2a6f48dff5e85a17dde6a6","name":"departements-region.csv","type":"text/csv","lastModified":1739211201784.944,"size":3118}] 2f:{"id":"6ce7e30d2dccd38e","slug":"quartiers-de-la-politique-de-la-ville","title":" Quartiers de la politique de la ville ","thumbnail":"fef31f63533fc79bb1f81f127b2dbb5127f6e2e39acc5ad5fd682476810429bf","access_level":"unlisted","create_time":"$D2025-02-10T18:13:21.784Z","update_time":"$D2025-02-26T23:59:21.710Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":3306,"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":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":" Quartiers de la politique de la ville ","cells":[{"id":4,"value":"md`# Quartiers de la politique de la ville `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2939,"value":"md`#### Visualisation radial tidy tree \n\n- le [jeu de données](https://www.insee.fr/fr/statistiques/4657100?sommaire=2500477#) correspond à la démographie 2020 de la base de données des quartiers de la politique de la ville \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1956,"value":"viewof select_atttibut = Inputs.select(\n [\"population\", \"ratio_population\", \"ratio_etranger\"],\n {\n value: \"population\",\n label: \"Choisissez un attribut\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1571,"value":"viewof select_region = Inputs.select(\n Array.from(new Set(table_reg_dept.map((d) => d.nom_region))).sort(),\n {\n value: \"Occitanie\",\n label: \"Choisissez une région.\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1581,"value":"viewof select_departement = Inputs.checkbox(\n Array.from(\n new Set(\n data_qp_reg\n .filter((d) => d.nom_region == select_region)\n .map((d) => d.nom_dept)\n )\n ).sort(),\n {\n label: \"Département\",\n sort: \"descending\",\n value: Array.from(\n new Set(\n data_qp_reg\n .filter((d) => d.nom_region == select_region)\n .map((d) => d.nom_dept)\n )\n )\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1927,"value":"viewof button = Inputs.radio(\n new Map([\n [\"Oui\", 1],\n [\"Non\", 0]\n ]),\n { value: 1, label: \"Etiquettes\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1943,"value":"viewof diametre = Inputs.range([1, 10], {\n label: \"Diamètre des cercles\",\n step: 1,\n placeholder: \"1–10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3015,"value":"viewof decalage = Inputs.range([0, 100], {\n label: \"décalage label\",\n step: 1,\n placeholder: \"0–100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1885,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1895,"value":"graph_svg2 = DOM.download(\n serialize(radialTree),\n 'QP_RT - ' +\n select_region.toUpperCase() +\n ' (' +\n num_dept_liste +\n '%) - ' +\n select_atttibut +\n ' - ' +\n button +\n '.svg',\n 'Download radial tree as svg'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2789,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1399,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"graph_svg = DOM.download(\n await serialize(tidyTree),\n 'QP_TT - ' +\n select_region.toUpperCase() +\n ' (' +\n num_dept_liste +\n '%) - ' +\n select_atttibut +\n ' - ' +\n button +\n '.svg',\n 'Download Tidy tree as svg'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3040,"value":"md`#### Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3057,"value":"data_qp = {\n const raw_data = (await FileAttachment(\"DEMO_2020_V1_DEP@1.csv\").csv()).sort(\n (a, b) => a.CODGEO.localeCompare(b.CODGEO)\n );\n\n const temp = raw_data.map((d) => {\n return {\n dept: d.DEP == \"02A\" || d.DEP == \"02B\" ? d.DEP.slice(1, 3) : +d.DEP,\n population_qp: +d.POP_MUN,\n lib_qp: d.LIBGEO,\n lib_com: d.LIB_COM,\n population_com: +d.POP_COM,\n ratio_population: +format(100 * (+d.POP_MUN / +d.POP_COM)),\n ratio_etranger: +format(d.TX_TOT_ET)\n };\n });\n\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1524,"value":"table_reg_dept = {\n const raw_data = await FileAttachment(\"departements-region.csv\").csv();\n\n const temp = raw_data.map((d) => {\n return {\n dept: d.num_dep == \"2A\" || d.num_dep == \"2B\" ? d.num_dep : +d.num_dep,\n nom_dept: d.dep_name,\n nom_region:\n (d.region_name != \"Guadeloupe\") &\n (d.region_name != \"Guyane\") &\n (d.region_name != \"La Réunion\") &\n (d.region_name != \"Martinique\") &\n (d.region_name != \"Mayotte\")\n ? d.region_name\n : \"DOM\"\n };\n });\n\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1529,"value":"merge = (a1, a2) =>\n a1.map(itm => ({\n ...a2.find(item => item.dept === itm.dept && item),\n ...itm\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1533,"value":"data_qp_reg = merge(data_qp, table_reg_dept)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3120,"value":"num_dept_liste = Array.from(\n new Set(\n data_qp_reg.filter((d) => d.nom_region == select_region).map((d) => d.dept)\n )\n).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1573,"value":"data_qp_reg_selected = data_qp_reg.filter((d) => d.nom_region == select_region)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2900,"value":"liste = Array.from(\n new Set(data_qp_reg_selected.map((d) => d.population_qp))\n).sort((a, b) => a - b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2916,"value":"data_qp_reg_selected.map((d) => ({\n population_qp: d.population_qp,\n lib_com: d.lib_com,\n lib_qp: d.lib_qp\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1628,"value":"data_qp_reg_dept_selected = data_qp_reg_selected.filter(\n country => select_departement.indexOf(country.nom_dept) != -1\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3163,"value":"md`#### json hierarchique à partir du csv `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1473,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3144,"value":"md`#### Configuration `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1881,"value":"format = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1294,"value":"radius = 700 //517","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1357,"value":"graphicheight = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"md`#### Fonctions `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2157,"value":"color_circle = d3\n .scaleOrdinal()\n .domain([\"population\", \"ratio_population\", \"ratio_etranger\"])\n .range([\"red\", \"green\", \"#dfc27d\"])\n .unknown(\"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2547,"value":"radialColor = d3.scaleOrdinal([\n \"#ffd65a\",\n \"#CF8140\",\n \"#9e2b25\",\n \"#4f1631\",\n \"#00364B\",\n \"#6EB3B7\",\n \"#7a918d\",\n \"#dfe2e1\",\n \"#4a9554\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2168,"value":"legend = {\n if ((select_atttibut != \"population\") & (button == \"0\")) {\n circleLegend(\n d3.select(radialTree),\n [0, 900 / diametre], // the values min and max\n [0, 100] // the circle area/size mapping\n )\n .x(-width * 0.6)\n .y(width * 0.8)\n .values([5, 20, 50])\n .circleColor(\"#333333\")\n .textColor(\"#333333\")\n .suffix(\"\")\n .fontSize(9)\n //.fontFamily('Arial')\n .textPadding(47)\n .title(\"Ratio en %\")\n .render();\n }\n if ((select_atttibut == \"population\") & (button == \"0\")) {\n circleLegend(\n d3.select(radialTree),\n [0, 200 * diametre], // the values min and max\n [0, 10] // the circle area/size mapping\n )\n .x(-width * 0.6)\n .y(width * 0.8)\n .values([1000, 10000, 20000])\n .circleColor(\"#333333\")\n .textColor(\"#333333\")\n .suffix(\"\")\n .fontSize(9)\n //.fontFamily('Arial')\n .textPadding(47)\n .title(\"Population\")\n .render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2165,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2721,"value":"Switch_dept_name_to_number = d3\n .scaleOrdinal()\n .domain(\n Array.from(\n new Set(\n data_qp_reg\n .filter((d) => d.nom_region == select_region)\n .map((d) => d.nom_dept)\n )\n ).sort()\n )\n .range(num_dept_liste)\n .unknown(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"md`#### librairies `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"import { rasterize, serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1200,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1922,"value":"md`#### Référence \n https://observablehq.com/@alibor/final-version\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"