2c:null 2d:["$","title",null,{"children":"Géo-visualiser des données sur la crise des réfugiés Syriens- v1.5.2 | Vincent VIVANLOC | Observable"}] 32: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; }33: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"); } }34: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(); }35: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(); }36: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(); }37: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(); }38: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(); }39: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 `3a: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; }3b:[{"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}] 30:{"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","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"},"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}],"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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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"},{"id":2516,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":2513,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"id":7128,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2510,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":5893,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":1474,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":1602,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":2661,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":2581,"value":"carte_choix1 = md` Choix N°1\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2590,"value":"carte_choix2 = md` Choix N°2\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2522,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1332,"value":"Commentaire = md`\n### ET MAINTENANT, A VOUS DE JOUER !\nVous devez choisir les couleurs des pays, la taille des cercles, la couleur du fond de carte et enfin le titre de votre carte. Vos choix s'affichent sur la carte en dessous\n\nVous devrez aussi **penser à justifier ces choix** : pourquoi avoir choisi cette taille de cercle? ces couleurs? ce titre? et ces étiquettes?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5930,"value":"md`### Couleurs`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1339,"value":"viewof pays_colors = colorOpacity({\n value: \"#FFFFFFff\",\n label: \"Pays d'Europe\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5549,"value":"viewof pays_autres_colors = colorOpacity({\n value: \"#FFFFFFff\",\n label: \"Autres pays\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5558,"value":"viewof Syria_color = colorOpacity({\n value: \"#FFFFFFff\",\n label: \"Syrie\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1334,"value":"viewof circle_color = colorOpacity({\n value: \"#FFFFFFff\",\n label: \"cercles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5554,"value":"viewof fond_color = colorOpacity({\n value: \"#FFFFFFff\",\n label: \"fond de carte\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5934,"value":"md`### Légende`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"viewof diametre_circle = Inputs.Range([1, 400], {\n value: 10,\n step: 1,\n label: \"Choisissez l'échelle des cercles de la carte\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5763,"value":"viewof showLegend = Inputs.Radio(new Map([[\"oui\", true], [\"non\", false]]), {value: true, label: \"Afficher l\\'échelle des cercles\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4754,"value":"viewof select_etiquette_circle_3 = Inputs.Radio([\"oui\", \"non\"], {\n value: \"non\",\n label: \"Afficher les pays\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5924,"value":"viewof select_etiquette_circle_4 = Inputs.Radio(\n new Map([\n [\"oui\", true],\n [\"non\", false]\n ]),\n { value: false, label: \"Afficher le nombre de réfugiés\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1754,"value":"viewof select_titre = select({\n title: \"\",\n description: \"Choisissez un texte pour le titre\",\n options: [\n 'Les réfugiés Syriens en Europe en '+ select_année,\n 'La répartition des migrants Syriens en Europe en '+ select_année,\n 'L\\'arrivée massive de migrants Syriens en Europe en '+ select_année,\n 'Face à la guerre, l\\'exode en Europe des Syriens en '+ select_année,\n 'L\\'Europe face à l\\'afflux de réfugiés Syriens en '+ select_année,\n 'Choisissez un titre'\n ],\n value: 'Choisissez un titre'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2525,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1624,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4963,"value":"graph_png = DOM.download(\n await rasterize(carte_custom_Europe),\n \"carte_\" + name,\n \"Enregistrez l'image de la carte\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2528,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1881,"value":"md`\n### CONTENT DE VOTRE TRAVAIL DE DATA JOURNALISTE ?\nEt si vous changiez votre regard en analysant ce qui se passe dans tous les pays et notamment autour de la Syrie !\n\nEt oui, c'est totalement différent si vous élargissez le nombre de pays analysés. La carte montre que les migrants restent dans les pays limitrophes de la Syrie et au final, seul un petit nombre d'entre eux vont chercher refuge dans des pays lointains comme en Europe.\n\n**Qu'en pensez-vous?**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1391,"value":"viewof pays_etendue = radio({\n options: ['Europe', 'Autour de l\\'Europe'],\n description: 'Choisissez',\n value: 'Europe'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1682,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2539,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6667,"value":"\nChoisir une autre année :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6662,"value":"viewof select_année = select([\"2015\", \"2019\"], {label: \"Choisir une année\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1893,"value":"md`\n### CONCLUSIONS\n\nFaire une carte, c'est une façon très convaincante de montrer des nombres et décrire des faits mais suivant la façon de faire, on peut déformer la réalité. \n\nEn quelque sorte, **mentir**. \n\nPensez-y la prochaine fois que vous verrez une carte. Essayer de comprendre comment l'auteur a construit sa carte et quels artifices il a utilisé pour vous amener à penser comme lui.\n\n**Comprendre le langage de la visualisation de données, c'est garder l'esprit critique**. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1862,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1907,"value":"md`\n## A BIENTÔT...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1865,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`\n## INFORMATIONS ET REFERENCES \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1315,"value":"md` Voir la vidéo de Nicolas Lambert et Françoise Bahoken\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"},{"id":2249,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2285,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"md`## DONNEES `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5831,"value":"md`### Tables de données`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3547,"value":"countryLabels = FileAttachment(\"country-codes_csv_extract@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":6927,"value":"schengenCountryMigrants = fluxMigrants.filter((d) => d.EU_Schengen)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5828,"value":"md`### Geojson data ###`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3782,"value":"world = FileAttachment(\"world-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":3842,"value":"world2 = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5837,"value":"md`## CONSTANTES\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2760,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":5851,"value":"md`### Base`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":5685,"value":"ISOAlpha_to_frenchLabel(\"CHE\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6015,"value":"ISOAlpha_to_frenchLabel(\"ZZZ\", \"plop\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":3693,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4605,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":6839,"value":"nbMaxRéfugiés(false);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6845,"value":"nbMaxRéfugiés(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":6850,"value":"roundLog10(1024)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":6874,"value":"roundMostSignificant(1234)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5853,"value":"md` ### Composants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"md`## LIBRAIRIES\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":4800,"value":"Text = Inputs.Text","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":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"},{"id":3832,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1451,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7205,"value":"import { colorOpacity } from \"@mootari/color-opacity\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7026,"value":"import { mode } from \"@d3/dark-mode\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 31:"$30:body"