2c:null 2d:["$","title",null,{"children":"Flux de déplacement domicile-travail en occitanie en 2014 | ToulouseDataviz | Observable"}] 32:T1d39,chart = { var path = d3.geoPath().projection(projection); const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const background = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "black"); const g = svg.append("g").attr("transform", `translate(${"0"}, ${"50"})`); // ---------------------------------------------------- Trace des flux inter communes ----------------------------------- g.selectAll("line1") .data(graph_data) .enter() .filter(function (d) { return d.travail_latitude != 0; }) .append("line") .attr("class", "line1") .attr("x1", (d) => d.x1) .attr("y1", (d) => d.y1) .attr("x2", (d) => d.x2) .attr("y2", (d) => d.y2) //.attr("stroke", "#999") //.attr("stroke", (d) => (select_distance == 0 ? "#999" : "none")) .attr("stroke", (d) => (select_distance == 0 ? "#999" : "#999")) .attr("stroke-width", (d) => lineStroke(d.sum_both_way)) .attr("opacity", 0.5); g.selectAll("line2") .data(graph_data) .enter() .filter(function (d) { return d.travail_latitude != 0; }) .append("line") .attr("class", "line2") .attr("x1", (d) => d.x1) .attr("y1", (d) => d.y1) .attr("x2", (d) => d.x2) .attr("y2", (d) => d.y2) .attr("stroke", (d) => (d.distance_oiseau_km < 10) & (select_distance == 1) ? "green" : (d.distance_oiseau_km >= 10) & (d.distance_oiseau_km < 20) & (select_distance == 2) ? "orange" : (d.distance_oiseau_km > 20) & (select_distance == 3) ? "red" : "none" ) .attr("stroke-width", (d) => lineStroke(d.sum_both_way)) .attr("opacity", 1); // ---------------------------------------------------- Trace du nom des communes---------------------------------------- g.selectAll("text") .data(centroid) .enter() .append("text") .attr( "x", (d) => projection([d.longitude_centroid, d.latitude_centroid])[0] ) .attr( "y", (d) => projection([d.longitude_centroid, d.latitude_centroid])[1] ) .attr("dy", "-1.1em") //.attr('stroke', 'Lightgrey ') .style("font", "10px sans-serif ") .style("fill", "Lightgrey") .style("text-anchor", "middle") .attr("opacity", 1) .text((d) => ville_label(d.nom_com)); // ---------------------------------------------------- Trace des cercles ----------------------------------- g.append("g") .selectAll("circle") .data(graph_data) .enter() .append("circle") .attr("id", (d) => d.insee) .attr( "cx", (d) => projection([+d.longitude_centroid, +d.latitude_centroid])[0] ) .attr( "cy", (d) => projection([+d.longitude_centroid, +d.latitude_centroid])[1] ) .attr("r", (d) => circle_size_2(+d["extra_2014_com"] + +d["2014_inter"])) // entrant + inter (dans la commune) //.attr('r', 2) // entrant + inter (dans la commune) .attr( "fill", (d) => // Jaune si le nb de déplacements sortants de la commune < nb de dépl entrants dans la commune // Rouge dans le cas inverse col(+d["extra_2014_com"], +d["intra_2014_com"]) //sortants et entrant ); /* g.append("g") .selectAll("circle") .data(occitanie_commune_contour.features) .enter() .append("circle") .attr("id", d => d.properties.INSEE_COM) .attr( 'cx', d => projection([d.properties.latitude, d.properties.longitude])[0] ) .attr( 'cy', d => projection([d.properties.latitude, d.properties.longitude])[1] ) .attr('r', .5) .attr('fill', 'lightgrey'); */ // ---------------------------------------------------- Trace de la légende des cercles -------------------- const legend = legendCircle() .scale(circle_size_2) .tickValues([500, 60000, 250000]) .tickFormat((d, i, e) => i === e.length - 1 ? d.toLocaleString("fr-FR") + " déplacements entrants et sortants de la commune" : d.toLocaleString("fr-FR") ) .tickSize(15); // defaults to 5 g.append("g") .attr("transform", `translate(${"50"}, ${"850"})`) .call(legend) .style("fill", "white"); // ---------------------------------------------------- Trace de la légende flux -------------------- const size = 15; const border_padding = 0; const item_padding = 0; const top_padding = 20; const text_offset = 15; const domain = [100, 1000, 5000]; g.append("g") .attr("transform", `translate(${"50"}, ${"750"})`) .selectAll("line_legend") .data(domain) .enter() .append("line") .attr("x1", border_padding) .attr("y1", (d, i) => top_padding + i * (size + item_padding)) .attr("x2", border_padding + 50) .attr("y2", (d, i) => top_padding + i * (size + item_padding)) .attr("dy", "-1.8em") .style("font", "10px sans-serif ") .attr("stroke", "white") .attr("stroke-width", (d, i) => lineStroke(d)) .attr("opacity", 1); g.append("g") .attr("transform", `translate(${"50"}, ${"750"})`) .selectAll("labels") .data(domain) .enter() .append("text") .attr("x", border_padding + 40 + size + item_padding) .attr( "y", (d, i) => border_padding + i * (size + item_padding) + size / 2 + text_offset ) .text((d) => d == domain[domain.length - 1] ? d.toLocaleString("fr-FR") + " déplacements" : d.toLocaleString("fr-FR") ) .attr("stroke", "none") .style("fill", "white") .attr("font-size", 10) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .style("font-family", "sans-serif"); // ---------------------------------------------------- Trace légende couleur des cercles -------------------- g.append("text") .attr("transform", `translate(${"50"}, ${"820"})`) .style("text-anchor", "left") .attr("font-size", "10") .attr("fill", "red") .text( "Cercle en rouge : nb de déplacements sortants > nb de déplacements entrants de la commune" ); g.append("text") .attr("transform", `translate(${"50"}, ${"835"})`) .style("text-anchor", "left") .attr("font-size", "10") .attr("fill", "yellow") .text( "Cercle en jaune : nb de déplacements sortants < nb de déplacements entrants de la commune" ); // ---------------------------------------------- Titre du graphique. -------------------------------- svg .append("text") .attr("transform", "translate(" + width / 2 + "," + 50 + ")") .style("text-anchor", "middle") .attr("font-size", (2 * width) / 100) .attr("fill", "white") .text("Les déplacements domicile-travail dans la région Occitanie en 2014"); // ---------------------------------------------- Legende des filtres distance ---------------------------- svg .append("text") .attr("transform", "translate(" + 50 + "," + 700 + ")") .style("text-anchor", "start") .attr("font-size", "20px") .attr( "fill", select_distance == 1 ? "green" : select_distance == 2 ? "orange" : "red" ) .text( select_distance == 1 ? "Distance inférieure à 10 km" : select_distance == 2 ? "Distance comprise entre 10 et 20 km" : select_distance == 3 ? "Distance supérieure à 20 km" : "" ); return svg.node(); }33:T6be,graph_data_ = { let commune = []; let travail_commune = []; for (let i = 0; i < merge_commune_centroid_travail.length; i++) { commune = merge_commune_centroid_travail[i].insee; travail_commune = merge_commune_centroid_travail[i].travail_insee; merge_commune_centroid_travail[i]['extra_2014_com'] = 0; merge_commune_centroid_travail[i]['intra_2014_com'] = 0; for (let j = 0; j < merge_commune_centroid_travail.length; j++) { if (merge_commune_centroid_travail[j].insee == commune) { console.log( 'commune =', commune, 'travail_commune =', merge_commune_centroid_travail[j].travail_insee ); merge_commune_centroid_travail[i]['extra_2014_com'] = merge_commune_centroid_travail[i]['extra_2014_com'] + +merge_commune_centroid_travail[j]['2014_extra_travail_commune']; } if (merge_commune_centroid_travail[j].travail_insee == commune) { merge_commune_centroid_travail[i]['intra_2014_com'] = merge_commune_centroid_travail[i]['intra_2014_com'] + +merge_commune_centroid_travail[j]['2014_extra_travail_commune']; } if ( (merge_commune_centroid_travail[j].insee == travail_commune) & (merge_commune_centroid_travail[j].travail_insee == commune) ) { merge_commune_centroid_travail[i].sum_both_way = +merge_commune_centroid_travail[i]['2014_extra_travail_commune'] + +merge_commune_centroid_travail[j]['2014_extra_travail_commune']; } } } return merge_commune_centroid_travail.sort( (a, b) => +b['2014_inter'] + b['extra_2014_com'] - (+a['2014_inter'] + a['extra_2014_com']) ); }34:T421,tooltip = { chart; const tooltip = d3 .select('body') .append('div') .style('position', 'absolute') .style('visibility', 'hidden') .text('ege'); d3.selectAll("circle") .on("mouseover", function(d) { d3.select(this).transition(); //.attr('r', 10); }) .on("mousemove", function(d) { return tooltip .style('background-color', 'white') .html( `\ commune: ${d.commune}
\ inter: ${d['2014_inter']}
\ extra: ${d['extra_2014_com']}
\ extra_all: ${d['2014_extra']}
\ intra : ${d['intra_2014_com']}
\ ` ) .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 20 + "px") .style("visibility", "visible"); }) .on("mouseout", function() { d3.select(this).transition(); //.attr('r', 5); return tooltip.html(``).style("visibility", "hidden"); }); // .on("click", function(d) { window.open(d.URL); }) }35:T6e9,legendCircle = function(context) { let scale, tickValues, tickFormat = d => d, tickSize = 5; function legend(context) { let g = context.select("g"); if (!g._groups[0][0]) { g = context.append("g"); } g.attr("transform", `translate(${[1, 1]})`); const ticks = tickValues || scale.ticks(); const max = ticks[ticks.length - 1]; g.selectAll("circle") .data(ticks.slice().reverse()) .enter() .append("circle") .attr("fill", "none") //.attr("stroke", "currentColor") .attr("stroke", "white") .attr("cx", scale(max)) .attr("cy", scale) .attr("r", scale); g.selectAll("line") .data(ticks) .enter() .append("line") //.attr("stroke", "currentColor") .attr("stroke", "white") .attr("stroke-dasharray", "4, 2") .attr("x1", scale(max)) .attr("x2", tickSize + scale(max) * 2) .attr("y1", d => scale(d) * 2) .attr("y2", d => scale(d) * 2); g.selectAll("text") .data(ticks) .enter() .append("text") .attr("font-family", "'Helvetica Neue', sans-serif") .attr("font-size", 10) .attr("dx", 3) .attr("dy", 4) .attr("x", tickSize + scale(max) * 2) .attr("y", d => scale(d) * 2) .text(tickFormat); } legend.tickSize = function(_) { return arguments.length ? ((tickSize = +_), legend) : tickSize; }; legend.scale = function(_) { return arguments.length ? ((scale = _), legend) : scale; }; legend.tickFormat = function(_) { return arguments.length ? ((tickFormat = _), legend) : tickFormat; }; legend.tickValues = function(_) { return arguments.length ? ((tickValues = _), legend) : tickValues; }; return legend; }36:[{"id":"e70ecd364d87b8ca7a4fcbcb720101506dab46ec0354850130e20181d62a83759006d89836b02e2ea4006ed9a1d9abd909dc62fddb2a0d1005d663764576a589","href":"https://static.observableusercontent.com/files/e70ecd364d87b8ca7a4fcbcb720101506dab46ec0354850130e20181d62a83759006d89836b02e2ea4006ed9a1d9abd909dc62fddb2a0d1005d663764576a589","name":"centroide_occ+@1.csv","type":"text/csv","lastModified":1738687616409.697,"size":354196},{"id":"98a2b50de99c18328974c8a655fae1acf98d907cd835106417bb59ecc3973f7dbf950c12172efe6d0cf44ad627e756db303983687f5df46616677a50465b9672","href":"https://static.observableusercontent.com/files/98a2b50de99c18328974c8a655fae1acf98d907cd835106417bb59ecc3973f7dbf950c12172efe6d0cf44ad627e756db303983687f5df46616677a50465b9672","name":"raw_flux_communes_(1).csv","type":"text/csv","lastModified":1738687616409.697,"size":495600}] 30:{"id":"f771196e8dac8d06","slug":"flux-de-deplacement-domicile-travail-en-occitanie","title":" Flux de déplacement domicile-travail en occitanie en 2014 ","thumbnail":"088f997fb4f03f8ce0fef60b2858b50a38b541c91f84dc13c529682562be85d3","access_level":"unlisted","create_time":"$D2025-02-04T16:46:56.409Z","update_time":"$D2025-02-27T00:11:38.387Z","view_time":null,"first_public_time":null,"fork":{"id":"e9fcc283c4bd993d","slug":"flux-deplacement-cartogramme-centroid-v2-0","title":" Flux déplacement cartogramme centroid","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"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":2953,"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":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":" Flux de déplacement domicile-travail en occitanie en 2014 ","cells":[{"id":4,"value":"paragraph1 = md`\n# Flux de déplacement domicile-travail en occitanie en 2014 \n## Visualisation cartographique\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"md`#### Graphique \n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"viewof select_circle_min = slider({\n title: \"Réglage du diamètre des cercles rouges\",\n min: 0.25,\n max: 5,\n step: 0.01,\n value: 0.69\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"viewof select_circle_max = slider({\n title: \"Réglage du diamètre des cercles jaunes\",\n min: 10,\n max: 40,\n step: 0.01,\n value: 12.28\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2139,"value":"viewof select_distance = radio({\n title: \"\",\n description: \"Colorier les flux en fonction de la distance\",\n options: [\n { label: \"Pas de couleur\", value: 0 },\n { label: \"Moins de 10 km\", value: 1 },\n { label: \"Entre 10 et 20 km\", value: 2 },\n { label: \"Plus de 20 km\", value: 3 }\n ],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1951,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"graph_png = DOM.download(await rasterize(chart), null, \"Download as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"graph_svg = DOM.download(\n await serialize(chart),\n 'chart_flux.svg',\n 'Download as svg'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"md`#### Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1332,"value":"raw_flux_commune = FileAttachment(\"raw_flux_communes_(1).csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2632,"value":"raw_centroid = FileAttachment(\"centroide_occ+@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2934,"value":"md`#### Traitement data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"// Suppression des outliers!\nraw_flux_commune_filter = raw_flux_commune\n .sort((a, b) => +b[\"sum_both_way\"] - +a[\"sum_both_way\"])\n .filter((d) => d.commune != \"BORDEAUX\")\n .filter((d) => d.commune != \"AGEN\")\n .filter((d) => d.travail_commune != \"BORDEAUX\")\n .filter((d) => d.travail_commune != \"AGEN\")\n .filter((d) => d.commune != \"ROISSY-EN-FRANCE\")\n .filter((d) => d.travail_commune != \"ROISSY-EN-FRANCE\")\n .filter(\n (d) =>\n (d.commune != \"CHIRAC\") &\n (d.commune != \"LAPANOUSE\") &\n (d.commune != \"VALROUFIE\") &\n (d.commune != \"BALSAC\") &\n (d.commune != \"MUS\") &\n (d.commune != \"LAGARRIGUE\")\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2205,"value":"centroid = raw_centroid\n .map(function(e) {\n return {\n longitude_centroid: e.longitude_centroid,\n latitude_centroid: e.latitude_centroid,\n insee: parseInt(e.insee).toString(),\n insee_dep: e.INSEE_DEP,\n insee_reg: e.INSEE_REG,\n nom_com: e.NOM_COM_M\n };\n })\n .sort((a, b) => +a['insee'] - +b['insee'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2378,"value":"centroid_travail = raw_centroid\n .map(function (e) {\n return {\n longitude_centroid_travail: e.longitude_centroid,\n latitude_centroid_travail: e.latitude_centroid,\n travail_insee: parseInt(e.insee).toString(),\n insee_dep_travail: e.INSEE_DEP,\n insee_reg_travail: e.INSEE_REG\n };\n })\n .sort((a, b) => +a[\"travail_insee\"] - +b[\"travail_insee\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"merge_commune_centroid = merge_1(raw_flux_commune_filter, centroid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2222,"value":"merge_1 = (a1, a2) =>\n a1.map(itm => ({\n ...a2.find(item => item.insee === itm.insee && item),\n ...itm\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2243,"value":"merge_commune_centroid_travail = merge_2(merge_commune_centroid, centroid_travail)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2235,"value":"merge_2 = (a1, a2) =>\n a1.map(itm => ({\n ...a2.find(item => item.travail_insee === itm.travail_insee && item),\n ...itm\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"// pour les légendes sur le graphique\nvilles = [\n \"PERPIGNAN\",\n \"TOULOUSE\",\n \"MONTPELLIER\",\n \"RODEZ\",\n \"CARCASONNE\",\n \"BEZIERS\",\n \"NIMES\",\n \"FOIX\",\n \"AUCH\",\n \"MENDE\",\n \"MILLAU\",\n \"TARBES\",\n \"MONTAUBAN\",\n \"ALBI\",\n \"CASTRES\",\n \"CARCASSONNE\",\n \"ALES\",\n \"CAHORS\",\n \"NARBONNE\",\n \"PAMIERS\",\n \"COLOMIERS\",\n \"BLAGNAC\",\n \"BALMA\",\n \"LABEGE\",\n \"CUGNAUX\",\n \"TOURNEFEUILLE\",\n \"L'UNION\",\n \"AGDE\",\n \"SETE\",\n \"LATTES\",\n \"MAUGIO\",\n \"ELNE\",\n \"FIGEAC\",\n \"CERET\",\n \"RIVESALTES\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":785,"value":"md`##### Calcul du nombre de déplacements par flux`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2405,"value":"graph_data = graph_data_.filter(d => (d.x2 >= 0) & (d.y2 >= 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"md`##### Calcul des coordonnées des lignes de flux`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"{\n for (var i = 0; i < merge_commune_centroid_travail.length; i++) {\n var pr = projection([\n merge_commune_centroid_travail[i].longitude_centroid,\n merge_commune_centroid_travail[i].latitude_centroid\n ]);\n merge_commune_centroid_travail[i].x1 = pr[0];\n merge_commune_centroid_travail[i].y1 = pr[1];\n pr = projection([\n merge_commune_centroid_travail[i].longitude_centroid_travail,\n merge_commune_centroid_travail[i].latitude_centroid_travail\n ]);\n merge_commune_centroid_travail[i].x2 = pr[0];\n merge_commune_centroid_travail[i].y2 = pr[1];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"printTable(graph_data.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"md`## Configuration \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1052,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"function col(intra, extra) {\n var cl;\n if (intra > extra) {\n cl = 'red';\n } else {\n cl = 'yellow'; // '#2171b5'; // blue\n }\n return cl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"lineStroke = d3\n .scaleLinear()\n .range([.5, 15])\n .domain([0, 10000])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":976,"value":"circle_size_2 = d3\n .scaleSqrt()\n .domain([\n 0,\n d3.max(merge_commune_centroid_travail, d => +d['intra_2014_com'] + +d['2014_inter'])\n ])\n .range([select_circle_min, select_circle_max])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"projection = d3\n //.geoMercator()\n .geoConicConformal()\n .center([2.35, 43.21])\n .scale(15000)\n .translate([(1 * width) / 2, (1 * height) / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"ville_label = d3.scaleOrdinal(villes, villes).unknown(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"$35","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":32,"value":"d3 = require(\"d3@5\")","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":31,"value":"import { select, color, radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1116,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"