2b:null 2c:["$","title",null,{"children":"Election départementales 2015 | Alain Ottenheimer | Observable"}] 31:Tf0f, chart = { const svg = d3.select(DOM.svg(size.width, size.height+margin.top+margin.bottom)); // ------------------------------------- Titre ---------------------------------- svg.append("text") .attr("class", "xlabel") .attr("y", 0) .attr("x",size.width/2+ margin.left/2) .attr("dy", "1.8em") .style("font", "14px sans-serif ") .style("fill", "black") .style("text-anchor", "middle") .text("Couleur politique des cantons en 2015 par rapport à la superficie et la population des cantons") // ------------------------------------- X & Y axis ---------------------------------- let row_nb =-1 for (let k=0 ; k xScale(d.area)) .attr("cy", d => yScale(d.population)) .attr("opacity",d=>d.dep == departement ? .8: .3) .attr('fill', d=>d.dep == departement ? color(d.L_D15_2T): '#ddd') .attr("r", d=>d.dep == departement ? 3: 1.5) // ------------------------------------- Text small multiples ---------------------------------- svg.append("text") .attr('transform', col_nb==0 ? `translate( ${col_nb*size_sm.width + size_sm.width/2},${margin.top+row_nb*size_sm.height})`: `translate( ${col_nb*size_sm.width-1*col_nb*margin_sm.left+size_sm.width/2},${margin.top+row_nb*size_sm.height})`) .attr("class", "xlabel") .attr("y", 0) .attr("x",0) .attr("dy", "1.8em") .style("font", "12px sans-serif ") .style("fill", "black") .style("text-anchor", "middle") //.text(""+dep_name(j+1) +" ("+(j+1)+")") .text(dep_name(departement) +" ("+(departement)+")") svg.append("text") .attr('transform', col_nb==0 ? `translate( ${col_nb*size_sm.width + size_sm.width/2},${margin.top+row_nb*size_sm.height})`: `translate( ${col_nb*size_sm.width-1*col_nb*margin_sm.left+size_sm.width/2},${margin.top+row_nb*size_sm.height})`) .attr("class", "xlabel") .attr("y", 12) .attr("x",0) .attr("dy", "1.8em") .style("font", "12px sans-serif ") .style("fill", "black") .style("text-anchor", "middle") .text("Nb de cantons : "+ canton_nb(departement)) j=++j } svg.append("text") .attr("transform", "translate(8," + (size.height/2) + ")rotate(-90)") .attr("class", "xlabel") .style("text-anchor", "middle") .style("font", "12px sans-serif ") .attr('fill', "black") .text("Nombre d'habitants"); svg.append("text") .attr("class", "xlabel") .attr("transform", "translate(" + (width/2) + "," + (size.height+margin.top+margin.bottom-5 ) + ")") .style("text-anchor", "middle") .style("font", "12px sans-serif ") .attr('fill', "black") .text("Superficie (projetée) des cantons en km²"); return svg.node(); } 32:T43b,tooltip = { chart const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style('visibility', 'hidden').text('ege') d3.selectAll("circle") .on("mouseover", function(d){ d3.select(this).transition().attr('r', 5) }) .on("mousemove", function(d){ return tooltip .html(`\ Nom du canton: ${d.canton}
\ Nombre d\habitants: ${d.population}
\ Surface projetée du canton en km²: ${d.area}
\ liste arrivée en tête : ${d.L_D15_2T}
\ Département : ${d.dep}
\ `) .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+20)+"px") .style("visibility", "visible"); }) .on("mouseout", function(){ d3.select(this).transition().attr('r', 1.5) // d=>d.dep == dept ? 3: 1.5) return tooltip.html(``).style("visibility", "hidden"); }) // .on("click", function(d) { window.open(d.URL); }) }33:[{"id":"29cb0a7fc683849004c49b8bca1173a8686dc6c8e513e72999b79097f79bc6a9cb36c516d21247928c9a51ca1679c0cccfafb30f28741a5e126ef511f43aeb7a","href":"https://static.observableusercontent.com/files/29cb0a7fc683849004c49b8bca1173a8686dc6c8e513e72999b79097f79bc6a9cb36c516d21247928c9a51ca1679c0cccfafb30f28741a5e126ef511f43aeb7a","name":"centroid_surface_cantons.csv","type":"text/csv","lastModified":1606313677240.309,"size":77211},{"id":"2ff27aaf740ec247aea6c540409039e35015cfc528fedcb2570e424f5bfcd4508e93fbb4b836beda12c2b2ce4c434c59fb8669d8af2a6f48dff5e85a17dde6a6","href":"https://static.observableusercontent.com/files/2ff27aaf740ec247aea6c540409039e35015cfc528fedcb2570e424f5bfcd4508e93fbb4b836beda12c2b2ce4c434c59fb8669d8af2a6f48dff5e85a17dde6a6","name":"departements-region.csv","type":"text/csv","lastModified":1606313677240.309,"size":3118},{"id":"759ee72ceb9d715034497300fe1d71989b701b83ee03a42ac3ac069409a3f2086c8f281b95bef7e3a4ad02f8e18b4c02354f27783b8e45bc79c52caa3e2d4366","href":"https://static.observableusercontent.com/files/759ee72ceb9d715034497300fe1d71989b701b83ee03a42ac3ac069409a3f2086c8f281b95bef7e3a4ad02f8e18b4c02354f27783b8e45bc79c52caa3e2d4366","name":"Election_departementales_cantons_1T_2015.csv","type":"text/csv","lastModified":1606313677240.309,"size":177317},{"id":"25214652747403f13319969fee0012ddd7f5c3f453e5bdb059350039b210a31aba054796e21b2ffc5e9985a96b4bbb87f4827e87f5eaeb3ffe5db297400b9dc0","href":"https://static.observableusercontent.com/files/25214652747403f13319969fee0012ddd7f5c3f453e5bdb059350039b210a31aba054796e21b2ffc5e9985a96b4bbb87f4827e87f5eaeb3ffe5db297400b9dc0","name":"Election_departementales_cantons_2T_2015.csv","type":"text/csv","lastModified":1606313677240.309,"size":164589}] 2f:{"id":"55cc52f9f7037f5c","slug":"election-departementales-2015","title":"Election départementales 2015","thumbnail":"6da329bc3304d46ff1e707c643e0c4c8c934e4d878da39545900285692cfcc84","access_level":"public","create_time":"$D2020-11-25T14:14:37.240Z","update_time":"$D2024-03-19T15:30:48.337Z","view_time":null,"first_public_time":"$D2026-03-05T17:27:38.244Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024"},"version":1272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"title":"Election départementales 2015","cells":[{"id":0,"value":"md`# Election départementales 2015\nMultiples petits - nuage de points - V2.0`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`## GRAPHIQUES `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"viewof nb_col = select({\n title: \"\",\n description: \"Selectionner le nombre de colonnes\",\n options : [1,2,3,4,5],\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"viewof r1 = radio({\n title: 'Choisir les départements',\n description: 'Sélectionner le dataset',\n options: [\n { label: 'Tous', value: 'tous' },\n { label: 'Selection', value: 'selection' },\n \n ],\n value: 'tous'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md` ## DATA`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`### Data superficies cantons `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"FileAttachment(\"centroid_surface_cantons.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"raw_canton_area = d3.csvParse(await FileAttachment(\"centroid_surface_cantons.csv\").text()).filter(d=>d.insee_cant != \"7599\" & d.insee_cant != \"6999\" );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`### Data résultat élections D15 1T`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"election_D15_1T_canton = d3.csvParse(await FileAttachment(\"Election_departementales_cantons_1T_2015.csv\").text());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`### Data résultat élections D15 2T`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"election_D15_2T_canton = d3.csvParse(await FileAttachment (\"Election_departementales_cantons_2T_2015.csv\").text());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"md`### Data table de correspondance n° département - Nom département`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"table_dep = d3.csvParse(await FileAttachment (\"departements-region.csv\").text());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"md`### Data couleur nuance`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"color_list =['#e31a1c','#fdd598','#fdd598','#0021fc','#ff26ff','#fdd598','#e31a1c','#404040','#fdd598','#ff26ff','#ff26ff','#fdd598','#0021fc','#0021fc','#ff26ff','#0021fc','#fdd598']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"md`### Data liste des départements à visualiser`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"md`## DATA TRAITEMENT`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"merge_data_1T = {return merge_1 (raw_canton_area,election_D15_1T_canton).map(obj => {\n return {\n canton : obj.CANTON,\n dep : obj.dep,\n insee_canton : obj.insee_cant,\n area : +obj.AREA,\n population : +obj.Population,\n VE_D15_1T : +obj.VE_D15,\n L_D15_1T : obj.L_D15\n }}).sort((a, b) => a.area - b.area)\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"merge_data_election = {return merge_2 (merge_data_1T,election_D15_2T_canton).map(obj => {\n return {\n canton : obj.canton,\n insee_canton : obj.insee_canton,\n area : +obj.area,\n dep : obj.dep,\n population : +obj.population,\n VE_D15_1T : +obj.VE_D15_1T,\n L_D15_1T : obj.L_D15_1T.slice(3) ,\n VE_D15_2T : obj.VE_D15 ? +obj.VE_D15 : obj.VE_D15_1T ,\n L_D15_2T : obj.L_D15 == undefined ? obj.L_D15_1T.slice(3) : obj.L_D15.slice(3),\n }})\n //.sort((a, b) => a.area - b.area)\n .sort(function (a, b) {\n if (a.canton < b.canton) return -1;\n else if (a.canton > b.canton) return 1;\n return 0;\n }); \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"nb_sm = liste_dep.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"nb_cantons = Array.from(d3.group(merge_data_election, (d) => d.dep)).map(\n ([key, values]) => ({\n key: key,\n value: {\n nb_canton: values.length\n }\n })\n)\n/*\nnb_cantons = d3.nest()\n .key(d=>d.dep)\n .rollup(function(v) { return {\n nb_canton :v.length,\n }; }) \n .entries(merge_data_election ) */","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"map_nuance_liste = new Map(merge_data_election .map(c => [c.L_D15_2T, c]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"liste_nuance = Array.from(map_nuance_liste.keys()).sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"map_dep_list = new Map(merge_data_election.map(c => [c.dep, c]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"liste_dep = {\n if (r1 == \"tous\") {\n return Array.from(map_dep_list.keys()).sort();\n } else {\n return [\n \"59\",\n \"13\",\n \"93\",\n \"06\",\n \"29\",\n \"74\",\n \"25\",\n \"26\",\n \"66\",\n \"09\",\n \"23\",\n \"48\"\n ];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"md`## CONFIGURATION`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"x_format= d3.format(\".0f\")\t","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"size = ({width: width, height: Math.ceil(nb_sm / nb_col)*200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"size_sm = ({width: width/nb_col, height: 200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"margin = ({top: 40, right: 0, bottom: 50, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"margin_sm = ({top: 40, right: 20, bottom: 0, left: 50})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"xScale = d3.scaleLog()\n\t\t\t//.domain(d3.extent(merge_data_election.map(c =>c.area)))\n .domain([1, 2000])\n\t\t\t.range([margin_sm.left, size_sm.width - margin_sm.right])\n //.nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"d3.extent(merge_data_election.map(c =>c.area))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"yScale = d3\n .scaleLog()\n //.domain(d3.extent(merge_data_election.map(c => c.population)))\n .domain([4000, 100000])\n .range([size_sm.height - margin_sm.bottom, margin_sm.top])\n// .nice()\n\n/*\nyScale = d3.scaleLinear()\n\t\t\t.domain([0, d3.max(merge_data_election.map(c =>c.population))])\n\t\t\t.range([size_sm.height - margin_sm.bottom, margin_sm.top])\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"xAxis = d3.axisBottom(xScale).ticks(7, \"~s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"yAxis = d3.axisLeft(yScale).ticks(8, d => `${+d}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`## FONCTIONS`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"dep_name = d3.scaleOrdinal()\n .domain(table_dep.map(d=>d.num_dep).sort() )\n .range(table_dep.map(d=>d.dep_name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"merge_1 = (a1,a2) =>\n a1.map(itm => ({\n ...a2.find((item) => item.INS === itm.insee_cant),\n ...itm\n }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"merge_2 = (a1,a2) =>\n a1.map(itm => ({\n ...a2.find((item) => item.INS === itm.insee_canton),\n ...itm\n }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"color = d3.scaleOrdinal()\n .domain(liste_nuance )\n .range(color_list)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"canton_nb = d3\n .scaleOrdinal()\n .domain(nb_cantons.map((d) => d.key).flat(1))\n .range(nb_cantons.map((d) => +d.value.nb_canton).flat(1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## LIBRARIES`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"import {select, radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"