2c:["$","title",null,{"children":"Géo-visualiser des données sur la crise des réfugiés Syriens- v1.5.2 | Vincent VIVANLOC | Observable"}] 31:T49c,chart = { const countryLabels = fluxMigrants .sort((a, b) => b.EU_27 - a.EU_27) .slice(0, 25); const domainX = countryLabels.map((d) => +d["Nombre de migrants"]); const domainY = countryLabels.map((d) => d["Pays de destination"]); // prevent clipping on right side const maxX = Math.max(...domainX) * 1.2; const plot = Plot.plot({ width: width * row_length, height: height / row_tickness, marginLeft: 100, marginBottom: 50, x: { axis: "bottom", label: "Nombre de migrants", axis: true, domain: [0, maxX], grid: select_etiquette === "oui" }, y: { label: "Pays de destination", domain: domainY, grid: false }, marks: [ Plot.barX(countryLabels, { x: "Nombre de migrants", y: "Pays de destination", rx: 0, fill: "#44F" }), Plot.text(countryLabels, { x: "Nombre de migrants", y: "Pays de destination", text: (d) => select_etiquette === "non" ? toFrenchNumber(+d["Nombre de migrants"]) : "", textAnchor: "start", dx: 10 }) ] }); return plot; }32:T6fc,function renderLabels( svg, projection, labelFunctor, valueFunctor, showValues = true, fillColor = "black", showCountryName = true ) { var text = svg .selectAll("text") .data(data_world) .enter() .append("text") .attr("font-size", 14) .attr("dx", "-1em") .style("fill", fillColor) .attr("fill", fillColor) .attr("id", (d) => d.properties.Destination) .attr( "x", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[0] ) .attr( "y", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[1] ); if (showValues) { text .append("tspan") .text((d) => valueFunctor(d)) .attr("class", "title") .attr( "x", (d) => projection([ d.properties.longitude_pays, d.properties.latitude_pays ])[0] ) .attr( "y", (d) => projection([ d.properties.longitude_pays, d.properties.latitude_pays ])[1] ) .attr("dx", "-1.25em") .attr("dy", "1.0em") .attr("font-size", "1.0em"); } if (showCountryName) { text .append("tspan") .text((d) => labelFunctor(d)) .attr("class", "pays") .attr( "x", (d) => projection([ d.properties.longitude_pays, d.properties.latitude_pays ])[0] ) .attr( "y", (d) => projection([ d.properties.longitude_pays, d.properties.latitude_pays ])[1] ) .attr("dx", (d) => ` -${labelFunctor(d)?.length * 0.25}em`) .attr("dy", "0em") .attr("font-size", "0.9em"); } }33:T9ca,carte_nb = { const height = width / 1.4; var mapWidth = width / 20; // Position sur le graphique var mapHeight = height * 1.15; const svg = d3 .select(DOM.svg(width, height)) .attr("id", "carte") .style("width", "100%") .style("height", "auto"); var projection = buildEuropeProjection(width) .rotate([-10, 0]) .translate([width / 2, height / 2]) .clipExtent([ [0, 0], [width, height] ]) .precision(0.2); var path = d3.geoPath().projection(projection); // ----------------------- Affichage de la legende distance ----------------------------- const scaleBarWapo = d3 .geoScaleBar() .projection(projection) .size([width, height]) .left(0.01) .top(0.85) //.units(d3.geoScaleMiles) // The units will be miles instead of kilometers .distance(0, 1000) // The distance of the scale bar .label("500 km") // The label on top of the scale bar //null .labelAnchor("middle") // The position of the label (you can also pass "start" and "end") .tickSize(1) // The height of the bar .tickValues(null); // The tick values below the bar will be removed .tickValues([0, 500]) // ----------------------- Affichage des contours de chaque pays----------- svg .selectAll("path") .data(data_world_contour.features) .enter() .append("path") .attr("d", path) .style("fill", (d) => (d.properties.EU_schengen_ != 0 ? "#d5d5d5" : "none")) .style("stroke", "grey") .append("title") .text( (d) => ISOAlpha_to_frenchLabel(d.properties.su_a3) + " - " + d.properties["origine_syria_" + select_année] ); // ----------------------- Affichage des nombres de migrants pour chaque pays----------- renderLabels( svg, projection, (d) => d.properties.EU_schengen_ != 0 ? ISOAlpha_to_frenchLabel(d.properties.su_a3) : d.properties.name === "Syria" ? "SYRIE" : "", (d) => d.properties.EU_schengen_ != 0 ? toFrenchNumber(d.properties["origine_syria_" + select_année]) : "", true, "black", select_display_country_labels === "oui" ); // ----------------------- Affichage du titre ------------------------------------- renderTitle(svg, "Nombre de réfugiés Syriens en Europe en " + select_année); // ----------------------- Affichage echelle des distances ------------------------------------- svg.append("g").call(scaleBarWapo); return svg.node(); }34:Tc06,carte_nb_circle = { const height = width / 1.4; var mapWidth = width / 20; // Position sur le graphique var mapHeight = height * 1.15; const svg = d3 .select(DOM.svg(width, height)) .attr("id", "carte") .style("width", "100%") .style("height", "auto"); // ------------------------------------------- Projection ------------------------ var projection = buildEuropeProjection(width) .rotate([-10, 0]) .translate([width / 2, height / 2]) .clipExtent([ [0, 0], [width, height] ]) .precision(0.2); var path = d3.geoPath().projection(projection); const scaleBarWapo = d3 .geoScaleBar() .projection(projection) .size([mapWidth, mapHeight]) .left(1) .top(0.85) //.units(d3.geoScaleMiles) // The units will be miles instead of kilometers .distance(0, 500) // The distance of the scale bar .label("500 km") // The label on top of the scale bar //null .labelAnchor("middle") // The position of the label (you can also pass "start" and "end") .tickSize(1) // The height of the bar .tickValues(null); // The tick values below the bar will be removed .tickValues([0, 500]) // ----------------------- Affichage des contours de chaque pays----------- svg .selectAll("path") .data(data_world_contour.features) .enter() .append("path") .attr("d", path) .style("fill", (d) => (d.properties.EU_schengen_ != 0 ? "#d9d9d9" : "none")) .style("stroke", "grey"); // ----------------------- Affichage des cercles pour chaque pays----------- svg .selectAll("circle") .data(data_world_contour.features) .enter() .append("circle") .attr("id", (d) => d.properties.Destination) .attr( "cx", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[0] ) .attr( "cy", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[1] ) .attr("r", (d) => d.properties.EU_schengen_ != 0 ? Math.sqrt(+d.properties["origine_syria_" + select_année] / 43) : 0 ) .style("fill", "#737373") .style("stroke", "black") .attr("opacity", 0.5); // ----------------------- Affichage des nombres de migrants pour chaque pays----------- renderLabels( svg, projection, (d) => d.properties.EU_schengen_ != 0 ? ISOAlpha_to_frenchLabel(d.properties.su_a3) : d.properties.name === "Syria" ? "SYRIE" : "", (d) => d.properties.EU_schengen_ != 0 ? toFrenchNumber(d.properties["origine_syria_" + select_année]) : "", select_etiquette_circle === "oui", "black", select_display_country_labels === "oui" ); // ----------------------- Affichage du titre ------------------------------------- renderTitle(svg, "Nombre de réfugiés Syriens en Europe en " + select_année); // ----------------------- Affichage echelle des distances ------------------------------------- svg.append("g").call(scaleBarWapo); return svg.node(); }35:Tcf9,carte_nb_circle_ratioPop = { const height = width / 1.4; var mapWidth = width / 20; //Position sur le graphique var mapHeight = height * 1.15; const svg = d3 .select(DOM.svg(width, height)) .attr("id", "carte") .style("width", "100%") .style("height", "auto"); // ------------------------------------------- Projection ------------------------ var format = d3.format(".0f"); var projection = buildEuropeProjection(width) .rotate([-10, 0]) .translate([width / 2, height / 2]) .clipExtent([ [0, 0], [width, height] ]) .precision(0.2); var path = d3.geoPath().projection(projection); const scaleBarWapo = d3 .geoScaleBar() .projection(projection) .size([mapWidth, mapHeight]) .left(1) .top(0.85) //.units(d3.geoScaleMiles) // The units will be miles instead of kilometers .distance(0, 500) // The distance of the scale bar .label("500 km") // The label on top of the scale bar //null .labelAnchor("middle") // The position of the label (you can also pass "start" and "end") .tickSize(1) // The height of the bar .tickValues(null); // The tick values below the bar will be removed .tickValues([0, 500]) // ----------------------- Affichage des contours de chaque pays----------- svg .selectAll("path") .data(data_world_contour.features) .enter() .append("path") .attr("d", path) .style("fill", (d) => (d.properties.EU_schengen_ != 0 ? "#d9d9d9" : "none")) .style("stroke", "grey"); // ----------------------- Affichage des cercles pour chaque pays----------- svg .selectAll("circle") .data(data_world_contour.features) .enter() .append("circle") .attr("id", (d) => d.properties.Destination) .attr( "cx", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[0] ) .attr( "cy", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[1] ) .attr("r", (d) => d.properties.EU_schengen_ != 0 ? 0.5 * Math.sqrt( (1000000 * +d.properties["origine_syria_" + select_année]) / d.properties.pop_est ) : 0 ) .style("fill", "#737373") .style("stroke", "black") .attr("opacity", 0.5); // ----------------------- Affichage des nombres de migrants pour chaque pays----------- renderLabels( svg, projection, (d) => d.properties.EU_schengen_ != 0 ? ISOAlpha_to_frenchLabel(d.properties.su_a3) : d.properties.name === "Syria" ? "SYRIE" : "", (d) => d.properties.EU_schengen_ != 0 ? toFrenchNumber( (1000000 * +d.properties["origine_syria_" + select_année]) / d.properties.pop_est ) : "", select_etiquette_circle_2 === "oui", "black", select_display_country_labels === "oui" ); // ----------------------- Affichage du titre ------------------------------------- renderTitle( svg, "Nombre de réfugiés Syriens / million d'habitants en Europe en " + select_année ); // ----------------------- Affichage echelle des distances ------------------------------------- svg.append("g").call(scaleBarWapo); return svg.node(); }36:T1032,carte_custom_Europe = { // weird responsive design calculation const svgWidth = 1100; const projWidth = 1400; const svg = d3 .select(DOM.svg(svgWidth, height)) .attr("id", "carte") .style("width", "100%") .style("height", "auto"); // ------------------------------------------- Projection ------------------------ var projection = buildEuropeProjection(projWidth) .rotate([-20, 0]) .translate([650, 280]) .clipExtent([ [0, 0], [projWidth, height] ]) .precision(0.2); var path = d3.geoPath().projection(projection); const scaleBarWapo = d3 .geoScaleBar() .projection(projection) .size([projWidth, 800]) .left(0.6) .top(0.13) //.units(d3.geoScaleMiles) // The units will be miles instead of kilometers .distance(0, 500) // The distance of the scale bar .label("500 km") // The label on top of the scale bar //null .labelAnchor("middle") // The position of the label (you can also pass "start" and "end") .tickSize(1) // The height of the bar .tickValues(null); // The tick values below the bar will be removed .tickValues([0, 500]) // -------------------------------- Couleur du fond de carte -------------------- const background = svg .append("rect") .attr("width", svgWidth) .attr("height", height) .attr("fill", fond_color); // ----------------------- Affichage des contours de chaque pays--------------- svg .selectAll("path") .data(data_world) .enter() .append("path") .attr("d", path) .style("fill", (d) => d.properties.EU_schengen_ !== 0 ? pays_colors : d.properties.name === "Syria" ? Syria_color : pays_autres_colors ) .style("stroke", pays_colors == "noir" ? "#969696" : "black") .append("title") .text((d) => ISOAlpha_to_frenchLabel(d.properties.su_a3, d.properties.name) ); // ----------------------- Affichage des cercles nombre de migrants pour chaque pays----------- svg .selectAll("circle") .data(data_world_contour.features) .enter() .append("circle") .attr("id", (d) => d.properties.Destination) .attr( "cx", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[0] ) .attr( "cy", (d) => projection([d.properties.longitude_pays, d.properties.latitude_pays])[1] ) .attr("r", (d) => d.properties.EU_schengen_ != 0 ? Math.sqrt( (+d.properties["origine_syria_" + select_année] / 1000) * diametre_circle ) : 0 ) .style("fill", circle_color) .style("stroke", pays_colors == "noir" ? "white" : "black") .append("title") .text( (d) => ISOAlpha_to_frenchLabel(d.properties.su_a3, d.properties.name) + " - " + toFrenchNumber(d.properties["origine_syria_" + select_année]) + " " + "réfugiés" ); // ----------------------- Affichage des noms des pays & nombres de migrants pour chaque pays----------- renderLabels( svg, projection, (d) => d.properties.EU_schengen_ != 0 ? ISOAlpha_to_frenchLabel(d.properties.su_a3, d.properties.name) : d.properties.name === "Syria" ? "SYRIE" : "", (d) => d.properties.EU_schengen_ != 0 ? toFrenchNumber(d.properties["origine_syria_" + select_année]) : "", select_etiquette_circle_4, circle_color === "noir" ? "white" : "black", select_etiquette_circle_3 === "oui" ); // ----------------------- Affichage du titre ------------------------------------- renderTitle(svg, select_titre); // ----------------------- Echelle distance -------------------------- const scale = svg .append("g") .call(scaleBarWapo) .style("color", "black") .style("fill", "black") .attr("id", "scaleBar"); if (showLegend) { scale .append("g") .call( renderCircleLegend([ 1000, 10000, roundMostSignificant(nbMaxRéfugiés(true)) ]) ); } return svg.node(); }37:T1375,carte_custom_EMEA = { const svgWidth = 1100; const projWidth = 1400; const svg = d3 .select(DOM.svg(width, height)) .attr("id", "carte") .style("width", "100%") .style("height", "auto"); const projection_large = buildEMEAProjection(400) .rotate([-40, 0]) .translate([width * 0.8, 420]) .clipExtent([ [0, 0], [width, height] ]) .precision(0.2); const path = d3.geoPath().projection(projection_large); const scaleBarWapo = d3 .geoScaleBar() .projection(projection_large) .size([projWidth, 800]) .left(0.82) .top(0.15) //.units(d3.geoScaleMiles) // The units will be miles instead of kilometers .distance(500) // The distance of the scale bar .label("500 km") // The label on top of the scale bar //null .labelAnchor("middle") // The position of the label (you can also pass "start" and "end") .tickSize(1) // The height of the bar .tickValues(null); // The tick values below the bar will be removed .tickValues([0, 500]) // -------------------------------- Couleur du fond de carte -------------------- const background = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", fond_color); // ----------------------- Affichage des contours de chaque pays--------------- svg .selectAll("path") .data(data_world) .enter() .append("path") .attr("d", path) .style("fill", (d) => d.properties.EU_schengen_ !== 0 ? pays_colors : d.properties.name === "Syria" ? Syria_color : pays_autres_colors ) .style("stroke", pays_colors == "noir" ? "#969696" : "black") .append("title") .text((d) => ISOAlpha_to_frenchLabel(d.properties.su_a3, d.properties.name) ); // ----------------------- Affichage des cercles nombre de migrants pour chaque pays----------- svg .selectAll("circle") .data(data_world_contour.features) .enter() .append("circle") .attr("id", (d) => d.properties.Destination) .attr( "cx", (d) => projection_large([ d.properties.longitude_pays, d.properties.latitude_pays ])[0] ) .attr( "cy", (d) => projection_large([ d.properties.longitude_pays, d.properties.latitude_pays ])[1] ) .attr("r", (d) => pays_etendue == "Europe" ? d.properties.EU_schengen_ != 0 ? Math.sqrt( (+d.properties["origine_syria_" + select_année] / 1000) * diametre_circle ) : 0 : Math.sqrt( (+d.properties["origine_syria_" + select_année] / 1000) * diametre_circle ) ) .style("fill", circle_color) .style("stroke", pays_colors == "noir" ? "white" : "black") /* .style( 'stroke', circle_color == 'aucune' ? '#969696' : circle_color )*/ .append("title") .text( (d) => ISOAlpha_to_frenchLabel(d.properties.su_a3, d.properties.name) + " - " + toFrenchNumber(d.properties["origine_syria_" + select_année]) + " " + "réfugiés" ); // ----------------------- Affichage des noms des pays & nombres de migrants pour chaque pays----------- const labelText = (d) => { let _labelText = ""; if (d.properties["origine_syria_" + select_année] > 0) { _labelText = ISOAlpha_to_frenchLabel( d.properties.su_a3, d.properties.name ); /* .slice(0, 3) .toUpperCase();*/ } if (d.properties.name === "Syria") { _labelText = "SYRIE"; } if (_labelText.startsWith("Royaume-Uni")) { _labelText = "Royaume-Uni"; } return _labelText; }; renderLabels( svg, projection_large, labelText, (d) => { if (pays_etendue == "Europe") { return d.properties.EU_schengen_ != 0 ? toFrenchNumber(d.properties["origine_syria_" + select_année]) : ""; } else { return d.properties["origine_syria_" + select_année] > 0 ? toFrenchNumber(d.properties["origine_syria_" + select_année]) : ""; } }, select_etiquette_circle_4, circle_color === "noir" ? "white" : "black", select_etiquette_circle_3 === "oui" ); // ----------------------- Affichage du titre ------------------------------------- renderTitle( svg, pays_etendue === "Europe" ? select_titre : select_titre.replace("en Europe", "dans le monde") ); // ----------------------- Echelle distance -------------------------- const scale = svg.append("g").call(scaleBarWapo); if (showLegend) { scale .append("g") .call( renderCircleLegend([ 1000, 10000, 100000, 1000000, roundMostSignificant(nbMaxRéfugiés(pays_etendue === "Europe")) ]) ); } return svg.node(); }38:T76c,md` ### REFERENCES - Source des données : https://www.un.org/en/development/desa/population/migration/data/index.asp - Liste-des-pays-avec-visa-schengen : https://www.schengenvisainfo.com/fr/liste-des-pays-avec-visa-schengen/ - Contours des pays du monde : https://geojson-maps.ash.ms/ - Liste des pays - Union européenne (UE) : https://www23.statcan.gc.ca/imdb/p3VD_f.pl?Function=getVD&TVD=141329 - Légende cercle : https://observablehq.com/@harrystevens/circle-legend#buildCircleLegend - Bar chart (This chart shows the relative frequency of letters in the English language) :https://observablehq.com/@d3/horizontal-bar-chart - Echelle de distance : https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar - https://observablehq.com/@d3/axis-ticks - https://observablehq.com/@d3/world-map-svg - Projection : https://observablehq.com/@nikita-sharov/map-projection-classification - Projection : mbostock https://observablehq.com/@d3/conic-conformal - Projection : mbostock https://github.com/d3/d3-geo-projection - GitHub neocarto : https://neocarto.github.io/syrians/ - Projection : https://observablehq.com/@toja/five-map-projections-for-europe - https://observablehq.com/@observablehq/inputs?collection=@observablehq/views-interactivity Références internes auteur : -/SFR Cloud/2-TDV-MEETUP/2-TDV/PLetC/Migration_exercice - SFR Cloud/3-JUPYTER_NOTEBOOK/CARTES/carte_monde.ipynb A noter que les données des nations unis sont prétraitées avant d'être chargées dans ce notebook. le traitement consiste à ajouter les centres géographiques des pays (lat/long), les codes iso des pays et l’appartenance des pays à l’EU et à l’espace schengen. Puis d'associer toutes ces informations au fichier geojson des contours des pays (https://geojson-maps.ash.ms/) avec QGIS. Pour plus d'informations : me contacter `39:T6ef,buildCircleLegend = 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]})`); g.attr("transform", `translate(${[-50, 20]})`); 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("cx", scale(max)) .attr("cy", scale) .attr("r", scale); g.selectAll("line") .data(ticks) .enter() .append("line") .attr("stroke", "currentColor") .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", 11) .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; }3a:[{"id":"f6c7e1db0a9228fcb85c44264fa493b273dad163a3d4109f7089566e4a55f921592ed92d9cf075bd85187b7eef999508b7cd516db972d691d327548b1a02e85a","href":"https://static.observableusercontent.com/files/f6c7e1db0a9228fcb85c44264fa493b273dad163a3d4109f7089566e4a55f921592ed92d9cf075bd85187b7eef999508b7cd516db972d691d327548b1a02e85a","name":"world.json","type":"application/json","lastModified":1646567151784.925,"size":7525414},{"id":"630d5202c4bc1cab0e16b49aafdbb535cbe5a69eb35f11c5e6161460ebf0e680b46d6baf572b95c7c55af230122b5698d010d527258e6e7b0690f758691b761f","href":"https://static.observableusercontent.com/files/630d5202c4bc1cab0e16b49aafdbb535cbe5a69eb35f11c5e6161460ebf0e680b46d6baf572b95c7c55af230122b5698d010d527258e6e7b0690f758691b761f","name":"world-110m.json","type":"application/json","lastModified":1646567151784.925,"size":732919},{"id":"4df9254b25db387177f1aab0bffb16b6a3d8bc77e98031f47db21855270187b3da6ea652c015ed6189dceb2b505f6890d870ba67ba9a4aeeadbecf4bba4f7cfc","href":"https://static.observableusercontent.com/files/4df9254b25db387177f1aab0bffb16b6a3d8bc77e98031f47db21855270187b3da6ea652c015ed6189dceb2b505f6890d870ba67ba9a4aeeadbecf4bba4f7cfc","name":"country-codes_csv_extract@1.csv","type":"text/csv","lastModified":1646567151784.925,"size":20472},{"id":"c99f78990d647acde67f1ec04c28e3e8f389b648872b8ddb9a8359a0bd4f8fc274982b1b9db8a3d256da9c98be08fa51939df705d5ae4b0c5a78fc6733d6bb2b","href":"https://static.observableusercontent.com/files/c99f78990d647acde67f1ec04c28e3e8f389b648872b8ddb9a8359a0bd4f8fc274982b1b9db8a3d256da9c98be08fa51939df705d5ae4b0c5a78fc6733d6bb2b","name":"Capture_vidéo.JPG","type":"image/jpeg","lastModified":1646567151784.925,"size":45558},{"id":"67869293bae9f71c0eb9d5d253b87333b9dd6fb439491310e2007e41742bfc7a891aab93fd3fc71afb38eb492054b1ac87483ad43f2e95818e1e8dfeb8994280","href":"https://static.observableusercontent.com/files/67869293bae9f71c0eb9d5d253b87333b9dd6fb439491310e2007e41742bfc7a891aab93fd3fc71afb38eb492054b1ac87483ad43f2e95818e1e8dfeb8994280","name":"carte(3).png","type":"image/png","lastModified":1646567151784.925,"size":142908},{"id":"9381ba6879133d7c63c623bde7393030cffe9a4c01987af82c6d1b6b0c11b27b0bb05b0c602439ad0d53b84d1c0943873892f93492ca0b8147289d352f010a87","href":"https://static.observableusercontent.com/files/9381ba6879133d7c63c623bde7393030cffe9a4c01987af82c6d1b6b0c11b27b0bb05b0c602439ad0d53b84d1c0943873892f93492ca0b8147289d352f010a87","name":"carte(2).png","type":"image/png","lastModified":1646567151784.925,"size":135809}] 2f:{"id":"cac3d62bfa17c3cb","slug":"geo-visualiser-des-donnees-sur-la-crise-des-refugies-syrien","title":" Géo-visualiser des données sur la crise des réfugiés Syriens- v1.5.2 ","thumbnail":"105c78561974b0d94040cbfc6f8a88c0559d7de220265d57085288f425b02d29","access_level":"public","create_time":"$D2022-03-06T11:45:51.784Z","update_time":"$D2022-09-29T23:14:14.633Z","view_time":null,"first_public_time":"$D2022-09-20T23:09:47.051Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"66fa4f7125e7dd55","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":"starter_2024","bio":"Some viz for ToulouseDataViz"},"version":7267,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null,"bio":"Some viz for ToulouseDataViz"}],"members":[{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":" Géo-visualiser des données sur la crise des réfugiés Syriens- v1.5.2 ","cells":[{"id":4,"value":"md`\n# Géo-visualiser des données sur la crise des réfugiés Syriens- v1.5.2 \n\nD'après une idée originale de [Nicolas Lambert](https://observablehq.com/@neocartocnrs) et [Françoise Bahoken](https://neocarto.hypotheses.org/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"md`\n### VOTRE MISSION \nEn **${\n parseInt(select_année) + 1\n}**, vous êtes un ou une **data journaliste** et la rédaction de votre journal vous demande de créer une visualisation de données à propos des réfugiés Syriens arrivés en Europe.\n\nPour cela, vous avez trouvé des [**données**](https://www.un.org/en/development/desa/population/migration/data/estimates2/data/UN_MigrantStockByOriginAndDestination_2015.xlsx) sur le site internet de [l'**Organisation des Nations unies**](https://www.un.org/en/development/desa/population/migration/data/index.asp) qui propose un tableau recensant le nombre de réfugiés Syriens arrivés dans les différents pays du monde en ${parseInt(\n select_année\n)}. \nCes données sont présentées dans le tableau suivant :\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"scroll_table = table(\n fluxMigrants.sort((a, b) => b.EU_27 - a.EU_27),\n {\n nully: () => ' ',\n limit: 500,\n enableFilter: false,\n enableCSVDownload: true,\n columns: [\n \"⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\",\n {\n key: \"Pays d'origine\",\n name: \"Pays d'origine\"\n },\n \"=> \",\n \"Pays de destination\",\n\n {\n key: \"Nombre de migrants\",\n name: \"Nombre de migrants\",\n render: (val) => toFrenchNumber(val)\n },\n \"⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2513,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2455,"value":"md`\n### LES NOMBRES EN BARRE \n\nCe **tableau** est une façon de représenter les données mais il n'est pas facile de comparer le nombre de migrants dans les différents pays.\nNous pouvons représenter les nombres par des rectangles ou barres pour mieux se rendre compte des valeurs. \n\nIl n'est plus alors nécessaire de lire les nombres, l'oeil perçoit sans effort les différences de quantité. \n\nDe plus, en faisant varier la longueur et l'épaisseur des barres, vous pouvez modifier l'impression de l'importance des nombres tout en conservant **la proportionnalité**. \n\nEssayez en actionnant les curseurs ci-dessous. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2456,"value":"/** better locale inputs https://observablehq.com/@observablehq/inputs */\nviewof row_length = Inputs.Range([0.6, 1], {\n value: 1,\n step: 0.01,\n label: \"Régler la longueur des barres\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2459,"value":"viewof row_tickness = Inputs.Range([0.5, 2], {\n value: 1,\n step: 0.1,\n label: \"Régler l'épaisseur des barres \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2554,"value":"viewof select_etiquette = radio({\n options: ['oui', 'non'],\n description: 'Supprimer les étiquettes des barres',\n value: 'non'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7128,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2510,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"md`\n### LA CARTE ET LES NOMBRES \n\nA partir du tableau, nous pourrions aussi construire une carte en positionnant les nombres de migrants au dessus de chaque pays. \n\nDans le cadre de votre mission, la rédaction de votre journal n'a pas précisé quels sont les **pays d'Europe à étudier**. Vous avez alors choisi une carte de l'Europe qui contient les pays d'Europe qui ont décidé d'éliminer les contrôles d'immigration à leurs frontières communes ([espace Schengen](https://fr.wikipedia.org/wiki/Espace_Schengen)) . Tous les habitants de ces pays (en fond coloré sur la carte) peuvent voyager librement à l'interieur de cette zone en Europe., sans contrôle des passeports, de l’immigration ou autres formalités.\n\nChoisissez un type de carte :` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5027,"value":"viewof mapProjection = Inputs.Select([\"Azimuthale\", \"Conique\",\"Cylindrique\",\"Equal Earth\"], {value:\"Conique\", label : \"Projection de la carte\"}) \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5855,"value":"function renderTitle(svg, title) {\n svg\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", width)\n .attr(\"height\", 30)\n .attr(\"fill\", \"white\");\n svg\n .append(\"text\")\n .attr(\"transform\", \"translate(50,\" + 20 + \")\")\n .style(\"text-anchor\", \"left\")\n .attr(\"font-size\", 25)\n .attr(\"fill\", \"orange\")\n .text(title);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5893,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7057,"value":"viewof select_display_country_labels = radio({\n options: [\"oui\", \"non\"],\n description: \"Afficher les noms des pays\",\n value: \"non\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"md`### UNE CARTE ET DES CERCLES \nEt si pour améliorer encore la représentation, nous positionnions les barres directement sur la carte ?\nEn général sur les cartes, les barres sont remplacées par des cercles dont l' **aire** est **proportionnelle** aux nombres comme pour la longueur des barres. Le principe de proportionnalité reste le même. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4659,"value":"viewof select_etiquette_circle = radio({\n options: ['oui', 'non'],\n description: 'Supprimer les étiquettes des cercles',\n value: 'oui'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2666,"value":"md`### LES PAYS LES PLUS ACCUEILLANTS ! \nLe nombre de migrants réfugiés en Allemagne est du même ordre de grandeur qu'en Suède mais peut-on comparer ces deux nombres sachant que l'Allemagne compte **82 millions** d'habitants et la Suède seulement **9 millions** ? Et si nous divisons le nombre de réfugiés par la population pour chaque pays nous avons une meilleure idée de l'effort que fait chaque pays pour accueillir les réfugiés. Les nombres sur la carte en dessous sont exprimés en **nombre de réfugiés par million d'habitants**.\n\nLe classement n'est plus le même! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4688,"value":"viewof select_etiquette_circle_2 = radio({\n options: ['oui', 'non'],\n description: 'Supprimer les étiquettes des cercles',\n value: 'oui'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2661,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2598,"value":"md`### QUELLE CARTE CHOISIR ? \nEn jouant sur le diamètre des cercles et les couleurs, nous pouvons proposer plusieurs cartes différentes avec exactement le même jeu de données. \n\nQue pensez-vous de ces cartes ?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2581,"value":"carte_choix1 = md` Choix N°1\n\n

[lien vidéo](https://www.youtube.com/watch?v=uicwYbendUk&feature=emb_logo)

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2249,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2285,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## DONNEES `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5831,"value":"md`### Tables de données`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3547,"value":"countryLabels = FileAttachment(\"country-codes_csv_extract@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3559,"value":"fluxMigrants = {\n let data = [];\n data_world.forEach((d) => {\n const val1 = ISONum_to_frenchLabel(+d.properties[\"iso_n3\"]);\n const val2 = +d.properties[\"origine_syria_\" + select_année];\n\n if (val2 != 0) {\n data.push({\n \"Pays d'origine\": \"Syrie\",\n \"Pays de destination\": val1,\n \"Nombre de migrants\": val2,\n EU_27: d.properties.EU_27_,\n EU_Schengen: d.properties.EU_schengen_\n });\n }\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6913,"value":"euCountryMigrants = fluxMigrants.sort((a, b) => b.EU_27 - a.EU_27).slice(0, 25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6927,"value":"schengenCountryMigrants = fluxMigrants.filter((d) => d.EU_Schengen)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5828,"value":"md`### Geojson data ###`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3782,"value":"world = FileAttachment(\"world-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"//data_world_contour = FileAttachment(\"world_centroid_contour_syria_3_.geojson\").json()\n\ndata_world_contour = d3.json(\n \"https://raw.githubusercontent.com/ToulouseDataViz/meetup_observable-master/master/data/world_centroid_contour_syria_3_.geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2800,"value":"data_world = data_world_contour.features.sort(\n (a, b) =>\n b.properties['origine_syria_' + select_année] -\n a.properties['origine_syria_' + select_année]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3842,"value":"world2 = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5837,"value":"md`## CONSTANTES\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2760,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3334,"value":"\n/*viewof select_année = radio({\n options: ['2015', '2019'],\n description: 'Sélectionner l\\année de la source de données',\n value: '2015'\n})\n\n/*/\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"/* observablehq, Observable’s not JavaScript, https://observablehq.com/@observablehq/observables-not-javascript */\n/* S M Abdullah, Week 4: Javascript Function, https://observablehq.com/@smabdullah/week-4-javascript-function */\nmd`## FONCTIONS \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5851,"value":"md`### Base`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3551,"value":"ISONum_to_frenchLabel = d3\n .scaleOrdinal()\n .domain(countryLabels.map(d => d['ISO3166-1-numeric']))\n .range(countryLabels.map(d => d.official_name_fr))\n .unknown(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5677,"value":"// conversion ISO nom pays en français\nISOAlpha_to_frenchLabel_ = d3\n .scaleOrdinal()\n .domain(countryLabels.map(d => d['ISO3166-1-Alpha-3']))\n .range(countryLabels.map(d => d.official_name_fr))\n .unknown(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6009,"value":"function ISOAlpha_to_frenchLabel(isoAlpha, defaultValue) {\n const result = ISOAlpha_to_frenchLabel_(isoAlpha);\n if (result === \"\") {\n return defaultValue;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5685,"value":"ISOAlpha_to_frenchLabel(\"CHE\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6015,"value":"ISOAlpha_to_frenchLabel(\"ZZZ\", \"plop\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5498,"value":"/* Localisation des nombres en français */\n\nfunction toFrenchNumber(number) {\n const frenchLocale = d3.formatLocale({\n decimal: \",\",\n thousands: \" \",\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"],\n minus: \"\\u2212\",\n percent: \"\\u202f%\"\n })\n\n return frenchLocale.format(\",.0f\")(number);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5502,"value":"function buildEuropeProjection(scale) {\n let _projectionMode = d3.geoConicConformal();\n if (mapProjection===\"Azimuthale\") _projectionMode = d3.geoOrthographic().scale(scale * 1.2).center([0, 52]);\n if (mapProjection===\"Conique\") _projectionMode = d3.geoConicConformal().parallels([32, 65]).scale(scale * 1).center([0,55]);\n if (mapProjection===\"Cylindrique\") _projectionMode = d3.geoMercator().scale(scale * 0.55).center([0, 58]);\n if (mapProjection===\"Equal Earth\") _projectionMode = d3.geoEqualEarth().scale(scale * 1.2).center([-7, 52]);\nreturn _projectionMode;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5504,"value":" function buildEMEAProjection(scale) {\n let _projectionMode = d3.geoConicConformal();\n if (mapProjection===\"Azimuthale\") _projectionMode = d3.geoOrthographic().scale(scale * 1.4).center([10, 45]);\n if (mapProjection===\"Conique\") _projectionMode = d3.geoConicConformal().scale(scale * 1.7).center([15,45]);;\n if (mapProjection===\"Cylindrique\") _projectionMode = d3.geoMercator().scale(scale * 1.3).center([10, 46]);\n if (mapProjection===\"Equal Earth\") _projectionMode = d3.geoEqualEarth().scale(scale * 1.6).center([10, 42]);;\n \nreturn _projectionMode;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3693,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4605,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4483,"value":"renderCircleLegend = function (tickValues) {\n return buildCircleLegend()\n .scale(\n d3\n .scaleSqrt()\n .domain([0, 980])\n .range([0, Math.sqrt(diametre_circle)])\n )\n .tickValues(tickValues)\n .tickFormat(\n (d, i, e) => toFrenchNumber(d) + (i === e.length - 1 ? \" pers.\" : \"\")\n )\n .tickSize(5); //.tickSize(tickSize) defaults to 5\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6835,"value":"nbMaxRéfugiés = function (inSchengen) {\n let countryLabels = fluxMigrants;\n if (inSchengen) {\n countryLabels = fluxMigrants.sort((a, b) => b.EU_27 - a.EU_27).slice(0, 16);\n }\n return d3.max(countryLabels, (d) => +d[\"Nombre de migrants\"]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6839,"value":"nbMaxRéfugiés(false);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6845,"value":"nbMaxRéfugiés(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6848,"value":"roundLog10 = function (value) {\n return Math.pow(10, Math.ceil(Math.log10(value)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6850,"value":"roundLog10(1024)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6872,"value":"roundMostSignificant = function (value) {\n const ceilLog10 = Math.pow(10, Math.floor(Math.log10(value)));\n return ceilLog10 * Math.ceil(value / ceilLog10);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6874,"value":"roundMostSignificant(1234)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5853,"value":"md` ### Composants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## LIBRAIRIES\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4791,"value":"Inputs = require(\"@observablehq/inputs@0.7.17/dist/inputs.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4800,"value":"Text = Inputs.Text","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import { rasterize, serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import { select, color, radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require(\"d3@5\", \"d3-geo-polygon@1\", \"d3-geo@2\", \"d3-ease@2\", \"d3-geo-scale-bar@1.1.1\")\n//d3 = require(\"d3@5\", \"d3-geo-projection@3\", \"d3-geo@2\", \"d3-ease@2\", \"d3-geo-scale-bar@1.1.1\")\n//d3 = require(\"d3@6\", \"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3832,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7205,"value":"import { colorOpacity } from \"@mootari/color-opacity\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7026,"value":"import { mode } from \"@d3/dark-mode\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6902,"value":"## LISTE DES CHANGEMENTS\n\n### 1.5.2\n- design adapté aux intelliphones (*sic*) \n- pipette de couleur\n \n### 1.5.1\n- correction de l'échelle\n- lexique\n- liste des pays européens\n- taille de police trop petite\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@vvivanloc/geo-visualiser-des-donnees-sur-la-crise-des-refugies-syrien;307;"}