2b:null 2c:["$","title",null,{"children":"Flux touristiques version 1 | Alain Ottenheimer | Observable"}] 31:T3199,chart = { const height = width*1.2 const y_legend = 5 const x_legend= width-200 const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const background = svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', bgColor); const zoom = d3.zoom() .scaleExtent([.45, 7]) .on("zoom", zoomed); const g = svg //.attr('preserveAspectRatio', 'xMidYMid') .append('g') .attr('transform', `translate(${"0"}, ${"100"})`) // ------------------------------------ tracé contours --------------------------------------- var carte = g.append("svg:image") .attr("xlink:href", "https://raw.githubusercontent.com/AlainOttenheimer/Touristoscope/master/data/France_metro_dep_.25.svg") .attr("x", -30) .attr("y", -30) .attr("width", width*1.3) .attr("height", height*1) // ------------------------------------- Initialisation de la boucle ------------------------------ const states = g.selectAll('.states') .data(cartogram_data) .enter().append('g') .attr("path", (d) => d) .attr('class', 'state-groups'); //---------------------------------------- Tracés de l'icon lit------------------------------------- var icon_row = 0.4*mosaique.filter(d => d.INSEE_DEP == select_dept.slice(0,2)).map(e => e.row)*(state_size + state_padding) var icon_col = 0.4*mosaique.filter(d => d.INSEE_DEP == select_dept.slice(0,2)).map(e => e.column)*(state_size + state_padding) var img = g.append("svg:image") .attr("xlink:href", "https://raw.githubusercontent.com/AlainOttenheimer/Touristoscope/master/data/lit_icon.svg") .attr("width", 25) .attr("height", 25) .attr("x", icon_col +10) .attr("y",icon_row + 10); //---------------------------------------- Tracés des encadrements------------------------------------- states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d)})`) .append('rect') .attr('x', d => d) .attr('y', d => d) .attr('width', x(minmaxValues.date_max) - x(minmaxValues.date_min)) .attr('height', z(0) - z(maxValues.y)) .attr('fill',d=> d.INSEE_DEP == select_dept.slice(0,2) ? "orange" : "none") // bgColor //.attr('stroke', '#363636') .attr('stroke-width', .5); //---------------------------------------- Tracés des ticks sur l'axe X--------------------------------- states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d) + state_size})`) .call(xAxis) // ----------------------------------------- texte echelle Y des encadrements ----------------------------------- states.append('text') .attr('transform', d => `translate(${x_column(d)-1}, ${y_column(d)})`).attr('class', 'state-label') .attr('dominant-baseline', 'central') .attr('x', d => d) .attr('y', d => d) .attr('text-anchor', 'end') .attr('font-size', 6*width/1000) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(format(minmaxValues.volume_max)); ; states.append('text') .attr('transform', d => `translate(${x_column(d)-1}, ${y_column(d)+z(0) - z(maxValues.y)})`).attr('class', 'state-label') .attr('dominant-baseline', 'central') .attr('x', d => d) .attr('y', d => d) .attr('text-anchor', 'end') .attr('font-size', 6*width/1000) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text("0"); // -------------------------------- fonction de calcul du tracé des lignes hors vacances ------------- const line0 = d3.line() .curve(d3.curveStep) .x((d) => x(d.key)) .y((d) => z(d.vacances ==0 ? d.volume : 0)) // -------------------------------------- Tracés des lignes hors vacances (0) ------------------------------ states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d)})`) .selectAll('.line') .data(d => [d.data["values"]]) .enter() .append('path') .attr('d', line0) .attr('fill', 'none') .attr('stroke', vacances_color(0)) .attr('stroke-width', .35) // ------------------------------------- fonction de calcule du tracé des lignes vacances (1)------------- const line1 = d3.line() //.curve(d3.curveStepAfter) .x((d) => x(d.key)) .y((d) => z(d.vacances == 1 ? d.volume : 0)) // -------------------------------------- Tracés des lignes hors vacances (1) ------------------------------- states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d)})`) .selectAll('.line') .data(d => [d.data["values"]]) .enter() .append('path') .attr('d', line1) .attr('fill', 'none') .attr('stroke', vacances_color(1)) .attr('stroke-width', .35) // -------------------------------- fonction de calcul du tracé des lignes vacances unknown (2)------------- const line2 = d3.line() //.curve(d3.curveStep) .x((d) => x(d.key)) .y((d) => z(d.vacances ==2 ? d.volume : 0)) // -------------------------------------- Tracés des lignes vacances unknown (2)------------------------------ states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d)})`) .selectAll('.line') .data(d => [d.data["values"]]) .enter() .append('path') .attr('d', line2) .attr('fill', 'none') .attr('stroke', vacances_color(2)) .attr('stroke-width', .35) //---------------------------------------- Tracés des échelles ------------------------------------- states.append("g") .attr('transform', d => `translate(${x_column(d)}, ${y_column(d) + state_size})`) .call(xAxis).selectAll("line,path").style("stroke", '#993404').attr('stroke-width', .5); // ---------------------------------- Ajout du numéro du département pour chaque tracé --------------- states.append('text') .attr('transform', d => `translate(${x_column(d)+2}, ${y_column(d)+5})`).attr('class', 'state-label') .attr('dominant-baseline', 'central') .attr('x', d => d) .attr('y', d => d) .attr('text-anchor', 'start') .attr('font-size', 10*width/1000) .attr('font-family', 'Helvetica') .attr('fill', "#fff") .text(d => d.INSEE_DEP !="2A"? d.INSEE_DEP : "Corse"); // ------------------------------------ ajout source------------------------------------------------- svg.append('text') .attr('class', 'text') .attr("y",height-10) .attr("x",10) .attr('text-anchor', 'left') .attr('font-size',12) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text("Réalisation A Ottenheimer - datasens.fr - Source des données :Hackaviz2020 - toulouse-dataviz.fr"); // ------------------------------------ ajout titre------------------------------------------------- svg.append('text') .attr('class', 'text') .attr("y",25) .attr("x",width/2) .attr('text-anchor', 'middle') .attr('font-size',16) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(select_dept.toUpperCase()); svg.append('text') .attr("y",50) .attr("x",width/2) .attr('fill', "#878787") .attr('text-anchor', 'middle') .text("Nuitées en 2018 par origine des touristes"); svg.append('text') .attr("y",75) .attr("x",width/2) .attr('fill', "#878787") .attr('text-anchor', 'middle') .text("par origine des touristes") .text(select_affichage == "En nombre" ? select_affichage : select_affichage+" du departement d'origine") ; // --------------------------------------------LEGEND ----------------------------------------------- // ----------------------------------------- Encadrement ------------------------------------------- svg.append('rect') .attr("y", y_legend) .attr("x", x_legend+70) .attr('width', 100) .attr('height', 100) .attr('stroke', 'grey') .attr('fill', "none") .attr('stroke-width',.3); // ----------------------------------------- Texte N° Dept --------------------------------------- svg.append('text') .attr('class', 'text') .attr("y", y_legend+15) .attr("x", x_legend+70+2) .attr('text-anchor', 'start') .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text("N° dept"); // ----------------------------------------- Texte y axis -------------------------- svg.append('text') .attr('class', 'text') .attr("y", x_legend+35) .attr("x", -y_legend-10) .attr('text-anchor', 'end') .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .attr('transform','rotate(-90)') .text (format(maxValues.y)); // ----------------------------------------- texte echelle Y ----------------------------------- svg.append('text') .attr('class', 'text') .attr("y", y_legend+8) .attr("x", x_legend+65) .attr('text-anchor', 'end') .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(format(minmaxValues.volume_max)); ; svg.append('text') .attr('class', 'text') .attr("y", y_legend+100) .attr("x", x_legend+65) .attr('text-anchor', 'end') .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill',"#878787") .text(format(0)); // ----------------------------------------- texte echelle X --------------------------------------- svg.append('text') .attr('class', 'text') .attr("y", y_legend+115) .attr("x", x_legend+70) .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(dateFr(minmaxValues.date_min)); svg.append('text') .attr('class', 'text') .attr("y", y_legend+115) .attr("x", x_legend+160) .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(dateFr(minmaxValues.date_max)); // ----------------------------------------- legende vacances --------------------------------------- svg.append('line') .attr('class', 'line') .attr("x1", x_legend+75) .attr("y1", y_legend+50) .attr("x2", x_legend+100) .attr("y2", y_legend+50) .attr('fill', 'none') .attr('stroke', vacances_color(0)) .attr('stroke-width',2); svg.append('line') .attr('class', 'line') .attr("x1", x_legend+75) .attr("y1", y_legend+65) .attr("x2", x_legend+100) .attr("y2", y_legend+65) .attr('fill', 'none') .attr('stroke', vacances_color(1)) .attr('stroke-width',2); svg.append('line') .attr('class', 'line') .attr("x1", x_legend+75) .attr("y1", y_legend+80) .attr("x2", x_legend+100) .attr("y2", y_legend+80) .attr('fill', 'none') .attr('stroke', vacances_color(2)) .attr('stroke-width',2); svg.append('text') .attr('class', 'text') .attr("y", y_legend+50) .attr("x", x_legend +105) .attr('text-anchor', 'start') .attr('font-size',9) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text("Hors vacances"); svg.append('text') .attr('class', 'text') .attr("y", y_legend+65) .attr("x", x_legend +105) .attr('text-anchor', 'start') .attr('font-size',9) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text("En vacances"); svg.append('text') .attr('class', 'text') .attr("y", y_legend+80) .attr("x", x_legend +105) .attr('text-anchor', 'start') .attr('font-size',9) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text("Vacances ?"); // ----------------------------------------- Zoom -------------------------------------------- svg.call(zoom); /* function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } */ function clicked(d) { const [[x0, y0], [x1, y1]] = path.bounds(d); d3.event.stopPropagation(); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, - (y0 + y1) / 2), d3.mouse(svg.node()) ); } function zoomed() { const {transform} = d3.event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node() }32:T8ef, texte_totaux ={switch(select_affichage) { case 'En nombre':{ return html` ${texte[0]}
• ${texte[1]} ${total.total_volume_occ}
• ${texte[2]} ${total.total_volume_09}
• ${texte[3]} ${total.total_volume_11}
• ${texte[4]} ${total.total_volume_12}
• ${texte[5]} ${total.total_volume_30}
• ${texte[6]} ${total.total_volume_31}
• ${texte[7]} ${total.total_volume_32}
• ${texte[8]} ${total.total_volume_34}
• ${texte[9]} ${total.total_volume_46}
• ${texte[10]} ${total.total_volume_48}
• ${texte[11]} ${total.total_volume_65}
• ${texte[12]} ${total.total_volume_66}
• ${texte[13]} ${total.total_volume_81}
• ${texte[14]} ${total.total_volume_82}
` } case 'En ‱ de la population':{ return html`${texte[0]}
` } }}33:T9fd,chart_select_dept = { switch(select_affichage) { case 'En nombre':{ const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const background = svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', "#1a1a1a") //.attr('stroke', "black"); svg.append('g') .attr('transform', `translate(${"0"}, ${"100"})`) svg.append('g').selectAll('rect') .data(raw_data_select_dept) .join("rect") .attr("x", d => scale_x(d.key)) .attr("width", scale_x.bandwidth()) .attr("y", d => scale_y(d.value.volume*1e-6)) .attr("height", d => scale_y(0) - scale_y(d.value.volume*1e-6)) .attr("fill", "#bbb") .append('title').text(getText) svg.append("g") .call(xAxis_dept) .attr('font-size', 1.2*width/100); //y axis svg.append("g") .call(yAxis_dept) .attr('font-size', 1.3*width/100); svg.selectAll(".tick text").attr("fill","#f88502"); svg.selectAll(".tick line").attr("stroke","#f88502"); svg.selectAll(".domain").attr("stroke","#f88502"); //x axis label svg.append("text") .attr("transform", "translate(" + (width/2) + "," + (height - 20) + ")") .style("text-anchor", "middle") .attr('font-size', 1.5*width/100) .attr('fill', "orange") .text("N° de la semaine"); //y axis label svg.append("text") .attr("transform", "translate(" + (margin.left) + "," + (height/2) + ")rotate(-90)") .style("text-anchor", "middle") .attr('font-size', 1.5*width/100) .attr('fill', "#f88502") .text("Nombre de nuitées (en million)"); //title svg.append("text") .attr("transform", "translate("+width/2+"," + 2*margin.top + ")") .style("text-anchor", "middle") .attr('font-size', 2*width/100) .attr('fill', "#f88502") .text("Nombre total de nuitées des touristes en 2018 dans le département "+select_dept) return svg.node() } case 'En ‱ de la population':{ const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const background = svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', "#1a1a1a") .attr('stroke', "black"); svg.append("text") .attr("transform", "translate(20," + height/2 + ")") .style("text-anchor", "left") .attr('font-size', "45px") .attr('fill', "#aaa") .text("") return svg.node() } }} 34:T5e8,total = ({ total_volume_occ :+d3.format(".2f")(d3.sum(raw_data_load.map(d=>d.volume))*1e-6), total_volume_09 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 9).map(d=>d.volume))*1e-6), total_volume_11 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 11).map(d=>d.volume))*1e-6), total_volume_12 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 12).map(d=>d.volume))*1e-6), total_volume_30 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 30).map(d=>d.volume))*1e-6), total_volume_31 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 31).map(d=>d.volume))*1e-6), total_volume_32 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 32).map(d=>d.volume))*1e-6), total_volume_34 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 34).map(d=>d.volume))*1e-6), total_volume_46 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 46).map(d=>d.volume))*1e-6), total_volume_48 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 48).map(d=>d.volume))*1e-6), total_volume_65 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 65).map(d=>d.volume))*1e-6), total_volume_66 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 66).map(d=>d.volume))*1e-6), total_volume_81 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 81).map(d=>d.volume))*1e-6), total_volume_82 : +d3.format(".2f")(d3.sum(raw_data_load.filter(d=>d.dest == 82).map(d=>d.volume))*1e-6), })35:[] 2f:{"id":"2e55bd4104031578","slug":"flux-tourisme-v2-0","title":" Flux touristiques version 1","thumbnail":"c5690450b75ed2950a029918d4977904f217a113c02de2565d98ec5aad293fd5","access_level":"public","create_time":"$D2020-04-26T06:56:59.386Z","update_time":"$D2026-03-05T16:25:14.170Z","view_time":null,"first_public_time":"$D2026-03-05T17:29:35.883Z","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":5702,"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":1,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"title":" Flux touristiques version 1","cells":[{"id":0,"value":"# Flux touristiques version 1\n\n## Multiples petits de **graphiques à lignes** sur une carte\n\n\nà partir de données de bornage téléphonique\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2148,"value":"title = {\n const height = 0.06*width\n const svg = d3.select(DOM.svg(width, height))\n \t.style(\"width\", \"100%\")\n \t.style(\"height\", \"auto\");\n \n const background = svg.append('rect')\n .attr('width', width )\n .attr('height', height)\n .attr('fill', bgColor)\n \n \n // ---------------------------------------- Titre ---------------------------------------------\n svg.append(\"g\")\n \t.append(\"text\")\n\t\t.attr(\"class\", \"titre\")\n\t\t.attr(\"y\", 0)\n .attr(\"x\", 10)\n\t\t.attr(\"dy\", \"1.8em\")\n .attr('font-family', 'Helvetica')\n .attr('font-size', 20)\n\t\t.style(\"fill\", \"#fff\")\n\t\t.style(\"text-anchor\", \"start\")\n\t\t.text(\"Nuitées des touristes francais et étrangers vers les départements de l'occitanie en 2018\")\n\n yield svg.node() \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4037,"value":"viewof select_dept = select({\n title: \"\",\n description: \"Choisissez un département d'occitanie.\",\n options: dept_occ.map(d =>d.nom_insee),\n value :\"31 - Haute-Garonne\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4097,"value":"viewof select_scale = radio({\n title: \"\",\n description: \"Selectionnez l'échelle du nombre de nuitées \",\n options: ['Auto','2','10','50','100','250','1000','5000','10000','20000'],\n //options: ['1000','2000','5000','10000','20000','Auto'],\n value: 'Auto'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4134,"value":"viewof select_country = radio({\n title: \"\",\n description: \"Selectionner les pays d'origine\",\n options: ['France Métropolitaine','France et étranger'],\n value: 'France Métropolitaine'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4465,"value":"viewof select_affichage = radio({\n title: \"\",\n //description: \"Modifiez le type d'affichage\",\n options: ['En nombre', 'En ‱ de la population'],\n value: 'En nombre'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"graph_svg = DOM.download(await serialize(chart), 'chart.svg', 'Download carte as svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4031,"value":"graph_png = DOM.download(await rasterize(chart), null, \"Download carte as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5124,"value":"graph_png_dept = DOM.download(await rasterize(chart_select_dept), null, \"Download diagramme en barres as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4882,"value":"height = width*0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5041,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5049,"value":"texte = {\n let text = 0; \n if(select_affichage == 'En nombre'){return text =\n [\"Totaux 2018 en million de nuitées (Fr + Etranger)\",\"Occitanie : \", \"Aude : \", \"Ariège : \",\" Aveyron : \",\"Gard : \",\"Haute-Garonne : \",\"Gers : \",\"Hérault : \",\"Lot : \",\"Lozère : \",\"Hautes-Pyrénnées : \",\"Pyrénnées-Orientales : \",\"Tarn : \",\"Tarn et Garonne : \" ]} \n if(select_affichage == 'En ‱ de la population'){return text =\n [\"Vue et Totaux non applicables en ‱ de la population\"] }\n return text\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5045,"value":"text_size=[\"2px\",\"3px\",\"4px\"] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5046,"value":"text_color = [\"#f88502\",\"#ddd\",\"#aaa\",]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4895,"value":"margin_dept = ({top: 100, right: 20, bottom: 100, left: 120})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4806,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4997,"value":"getText = d => {\n return `${\"Département : \"+select_dept.slice(3)+\"\\nVolume = \"+d3.format(\".2f\")(d.value.volume*1e-6)+\" Million\\nSemaine : \"+d.key+\" / 2018\"} `\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4875,"value":"xAxis_dept = g => g\n .attr(\"transform\", `translate(0, ${height - margin_dept.bottom})`)\n .call(d3.axisBottom(scale_x).ticks(10).tickSizeOuter(0)) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4877,"value":"yAxis_dept = g => g\n .attr(\"transform\", `translate(${margin_dept.left}, 0)`)\n .call(d3.axisLeft(scale_y).ticks(10).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4837,"value":"scale_x = d3.scaleBand()\n .domain(raw_data_select_dept.map(d => d.key))\n .rangeRound([margin_dept.left, width - margin_dept.right])\n .padding(0.2);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4840,"value":"scale_y = d3.scaleLinear()\n //.domain([0, d3.max(raw_data_select_dept.map(d => d.value.volume))])\n .domain([0, 2.6])\n .range([height - margin_dept.bottom, margin_dept.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"viewof bgColor = color({\n value: \"#1a1a1a\",\n title: \"Background Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4054,"value":"raw_data_load = d3.csv(\"https://raw.githubusercontent.com/AlainOttenheimer/Touristoscope/master/data/par_origines.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5474,"value":"raw_data_load_ =raw_data_load.filter(d=>typeof(d.org) === 'string' & d.org != \"2A\" & d.org !=\"2B\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4045,"value":"mosaique_load = d3.csv(\"https://raw.githubusercontent.com/AlainOttenheimer/Touristoscope/master/data/mosaique.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4082,"value":"mosaique = {return mosaique_load.filter(select_country==\"France Métropolitaine\" ? d => d.INSEE_DEP ==\"2A\" | d.INSEE_DEP <96 : d => d.INSEE_DEP !=\"2B\" & d.INSEE_DEP !=\"99\" );}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4457,"value":"ratio = {return mosaique.map(d=> {\n return {\n dep : (d.INSEE_DEP).toString(),\n ratio : d.POP_2018 == null ? 1e10 : +d3.format(\".2f\")(d.POP_2018*1e-4)}})}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4693,"value":"dep_ratio = d3.scaleOrdinal()\n\t.domain(ratio.map(d=>d.dep))\n\t.range(ratio.map(d=>d.ratio)).unknown(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4462,"value":"raw_data_merge = {return raw_data_load.map(e => {\n return {\n date: e.date,\n jour_fr: dateFr((e.date)),\n org : e.org,\n ratio : dep_ratio(e.org),\n dest: +e.dest <10 ? +(e.dest).toString() : e.dest,\n volume : select_affichage == \"En nombre\" ? e.volume : +d3.format(\".2f\")(e.volume /dep_ratio(e.org)),\n Temp_midi: e.Temp_midi,\n meteo: e.meteo,\n nb_evt: e.nb_evt,\n vacances_org : e.vacances_org\n }})} \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4489,"value":"raw_data_= raw_data_merge\n .filter(select_country==\"France Métropolitaine\" ? d => d.org ==\"2A\" | d.org <96 : d => d.org !=\"2B\" & d.org !=\"99\" )\n .filter(d => d.dest ==select_dept.slice(0,2))\n .sort((a, b) => a.date - b.date); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4828,"value":"raw_data_select_dept = d3.nest()\n .key(d => (d3.timeFormat(\"%W\"))(d.date))\n .rollup(function(v) { return {\n volume : d3.sum(v, function(d) { return d.volume; }),\n }; })\n .entries(raw_data_)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1129,"value":"//Regroupement des données par département pour merge avec le fichier des positions des small multiples. \nraw_data = d3.nest()\n .key(d => d.deptOrg)\n .entries(raw_data_.map(function(d) {\n return {\n key: d.date,\n volume: d.volume,\n deptOrg :d.org,\n deptDest :d.dest,\n vacances :+d.vacances_org,\n meteo : d.meteo,\n nb_evt : d.nb_evt\n }\n }))//.sort((a, b) => b.key - a.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1971,"value":"cartogram_data = mosaique.map(obj => Object.assign({}, obj, {\n data: raw_data.find(d => d.key === obj.INSEE_DEP.toString())\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4438,"value":"cartogram_data.find(d=> d.INSEE_DEP == 33).data.values","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3414,"value":"dept_occ= mosaique.map(function(e) {\n return {\n nom_insee: e.INSEE_DEP + \" - \" + e.NOM_DEP,\n region: e.INSEE_REG\n }}).sort(function (a, b) {\n if (a.nom_insee < b.nom_insee) return -1;\n else if (a.nom_insee > b.nom_insee) return 1;\n return 0;\n }).filter(d => d.region ==76); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4785,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4475,"value":"function dateFr(date){ \n var jours = new Array(\"dim\", \"lun\", \"mar\", \"mer\", \"jeu\", \"ven\", \"sam\");\n var mois = new Array(\"jan\", \"fev\", \"mars\", \"avr\", \"mai\", \"juin\", \"juil\", \"aout\", \"sep\", \"oct\", \"nov\", \"dec\");\n //var message = jours[date.getDay()] + \" \"; // nom du jour\n var message = date.getDate() + \" \"; // numero du jour\n message += mois[date.getMonth()] + \" \"; // mois\n message += date.getFullYear();\n return message;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4668,"value":"maxValues = ({\n y: select_scale=='Auto' ? Math.round(d3.max(raw_data_.map(d=>d.volume).flat())) : select_scale})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1123,"value":"minmaxValues = ({\n\n volume_max: select_scale=='Auto' ? Math.round((d3.max(\n _.flatten(\n raw_data_.map(d => d.volume) \n )\n )/100)+1)*100 : select_scale,\n \n \n volume_min: Math.round(d3.min(\n _.flatten(\n raw_data_.map(d => d.volume) \n )\n )/100)*100,\n \n date_max: d3.max(\n _.flatten(\n raw_data_.map(d => d.date)\n )\n ),\n date_min: d3.min(\n _.flatten(\n raw_data_.map(d => d.date)\n )\n )\n \n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3389,"value":"formatDate =d3.timeFormat(\"%e %b %y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2207,"value":"format = d3.format(\".0f\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2607,"value":"format1 = d3.format(\".1f\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2365,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3600,"value":"vacances_color = d3.scaleOrdinal()\n\t.domain([0, 1, 2])\n\t.range([\"#f44277\", \"lightgreen\", \"#74a9cf\"]).unknown(\"black\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4103,"value":"xAxis = g => g\n.attr('transform', d => `translate(${x_column(d)}, ${y_column(d)+(z(0) - z(maxValues.y))})`) \n.call(d3.axisBottom(x).ticks(12).tickSize(3).tickSizeOuter(0).tickFormat(() => \"\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"x= d3.scaleTime()\n .domain([minmaxValues.date_min, minmaxValues.date_max])\n .range([0, ratioHW*state_size])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4563,"value":"z.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"z = d3.scaleLinear()\n .domain([0, maxValues.y])\n .range([state_size, 0])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"axisPosition = (cell, size = state_size, padding = state_padding) => \n (cell * (size + padding)) + size / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"x_column = ({column}) => 0.4*column * (state_size + state_padding) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"y_column = ({row}) => 0.4* row * (state_size + state_padding)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3111,"value":"ratioHW = 1.25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"// Espacement entre les small mpultiples\nstate_padding = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"state_size = (width / offset)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"//Agrandissement de la taille globale de l'ensemble des graphiques\noffset = 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"md`### Libraries and imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-svg-legend@2\", \"d3-scale-chromatic@1.3.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3408,"value":"import {dropdown} from \"@rohscx/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"import {select, color, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4033,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3997,"value":"import {toDataURL} from '@mootari/embedding-fonts-into-an-svg'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1923,"value":"md`### TO DO LIST\nAjouter un bar graph capacité hébergement + événement +population\n\nFiger les valeur du zoom lors d'une sélection\n\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"