2d:["$","title",null,{"children":"CREER VOTRE VISUALISATION DE DONNEES V2 | Alain Ottenheimer | Observable"}] 32:T883,row_chart = { const height = 600; const svg = d3.select(DOM.svg(width, height)); const background = svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', "white"); const margin = { top: 60, right: 250, bottom: 30, left: 190 }; const tableau_ = tableau.slice(0, 16); var x = d3 .scaleLinear() .domain([0, d3.max(tableau_, d => +d['Nombre de migrants'])]) .range([margin.left, width * row_length - margin.right]); var y = d3 .scaleBand() .domain(tableau_.map(d => d['Pays de destination'])) .range([margin.top, height - margin.bottom / row_tickness]) .padding(0.1); var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .style("font", "16px sans-serif") .call(d3.axisLeft(y).tickSizeOuter(0)); var xAxis = g => g .attr("transform", `translate(0, ${margin.top})`) .call( row_length < .9 ? d3.axisTop(x).ticks(width / 160, "~s") : d3.axisTop(x).ticks(width / 160) ); var format = d3.format(".0f"); svg .append("g") .selectAll("rect") .data(tableau_) .join("rect") .attr("x", x(0)) .attr("y", d => y(d['Pays de destination'])) .attr("fill", "#737373") .attr("width", d => x(+d['Nombre de migrants']) - x(0)) //* row_length .attr("height", y.bandwidth() / row_tickness); if (select_etiquette == 'non') { svg .append("g") .attr("fill", "white") .attr("text-anchor", "start") .style("font", "16px sans-serif") .selectAll("text") .data(tableau_) .join("text") .attr("x", d => x(+d['Nombre de migrants'])) //* row_length)) .attr("y", d => y(d['Pays de destination']) + y.bandwidth() / 2) .attr('fill', '#000') .attr("dy", "0.35em") .attr("dx", "0.35em") .text(function(d, i) { return d3.format(".0f")(+d['Nombre de migrants']); }); } svg .append("g") .attr("class", "axisColor") .call(yAxis); if (select_etiquette == 'oui') { svg .append("g") .call(xAxis) .attr('font-size', (1.2 * width) / 100); } return svg.node(); }33:T553,carte_nb = { var path = d3.geoPath().projection(projection); const svg = d3 .select(DOM.svg(width, height)) .attr('id', 'carte') .style("width", "100%") .style("height", "auto"); // ----------------------- 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 ? "#bdbdbd" : "none")) .style('stroke', 'grey') .append("title") .text(d => d.properties.name + ' - ' + d.properties.Origine_Syria); // ----------------------- Affichage des nombres de migrants pour chaque pays----------- svg .selectAll('text') .data(data_world) .enter() .append('text') .attr("id", d => d.properties.Destination) .attr( 'x', d => //projection_centroid_world([ projection([d.properties.longitude_pays, d.properties.latitude_pays])[0] ) .attr( 'y', d => //projection_centroid_world([ projection([d.properties.longitude_pays, d.properties.latitude_pays])[1] ) .text(d => d.properties.EU_schengen_ != 0 ? d.properties.Origine_Syria : "" ) .attr('font-size', 20) .attr("dx", "-1em") .style('fill', "black") .attr('fill', '#999'); return svg.node(); }34:T90a,carte_nb_circle = { const svg = d3 .select(DOM.svg(width, height)) .attr('id', 'carte') .style("width", "100%") .style("height", "auto"); // ------------------------------------------- Projection ------------------------ const projection_centroid_world = d3 .geoMercator() .center([2.35, 43.21]) .scale(900) .translate([(1 * width) / 2, (1.5 * 1000) / 2]); const path = d3.geoPath().projection(projection); // ----------------------- 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') .append("title") .text(d => d.properties.name + ' - ' + d.properties.Origine_Syria); // ----------------------- Affichage des nombres de migrants pour chaque pays----------- svg .selectAll('text') .data(data_world) .enter() .append('text') .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] ) .text(d => d.properties.EU_schengen_ != 0 ? d.properties.Origine_Syria : "" ) .attr('font-size', 20) .attr("dx", "-1em") .style('fill', "black") .attr('fill', '#999'); // ----------------------- 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 / 100) : 0 ) .style('fill', '#737373') .style('stroke', '#737373') .attr('opacity', .5) .append("title") .text(d => d.properties.Origine_Syria); return svg.node(); }35:T8a2,carte_nb_circle_ratioPop = { const svg = d3 .select(DOM.svg(width, height)) .attr('id', 'carte') .style("width", "100%") .style("height", "auto"); const path = d3.geoPath().projection(projection); var format = d3.format(".0f"); // ----------------------- 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 ? "#d9d9d9" : "none")) .style('stroke', 'grey') .append("title") .text(d => d.properties.name + ' - ' + d.properties.Origine_Syria); // ----------------------- Affichage des nombres de migrants pour chaque pays----------- svg .selectAll('text') .data(data_world) .enter() .append('text') .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] ) .text(d => d.properties.EU_schengen_ != 0 ? format((1000000 * +d.properties.Origine_Syria) / d.properties.pop_est) : "" ) .attr('font-size', 20) .attr("dx", "-1em") .style('fill', "black") .attr('fill', '#999'); // ----------------------- 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( (1000000 * +d.properties.Origine_Syria) / d.properties.pop_est ) : 0 ) .style('fill', '#737373') .style('stroke', '#737373') .attr('opacity', .5) .append("title") .text(d => d.properties.Origine_Syria); return svg.node(); }36:Tc62,carte = { const svg = d3 .select(DOM.svg(width, height)) .attr('id', 'carte') .style("width", "100%") .style("height", "auto"); //.attr('transform', `translate(${"0"}, ${"50"})`); const path = d3.geoPath().projection(projection); // -------------------------------- Couleur du fond de carte -------------------- const background = svg .append('rect') .attr('width', 1200) .attr('height', 1000) .attr('fill', color_carte(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 ? color_carte(pays_colors) : "white" ) .style('stroke', pays_colors == 'noir' ? '#969696' : 'black') .append("title") .text(d => 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 / (260 - diametre_circle)) : 0 ) .style('fill', color_carte(circle_color)) .style('stroke', pays_colors == 'noir' ? 'white' : 'black') /* .style( 'stroke', circle_color == 'aucune' ? '#969696' : color_carte(circle_color) )*/ .append("title") .text( d => d.properties.name + ' - ' + d.properties.Origine_Syria + ' ' + 'migrants' ); // ----------------------- Affichage du titre ------------------------------------- svg .append("rect") .attr("x", 0) .attr("y", 0) .attr('width', width) .attr('height', 30) .attr('fill', "white"); svg .append("text") .attr("transform", "translate(" + width / 2 + "," + 20 + ")") .style("text-anchor", "middle") .attr('font-size', 25) .attr('fill', "orange") .text(select_titre); // ----------------------- Affichage des noms des pays -------------------------- svg .selectAll('text') .data(data_world_contour.features) .enter() .append('text') .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] ) .text(d => (d.properties.name != "Syria" ? "" : "Syrie")) .attr('font-size', 25) .attr("dx", "-1em") .style('fill', "orange") .attr('fill', '#999'); // ----------------------- Echelle distance -------------------------- //svg.append("g").call(scaleBar); svg.append("g").call(scaleBarWapo); return svg.node(); }37:T79f,carte_all_syrians = { const svg = d3 .select(DOM.svg(width, height)) .attr('id', 'carte') .style("width", "100%") .style("height", "auto"); const path = d3.geoPath().projection(projection_large); // -------------------------------- Couleur du fond de carte -------------------- const background = svg .append('rect') .attr('width', 1200) .attr('height', 1000) .attr('fill', color_carte(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 ? color_carte(pays_colors) : "white" ) .style('stroke', pays_colors == 'noir' ? '#969696' : 'black') .append("title") .text(d => d.properties.name); // ----------------------- Affichage des cercles nombre de migrants pour chaque pays----------- svg .selectAll('circle') .data(data_world) .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 / 250) : 0 : Math.sqrt(+d.properties.Origine_Syria / 250) ) .style('fill', color_carte(circle_color)) .style('stroke', pays_colors == 'noir' ? 'white' : 'black') .attr('opacity', 1) .append("title") .text( d => d.properties.name + ' - ' + d.properties.Origine_Syria + ' ' + 'migrants' ); return svg.node(); }38:T489,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 - Legendes : https://observablehq.com/@jonhelfman/circle-legend - bar chart (This chart shows the relative frequency of letters in the English language) :https://observablehq.com/@d3/horizontal-bar-chart - Echelle : https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar - https://observablehq.com/@d3/axis-ticks - https://observablehq.com/@d3/world-map-svg - 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/ - C:/Users/datasens/SFR Cloud/2-TDV-MEETUP/2-TDV/PLetC/Migration_exercice `39:Td7d,function circleLegend(selection, domain, range) { let instance = {}; // set some defaults var api = { domain: domain, // the values min and max range: range, // the circle area/size mapping values: [8, 34, 89], // values for circles x: 500, y: 500, suffix: '', // ability to pass in a suffix circleColor: '#888', textPadding: 80, textColor: '#454545', fontSize: 14, fontFamily: 'Arial', format: d3.format("~g"), title: 'Default title' }; const sqrtScale = d3 .scaleSqrt() .domain(api.domain) .range(api.range); instance.render = function() { const s = selection .append('g') .attr('class', 'legend-wrap') // push down to radius of largest circle .attr( 'transform', 'translate(0,' + sqrtScale(d3.max(Math.abs(api.values))) + ')' ); // append the values for circles s.append('g') .attr('class', 'values-wrap') .selectAll('circle') .data(api.values) .enter() .append('circle') .attr('class', d => 'values values-' + d) // .attr('r', d => Math.abs(sqrtScale(d))) .attr('cx', api.x) .attr('cy', d => api.y - Math.abs(sqrtScale(d))) .style('fill', 'none') .style('stroke', api.circleColor) .style('opacity', 0.9); // append some lines based on values s.append('g') .attr('class', 'values-line-wrap') .selectAll('.values-labels') .data(api.values) .enter() .append('line') .attr('x1', d => api.x + sqrtScale(d)) .attr( 'x2', api.x + Math.abs( sqrtScale( Math.max(Math.abs(api.domain[0]), Math.abs(api.domain[1])) ) ) + 14 ) .attr('y1', d => api.y - Math.abs(sqrtScale(d))) .attr('y2', d => api.y - Math.abs(sqrtScale(d))) .style('stroke', api.textColor) .style('stroke-dasharray', '2,2'); // append some labels from values s.append('g') .attr('class', 'values-labels-wrap') .selectAll('.values-labels') .data(api.values) .enter() .append('text') .attr( 'x', api.x + Math.abs( sqrtScale( Math.max(Math.abs(api.domain[0]), Math.abs(api.domain[1])) ) ) + 14 + api.textPadding ) .attr('y', d => api.y - Math.abs(sqrtScale(d)) + 4) .attr('shape-rendering', 'crispEdges') .style('text-anchor', 'end') .style('fill', api.textColor) .attr('font-family', api.fontFamily) .attr('font-size', api.fontSize) .text(d => api.format(d) + api.suffix); s.append('g') .selectAll('text') .data(api.values) .enter() .append('text') //.attr('text', api.title) .attr('x', api.x) .attr('y', api.y + 20) .attr('font-family', api.fontFamily) .attr('font-size', api.fontSize + 4) .style('text-anchor', 'middle') .text(d => api.title); return instance; }; // convert api fields to setter functions for (let key in api) { instance[key] = getSet(key, instance).bind(api); } return instance; // https://gist.github.com/gneatgeek/5892586 function getSet(option, component) { return function(_) { if (!arguments.length) { return this[option]; } this[option] = _; return component; }; } }3a:T408,{ var height = 800; const svg = d3 .select(DOM.svg(1200, 800)) .attr('id', 'carte') .style("width", "100%") .style("height", "auto"); const projection_contour_country = d3 .geoConicConformal() .parallels([35, 65]) .rotate([-20, 0]) .scale(width * 1.2) .center([0, 52]) .translate([width / 2, height / 2]) .clipExtent([[0, 0], [width, height]]) .precision(0.2); /* //.geoMercator() .geoConicConformal() .fitExtent( [[20, 20], [size.width - 25, size.height - 25]], data_world_contour ); */ const path = d3 .geoPath() // Projection et centrage automatique des données dans la carte .projection(projection_contour_country); svg // Affichage des contours de chaque département .selectAll('path') .data(data_world_contour.features) .enter() .append('path') .attr('d', path) .style('fill', 'white') .style('stroke', 'black') .append("title") .text(d => d.properties.sovereignt); return svg.node(); }3b:[{"id":"3147e62ef3bf392b378fd1ee9eb46a36638efe2c53bbaa4116dee1b83702072a1ab9ce8492320ece2a722ace6b8341e0195fc4899143c708a84891ee3d1ccab8","href":"https://static.observableusercontent.com/files/3147e62ef3bf392b378fd1ee9eb46a36638efe2c53bbaa4116dee1b83702072a1ab9ce8492320ece2a722ace6b8341e0195fc4899143c708a84891ee3d1ccab8","name":"syria_migration_filtered_print@4.csv","type":"text/csv","lastModified":1612530081444.826,"size":1794},{"id":"c99f78990d647acde67f1ec04c28e3e8f389b648872b8ddb9a8359a0bd4f8fc274982b1b9db8a3d256da9c98be08fa51939df705d5ae4b0c5a78fc6733d6bb2b","href":"https://static.observableusercontent.com/files/c99f78990d647acde67f1ec04c28e3e8f389b648872b8ddb9a8359a0bd4f8fc274982b1b9db8a3d256da9c98be08fa51939df705d5ae4b0c5a78fc6733d6bb2b","name":"Capture_vidéo.JPG","type":"image/jpeg","lastModified":1612530081444.826,"size":45558},{"id":"f9cac9d4abc6f1ba5cca0e025e114f33e43837cd9422afab92ccc7e053ee403facd48f232e57ec3fa3de02a2eab37c27ffe69101631b79e2500482e0440c28f7","href":"https://static.observableusercontent.com/files/f9cac9d4abc6f1ba5cca0e025e114f33e43837cd9422afab92ccc7e053ee403facd48f232e57ec3fa3de02a2eab37c27ffe69101631b79e2500482e0440c28f7","name":"world_centroid_contour_syria_1@4.geojson","type":"application/geo+json","lastModified":1612530081444.826,"size":2434702},{"id":"bcd038e7301679de8645dcd8b621eb8ffb8f7f43e92eeacc2ef6f3496acc714a33334a29ff768486454aa9ea9b1ef44280612fedbddd7e9bdd990a3be7040dfd","href":"https://static.observableusercontent.com/files/bcd038e7301679de8645dcd8b621eb8ffb8f7f43e92eeacc2ef6f3496acc714a33334a29ff768486454aa9ea9b1ef44280612fedbddd7e9bdd990a3be7040dfd","name":"carte_syrie_hard.png","type":"image/png","lastModified":1612549415488.544,"size":374114},{"id":"ff67034f2424f4adef89f4bea02709c9735c813dc091bbd7fda5a1eed065a3786ea32a7cf3b8fdd297b53f8e2a6b47b9f6c30111f7a4eff0eded74b4ff6b4db8","href":"https://static.observableusercontent.com/files/ff67034f2424f4adef89f4bea02709c9735c813dc091bbd7fda5a1eed065a3786ea32a7cf3b8fdd297b53f8e2a6b47b9f6c30111f7a4eff0eded74b4ff6b4db8","name":"carte_syrie_zen@3.png","type":"image/png","lastModified":1612549155565.605,"size":374867}] 30:{"id":"25272864f4abad2b","slug":"creer-votre-visualisation-de-donnees","title":" CREER VOTRE VISUALISATION DE DONNEES V2 ","thumbnail":"c06749ae177b6688d0920f45b9b69b16f3303a7a108274a387a0985eeecd4166","access_level":"public","create_time":"$D2021-02-05T13:01:21.444Z","update_time":"$D2022-10-10T15:19:06.386Z","view_time":null,"first_public_time":"$D2021-02-13T11:01:28.353Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024"},"version":3486,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":" CREER VOTRE VISUALISATION DE DONNEES V2 ","cells":[{"id":4,"value":"md`\n# CREER VOTRE VISUALISATION DE DONNEES V2 \n## Géo-visualiser des données sur les migrations des réfugiés Syriens.\n\nVersion 2.0 (d'après l'idée originale de Nicolas Lambert et Françoise Bahoken)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"md`\n### VOTRE MISSION \nVous êtes un **data journaliste** et la rédaction de votre journal vous demande de créer une visualisation de données à propos des migrants syriens arrivés en europe.\n\nPour cela, vous avez trouvé des **données** sur le site internet de l'**organisation des nations unies** qui propose un tableau recensant le nombre de migrants syriens arrivés dans les différents pays du monde en 2015. \nCes données sont présentées dans le tableau suivant :\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"scroll_table = table(tableau)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2513,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 necessaire de lire les nombres, l'oeil percoit 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 proportionalité** . \n\nEssayez en actionnant les curseurs ci-dessous. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2456,"value":"viewof row_length = slider({\n min: .6,\n max: 1.2,\n step: .01,\n value: 1,\n format: \",\",\n description: \"Régler la longueur des barres\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2459,"value":"viewof row_tickness = slider({\n min: 1,\n max: 3,\n step: .1,\n value: 1.4,\n format: \",\",\n description: \"Régler l'épaisseur des barres \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":2371,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2510,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 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 choisissez une carte de l'europe et de vous concentrer sur les pays d'europe qui ont décidé d'éliminer les controles d'immigration à leurs frontières communes. Tous les habitants de ces pays (en bleu sur la carte) peuvent voyager librement à l'interieur de cette zone en Europe. Ainsi voyager d’un pays à un autre se fait sans aucun contrôle des passeports et de l’immigration ou autres formalités.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2519,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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érale sur les cartes, les barres sont remplacées par des cercles dont la **taille** est **proportionnelle** aux nombres comme pour les barres. Le principe de proportionalité reste le même. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2666,"value":"md`### LES PAYS LES PLUS ACCUEILLANTS ! \nLe nombre de migrants installé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** d'habitants? Et si nous divisons le nombre de migrants par la population pour chaque pays nous avons une meilleure idée de l'effort qu'on fait chaque pays pour accueillir les migrants. Les nombres sur la carte en dessous sont exprimés en **nombre de migrants par million d'habitants**.\n\nLe classement n'est plus le même! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2661,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2598,"value":"md`### QUELLE CARTE CHOISIR ? \nEn jouant sur le diamètre des cercles et le couleurs nous pouvons proposer 2 cartes différentes avec exactement le même jeu de données. **Que pensez-vous de ces cartes ?**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2581,"value":"carte_choix1 = md` Choix N°1\n\n

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

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2522,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"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 et ce titre?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"viewof pays_colors = radio({\n options: [\n 'noir',\n 'gris',\n 'blanc',\n 'bleu',\n 'rouge',\n 'vert',\n 'rose',\n 'marron',\n 'aucune'\n ],\n description: 'Choisissez la couleur des pays',\n value: 'aucune'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"viewof circle_color = radio({\n options: [\n 'noir',\n 'gris',\n 'blanc',\n 'bleu',\n 'rouge',\n 'vert',\n 'rose',\n 'marron',\n 'aucune'\n ],\n description: 'Choisissez la couleur des cercles',\n value: 'aucune'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"viewof diametre_circle = slider({\n title: \"\",\n description: 'Choisissez l\\'echelle des cercles de la carte',\n min: 10,\n max: 250,\n step: 10,\n value: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1664,"value":"viewof fond_color = radio({\n options: ['gris', 'blanc', 'bleu'],\n description: 'Choisissez la couleur du fond de la carte',\n value: 'blanc'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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, 2015',\n 'La répartition des migrants syriens en europe',\n 'l\\'arrivée massive de migrants syriens en Europe',\n 'Face à la guerre, L\\'exode vers l\\'europe des syriens',\n 'L\\'Europe face à l\\'afflut de réfugiés syriens',\n 'Choisissez un titre'\n ],\n value: 'Choisissez un titre'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2525,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2528,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":1391,"value":"viewof pays_etendue = radio({\n options: ['Europe', 'Tous les pays de la carte'],\n description: 'Choisissez',\n value: 'Europe'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1682,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2539,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"md`\n### CONCLUSIONS !\n\nFaire une carte, c'est une autre 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\nPenser s'y la prochaine fois que vous verrez une carte. Essayer de comprendre comment l'auteur a construit sa carte, 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","output":"$undefined","database":"$undefined"},{"id":1862,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1907,"value":"md`\n## A BIENTÔT..\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`\n## INFORMATIONS ET REFERENCES \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":2249,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2281,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2283,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2285,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## DATA `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"data_world_contour = FileAttachment(\"world_centroid_contour_syria_1@4.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2800,"value":"data_world = data_world_contour.features.sort(\n (a, b) => b.properties.Origine_Syria - a.properties.Origine_Syria\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"tableau = FileAttachment(\"syria_migration_filtered_print@4.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`## CONFIGURATION \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1797,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2988,"value":"// call de la fonction circleLegend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"circleLegend(\n d3.select(carte),\n [0, 260 - diametre_circle], // the values min and max\n [0, 1] // the circle area/size mapping\n)\n .x(700)\n .y(300)\n .values([1000, 20000, 70000])\n .circleColor('#333333')\n .textColor('#333333')\n .suffix('')\n .fontSize(9)\n .fontFamily('Arial')\n .textPadding(47)\n .title('Nombre de personnes')\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2979,"value":"mapWidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2981,"value":"mapHeight = mapWidth * 0.63","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3017,"value":"scaleBarWapo = d3\n .geoScaleBar()\n .projection(projection)\n .size([mapWidth, mapHeight])\n .left(1)\n .top(.85)\n .units(d3.geoScaleMiles) // The units will be miles instead of kilometers\n .distance(310, 75) // The distance of the scale bar\n .label(\"500 kilomètres\") // The label on top of the scale bar\n .labelAnchor(\"middle\") // The position of the label (you can also pass \"start\" and \"end\")\n .tickSize(null) // The height of the bar\n .tickValues(null) // The tick values below the bar will be removed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"size = ({ width: width, height: width * 1.2 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2760,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"color_carte = d3\n .scaleOrdinal()\n .domain([\n 'bleu',\n 'rouge',\n 'noir',\n 'vert',\n 'blanc',\n 'aucune',\n 'gris',\n 'rose',\n 'marron'\n ])\n .range([\n '#74a9cf',\n '#ef3b2c',\n '#000000',\n '#a1d99b',\n '#ffffff',\n 'none',\n '#bdbdbd',\n '#F2A0C6',\n '#B26217'\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2758,"value":"projection = d3\n .geoConicConformal()\n .parallels([35, 65])\n .rotate([-20, 0])\n .scale(width * 1.2)\n .center([0, 52])\n .translate([width / 2, height / 2])\n .clipExtent([[0, 0], [width, height]])\n .precision(0.2)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2779,"value":"projection_large = d3\n .geoConicConformal()\n .parallels([35, 65])\n .rotate([-20, 0])\n .scale(width * 0.9)\n .center([0, 52])\n .translate([width / 2, height / 2])\n .clipExtent([\n [0, 0],\n [width, height]\n ])\n .precision(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## LIBRAIRIES\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require(\"d3@5\", \"d3-geo@2\", \"d3-geo-projection@3\", \"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","output":"$undefined","database":"$undefined"},{"id":1451,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 31:"$30:body" 2c:E{"digest":"NEXT_REDIRECT;replace;/@aotten/creer-votre-visualisation-de-donnees;307;"}