29:null 2a:["$","title",null,{"children":"Données bancaires | Alain Ottenheimer | Observable"}] 2f:T8f8,row_chart = { const svg = d3.select(DOM.svg(width, height)); const background = svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', bgColor); const margin = ({top: 60, right: 100, bottom: 10, left: 280}) var x = d3.scaleLinear() .domain([0, d3.max(total_pays, d => d.value[selectedEncoding])]) .range([margin .left, width - margin .right]) var y = d3.scaleBand() .domain(total_pays.map(d => d.key)) .range([margin .top, height - margin .bottom]) .padding(0.1) var xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) var format = x.tickFormat(20) var format = d3.format(".0f"); svg.append("g") .selectAll("rect") .data(total_pays) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.key)) .attr("fill", d=> d.key == select_pays ? '#cc4c02' : 'lightgrey') .attr("width", d => x(d.value[selectedEncoding]) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "start") .style("font", "11px sans-serif") .selectAll("text") .data(total_pays) .join("text") .attr("x", d => x(d.value[selectedEncoding])) .attr("y", d => y(d.key) + y.bandwidth() / 2) .attr('fill','#999') .attr("dy", "0.35em") .attr("dx", "0.35em") //.text(function(d,i){return (i+1)+'-'+format(d.value[selectedEncoding]/1000)+'k'}); .text(function(d,i){return (i+1)+'-'+format(d.value[selectedEncoding]/1000)+'k '+'('+(d3.format(".1f"))(d.value[selectedEncoding+'_pourcent']) +'%)' }); svg.append("g") .append("text") .attr("class", "xlabel") .attr("y", 0) .attr("x", width/2) .attr("dy", "1.8em") .style("font", "18px sans-serif ") .style("fill", "#f88502") .style("text-anchor", "middle") .text('Dépenses par pays en '+selectedEncoding +' issues des cartes bancaires détenues par des étrangers') /* svg.append("g") .call(xAxis); */ svg.append("g") .attr("class", "axisColor") .call(yAxis); return svg.node(); }30:T988,row_chart_dept = { const svg = d3.select(DOM.svg(width, height)); const background = svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', bgColor); const margin = ({top: 60, right: 100, bottom: 10, left: 280}); var x = d3.scaleLinear() .domain([0, d3.max(total_dept, d => d.value[selectedEncoding])]) .range([margin .left, width - margin .right]) var y = d3.scaleBand() //.domain(total_dept.map(d => d.key)) .domain(total_dept.map(d => d.key)) .range([margin .top, height - margin .bottom]) .padding(0.1) var xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) var format = x.tickFormat(20) var format = d3.format(".0f"); var format_pourcent = d3.format(".1f"); svg.append("g") .selectAll("rect") .data(total_dept) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.key)) .attr("fill", d=> d.key == select_pays ? '#f88502' : 'lightgrey') .attr("width", d => x(d.value[selectedEncoding]) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "start") .style("font", "11px sans-serif") .selectAll("text") .data(total_dept) .join("text") .attr("x", d => x(d.value[selectedEncoding])) .attr("y", d => y(d.key) + y.bandwidth() / 2) .attr('fill','#999') .attr("dy", "0.35em") .attr("dx", "0.35em") .text(function(d,i){return (i+1)+'-'+format(d.value[selectedEncoding]/1000)+'k '+'('+(d3.format(".1f"))(d.value[selectedEncoding+'_pourcent']) +'%)' }); svg.append("g") .append("text") .attr("class", "xlabel") .attr("y", 0) .attr("x", width/2) .attr("dy", "1.8em") .style("font", "18px sans-serif ") .style("fill", "#f88502") .style("text-anchor", "middle") //.text('Les dépenses de proximité des étrangers par carte bancaire en France par département en '+selectedEncoding) .text('Dépenses par département en '+selectedEncoding +' issues des cartes bancaires détenues par des étrangers') /* svg.append("g") .call(xAxis); */ svg.append("g") .attr("class", "axisColor") .call(yAxis); return svg.node(); }31:Te40,bar_chart = { const height = width * .6; 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"); const margin_dept = { top: 100, right: 80, bottom: 100, left: 120 }; var scale_x_ = d3 .scaleTime() .domain([ new Date(total_deptByCountry[0].key), new Date(total_deptByCountry[total_deptByCountry.length - 1].key) ]) .rangeRound([margin_dept.left, width - margin_dept.right]); var scale_y = d3 .scaleLinear() .domain([ 0, d3.max(total_deptByCountry.map(d => d.value[selectedEncoding])) ]) .range([height - margin_dept.bottom, margin_dept.top]) .nice(); var xAxis_dept = g => g.attr("transform", `translate(0, ${height - margin_dept.bottom})`).call( d3 .axisBottom(scale_x_) .ticks(10) .tickSizeOuter(0) .tickFormat(d3.utcFormat("%b-%y")) ); //.ticks(d3.utcDay.every(12)) var yAxis_dept = g => g.attr("transform", `translate(${margin_dept.left}, 0)`).call( d3 .axisLeft(scale_y) .ticks(3) .tickSizeOuter(0) ); var format = x.tickFormat(20); var format = d3.format(".0f"); const max = scale_x_( new Date(total_deptByCountry[total_deptByCountry.length - 1].key) ); const min = scale_x_(new Date(total_deptByCountry[0].key)); const length = total_deptByCountry.length; //var getText = d => {return `${d3.timeFormat("%b %Y")(new Date(d.key))}\nNombre : + ${d3.format(".0f")(d.value[selectedEncoding])}`} var getText = d => { return `${d3.timeFormat("%b %Y")( new Date(d.key) )}\nIndice de transaction en ${selectedEncoding} : ${d3.format(".0f")( d.value[selectedEncoding] )}`; }; svg.append('g').attr('transform', `translate(${"0"}, ${"100"})`); svg .append('g') .selectAll('rect') .data(total_deptByCountry) .join("rect") .attr("x", d => scale_x_(new Date(d.key)) + (.5 * (max - min)) / length) .attr("width", (max - min) / (length / 1)) .attr("y", d => scale_y(d.value[selectedEncoding])) .attr("height", d => scale_y(0) - scale_y(d.value[selectedEncoding])) .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("Date"); //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("Indice "); //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( 'Dépenses de proximité par carte bancaire des étrangers en France et en ' + selectedEncoding ); return svg.node(); }32:T2556,map_chart = { const height = width * 1.2; const y_legend = 5; const x_legend = width - 210; 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.append('g').attr('transform', `translate(${"0"}, ${"100"})`); const axisPosition = (cell, size = state_size, padding = state_padding) => cell * (size + padding) + size / 2; const margin_dept = { top: 100, right: 20, bottom: 100, left: 120 }; // ------------------------------------ tracé contours --------------------------------------- var carte = g .append("svg:image") .attr( "xlink:href", " https://raw.githubusercontent.com/ToulouseDataViz/COVID-19/master/images/France_dep_.25pt_metro.svg" ) //.attr("xlink:href", "https://raw.githubusercontent.com/ToulouseDataViz/COVID-19/master/images/France_dep_.25pt.svg") .attr("x", -30) .attr("y", -50) .attr("width", width * 1.25) .attr("height", width * 1.2); // ------------------------------------- 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 des ticks sur l'axe X--------------------------------- /* states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d) + state_size})`) .call(xAxis) */ //---------------------------------------- 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(date_max_plusUnMois) - x(minmaxValues.date_min)) .attr('height', z(0) - z(maxValues.y)) .attr('fill', "#1a1a1a") // bgColor .attr('stroke', '#363636') .attr('stroke-width', .5); // ---------------------------------- tracé des barres----------------------------------- --------------- states .append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d)})`) .selectAll('.bar') .data(d => d.data[selectedEncoding]) .enter() .append('rect') .attr('x', d => x(d.key)) .attr('y', d => z(d.value)) //.attr('width', x.bandwidth()) .attr( 'width', (x(minmaxValues.date_max) - x(minmaxValues.date_min)) / month_number ) .attr('height', d => z(0) - z(d.value)) .attr('fill', d => clusterScale(get_value(d))) .attr('stroke', d => clusterScale(get_value(d))) .attr('stroke-width', 0.1) .append('title') .text(getText); // ---------------------------------- Ajout du numéro du département pour chaque tracé --------------- /* // cet algorithme pose des problèmes de lecture avec illustrator 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('text-anchor', 'middle') //.attr('font-size', 8*width/1000) .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill', "#fff") //.text(d => d.INSEE_DEP+" ("+d.NOM_DEP_M+")"); .text(d => d.INSEE_DEP); */ states .append('text') .attr('class', 'state-label') .attr('dominant-baseline', 'central') .attr('x', d => axisPosition(.4 * d.column) - 13) .attr('y', d => axisPosition(.4 * d.row) - 13) .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(d => d.INSEE_DEP); // ------------------------------------ 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 Alain Ottenheimer (datasens.fr) - Source des données : Groupe BPCE (Banque Populaire et Caisse d’Epargne)"); */ // ------------------------------------ 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("Dépenses de proximité par carte bancaire des étrangers"); svg .append('text') .attr("y", 50) .attr("x", width / 2) .attr('fill', "#878787") .attr('text-anchor', 'middle') .text('En ' + selectedEncoding.toUpperCase()); svg .append('text') .attr("y", 75) .attr("x", width / 2) .attr('fill', "#878787") .attr('text-anchor', 'middle') .text('Pays : ' + select_pays.toUpperCase()); /* svg.append('text') .attr("y",100) .attr("x",width/2) .attr('fill', "#878787") .attr('text-anchor', 'middle') //.text('de '+dateFr(years[0])+' à '+dateFr(years[years.length-1])); .text('de '+ dateFr(minmaxValues.date_min).toUpperCase()+' à '+ dateFr(minmaxValues.date_max).toUpperCase()); */ // --------------------------------------------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', 'grey') .attr('fill', 'none') //.attr('fill', 'grey') .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', 14) .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 - 20) .attr('text-anchor', 'end') .attr('font-size', 14) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .attr('transform', 'rotate(-90)') .text(selectedEncoding); // ----------------------------------------- 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', 14) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(format(maxValues.y)); svg .append('text') .attr('class', 'text') .attr("y", y_legend + 100) .attr("x", x_legend + 65) .attr('text-anchor', 'end') .attr('font-size', 14) .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', 14) .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 + 170) .attr('text-anchor', 'middle') .attr('font-size', 14) .attr('font-family', 'Helvetica') .attr('fill', "#878787") .text(dateFr(minmaxValues.date_max)); // ----------------------------------------- Zoom -------------------------------------------- svg.call(zoom); 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); } yield svg.node(); //return svg.node() // ----------------------------------------- Legende couleur barres ------------------------------------- /* const colorLegend = d3.legendColor() .scale(clusterScale) .shapeWidth(30) .labels(d3.legendHelpers.thresholdLabels) .labelFormat(d3.format(".0f")) .labelWrap(100) //.title(`${selectedEncoding.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())} (cumul)`) .orient("vertical") svg.append('g') .attr('transform',`translate(${"5"}, ${"5"})`) .attr("y",height-30) .call(colorLegend) .attr('font-family', 'Helvetica') .attr('font-size', 15) .attr('fill', "#fff") */ }33:T616,/* chargement des données brutes BPCE 40Mo raw_data_banque= d3.dsv(';',"https://raw.githubusercontent.com/AlainOttenheimer/Touristoscope/master/data/indices-tourisme-v2.csv", d => { const g = { annee: d.ANNEE, mois: d.MOIS, date : parse(d['Mois de l\'année']), date_texte : dateFr(parse(d['Mois de l\'année'])), volume : d3.format(".2f")(d.Volume), valeur : d3.format(".2f")(d.Valeur), insee_reg :d['Code INSEE Région'], dest_dept_nom : d['Nom du Département'], dest_reg_name : d['Région de destination'], dest_dept_nb : d['Département de destination'][0] !="2" ? parseInt(d['Département de destination'].split("-")[0]).toString() : d['Département de destination'].split("-")[0], origine_pays : d['Pays d\'origine'] }; return g }) */ // Chargement des données filtrées et mise en forme 20Mo raw_data_banque=d3.dsv(',',"https://raw.githubusercontent.com/AlainOttenheimer/Touristoscope/master/data/indices-tourisme-light.csv", d => { const g = { date : parse(d['Mois de l\'année']), date_texte : dateFr(parse(d['Mois de l\'année'])), volume : d3.format(".2f")(d.Volume), valeur : d3.format(".2f")(d.Valeur), insee_reg :d['Code INSEE Région'], dest_dept_nom : d['Département de destination'].split("-")[1], dest_dept_nb : d['Département de destination'][0] !="2" ? parseInt(d['Département de destination'].split("-")[0]).toString() : d['Département de destination'].split("-")[0], origine_pays : d['Pays d\'origine'] }; return g })34:T15a1,md` Le groupe BPCE publie des données en open data sur le site https://bpce.opendatasoft.com/explore/?sort=modified https://bpce.opendatasoft.com/explore/?sort=modified Indices Tourisme Destination 9 septembre 2020 17:48 Paiements de proximité des étrangers par département de destination https://bpce.opendatasoft.com/explore/dataset/indices-tourisme-v2/information/?disjunctive.nom_reg&disjunctive.departement&disjunctive.cou_text_fr Meta données associées | Colonne | Type | Description $FR$ | exemple | |---------|-----------------|--------------------------------------------------------------------|-----------------------------------------| | ANNEE | integer | Année de la mesure |2020 | | Mois de l\'année | integer | Date de la mesure | 2017-04 | | MOIS | date | mois de la mesure | 4 | | Volume | real |Il s’agit du nombre de paiements effectués en proximité chez les 400 000 commerçants, artisans, etc. qui ont un contrat d’acceptation monétique avec Banque Populaire. | | | Valeur | real |Valeur | | | Code INSEE Région | integer | Code de la région associé au département concerné | 76 | | Nom du Département | string | nom du département | Haute-Garonne | | Région de destination | string | Nom de la région associé au département concerné | OCCITANIE | |Département de destination | string | Département de destination | 31-Haute-Garonne | | Pays d\'origine | string | Pays d\'origine | Allemagne | Exemple de visualisation https://donnees-territoire.banquepopulaire.fr/cas-usage.html onglet destination --- Non utilisé dans cette application Le site propose aussi un fichier Indices Tourisme Origine 9 septembre 2020 17:50 Montant et nombre de dépenses issues de cartes étrangères par pays d'origine https://bpce.opendatasoft.com/explore/dataset/indices-tourisme-origine/information/?disjunctive.cou_text_fr&disjunctive.nom_reg&disjunctive.departement Meta données associées Nom Région Département de destination Pays d'origine Nombre de transactions Montant des transactions Mois de l'année Exemple de visualisation https://donnees-territoire.banquepopulaire.fr/cas-usage.html onglet origine Réference BPCE https://donnees-territoire.banquepopulaire.fr/ Dans l’ensemble des données de paiement par carte bancaire, il est possible d’identifier les dépenses de proximité issues des cartes bancaires détenues par les étrangers. La France étant la première destination touristique au monde, devant l’Espagne, avec près de 90 millions de touristes étrangers en 2018, il nous a semblé intéressant de les représenter. Comment lire ces chiffres? Un indice mensuel en volume (nombre de transactions) et en valeur (montant des transactions) – base 1 000 000 en janvier 2017 – a donc été déterminé sur la base des codes IIN (Issuer Identification Number) qui permet de s’assurer du pays d’émission de la carte bancaire. L’indice est calculé sur la base du nombre de cartes de paiement étrangères distinctes utilisées pour les paiements. Si les dépenses de proximité des étrangers représentaient 1 million de transactions (indice en nombre) ou 1 million d'euros (indice en montant), alors les paiements en provenance du Canada dans le département du Rhône (69) représentent 480 (en montant) et 863 (en nombre) en juillet 2018. Comment les représenter visuellement ? Définition L'indice d'une grandeur est le rapport entre la valeur de cette grandeur au cours d'une période courante et sa valeur au cours d'une période de base. Il mesure la variation relative de la valeur entre la période de base et la période courante. Souvent, on multiplie le rapport par 100 ; on dit : indice base 100 à telle période. Les indices permettent de calculer et de comparer facilement les évolutions de plusieurs grandeurs entre deux périodes données. Par Origine : carte du monde par pays affichant la provenance des dépenses de proximité des étrangers par carte bancaire en nombre de transactions et montant des transactions. Il est possible de filtrer par département ou région de destination et de définir une période pour affiner la visualisation. Par Destination : carte de France par département et/ou région affichant les dépenses de proximité des étrangers par carte bancaire en nombre de transactions et montant des transactions. Il est possible de filtrer par pays d’origine et de définir une période pour affiner la visualisation L’évolution permet d’afficher une représentation dynamique en utilisant toujours les mêmes filtres et les Tops les principaux contributeurs, par département et/ou région de destination ou par pays d’origine. ` 35:[{"id":"8ce91036281cc9d97d65c4b436fd8d20bca3e9a3ede6416659f25794e9f1f9eb94009499918cc7e828cad9e23555e6e9dd8470881c2237e9610db356bcdff15c","href":"https://static.observableusercontent.com/files/8ce91036281cc9d97d65c4b436fd8d20bca3e9a3ede6416659f25794e9f1f9eb94009499918cc7e828cad9e23555e6e9dd8470881c2237e9610db356bcdff15c","name":"API_SP.POP.TOTL_DS2_en_csv_v2_1345178_extract.csv","type":"text/csv","lastModified":1602753709750,"size":7126},{"id":"011c7798903ac196294a965eb663810e9c714cc00fb26c270d4c28a879b0f199a49aaaee8c2ab1ff308f6629efefb327be3c6029826bd4c03eda0d355fe2972c","href":"https://static.observableusercontent.com/files/011c7798903ac196294a965eb663810e9c714cc00fb26c270d4c28a879b0f199a49aaaee8c2ab1ff308f6629efefb327be3c6029826bd4c03eda0d355fe2972c","name":"country-codes_extract.csv","type":"text/csv","lastModified":1602753709750,"size":20520}] 2d:{"id":"2c0c3eee1a6ebda6","slug":null,"title":" Données bancaires ","thumbnail":"926af180f0a9982fde41e9e61f5003470b2143c8d5ee861c751c89b27be9565c","access_level":"unlisted","create_time":"$D2020-10-15T09:21:49.750Z","update_time":"$D2026-03-05T16:04:32.604Z","view_time":null,"first_public_time":null,"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":15068,"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,"subscribed":null,"forks":2,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"title":" Données bancaires ","cells":[{"id":0,"value":"# Données bancaires \n## Les dépenses de proximité par carte bancaire des étrangers en France. Multiples petits de **graphiques à barres** sur une carte.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15054,"value":"#### Voir annexe 1 pour plus d'information sur les données ^{[[1](#footnote1)]}\n#### Voir annexe 2 pour les autres références ^{[[2](#footnote2)]} \n#### Voir annexe 3 pour la to do list ^{[[3](#footnote3)]} ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14104,"value":"md`# Row chart des dépenses par pays `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13935,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14624,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14646,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15018,"value":"_margin_dept = ({top: 100, right: 20, bottom: 100, left: 120})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15013,"value":"scale = d3\n .scaleTime()\n .domain([\n new Date(total_deptByCountry[0].key),\n new Date(total_deptByCountry[total_deptByCountry.length - 1].key)\n ])\n .rangeRound([_margin_dept.left, width - _margin_dept.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15024,"value":"width - _margin_dept.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15015,"value":"scale(new Date(total_deptByCountry[total_deptByCountry.length - 1].key))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15027,"value":"new Date(total_deptByCountry[total_deptByCountry.length - 1].key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15021,"value":"total_deptByCountry[total_deptByCountry.length - 1].key","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9541,"value":"md`# Carte interactive`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"graph_svg = DOM.download(await serialize(map_chart), selectedEncoding+'-indices-tourisme-'+select_pays+'.svg', 'Download as svg')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6305,"value":"graph_png = DOM.download(await rasterize(map_chart), selectedEncoding+'-indices-tourisme-'+select_pays+'.png', \"Download map as PNG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6324,"value":"csvBtn = button(raw_data_banque, 'raw_data_banque.csv');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13407,"value":"viewof select_pays = select({\n title: \"\",\n description: \"Choisissez un pays.\",\n options: data_pays_list,\n value :\"Allemagne\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13315,"value":"viewof selectedEncoding = select({\n title: '',\n description: 'Selectionnez l\\'indicateur ',\n options: ['valeur', 'volume'],\n value: 'volume'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1472,"value":"viewof select_scale = radio({\n title: \"\",\n description: \"Modifiez l'échelle\",\n options: ['Auto','150000','70000','35000','10000','5000','1000','500','100'],\n value: 'Auto'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8583,"value":"height = width*0.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8588,"value":"//margin_dept = ({top: 100, right: 20, bottom: 100, left: 120})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9249,"value":"md`## Synthèse en chiffre`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6367,"value":"printTable(data_banque .slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"viewof selectedRamp = select({\n title: 'Réglages ',\n description: 'Choisissez la rampe de couleur du graphique',\n options: (colorRamps).flat(), ////\n value: 'Oranges' // Inferno\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"ramp(selectedRamp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"viewof bgColor = color({\n value: \"#1a1a1a\",\n description: 'Choisissez la couleur de fond du graphique',\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":"viewof textColor = color({\n value: \"#333\",\n description: 'Choisissez la couleur du texte',\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3644,"value":"md`# DATA \ndepuis le site open data gouv permet de charger directement le fichier de données mis à jour quotidiennement`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9123,"value":"parse = d3.utcParse('%Y-%m')\n// parse(\"2020-03\") return 2020-03-01","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13241,"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 = date.getDate() + \" \"; // numero du jour\n var message = mois[date.getMonth()] + \" \"; // mois\n message += date.getFullYear();\n return message;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12963,"value":"md`### Raw_DATA_Banque`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12967,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13680,"value":"md`### Raw_DATA_Banque for selected country`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13345,"value":"data_banque = raw_data_banque.filter(d=>d.origine_pays == select_pays)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13192,"value":"md`### DATA Name Country for En to Fr Translation `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13157,"value":"code_name_country = d3.csvParse(await FileAttachment(\"country-codes_extract.csv\").text(), d3.autoType).filter(d=> d.official_name_en != null);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13206,"value":"md`### DATA country population`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13158,"value":"population_country = d3.csvParse(await FileAttachment(\"API_SP.POP.TOTL_DS2_en_csv_v2_1345178_extract.csv\") .text(), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13208,"value":"md`### Merge DATA Name & Country population`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13169,"value":"merge = (a1,a2) =>\n a1.map(itm => ({\n ...a2.find((item) => item.dep === itm.dep),\n ...itm\n }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13171,"value":"country_data = {return merge (code_name_country,population_country).map(obj => {\n return {\n country_name_en: obj.official_name_en,\n country_name_fr : obj.official_name_fr,\n population_2019 : obj['2019'],\n }}).filter(d=>d.country_name_fr == select_pays)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13689,"value":"md`### Merge Raw_DATA_Banque for selected country et country data `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13210,"value":"data_set = {return merge (data_banque,country_data).map(obj => {\n return {\n //annee: obj.annee,\n //mois: obj.mois,\n date : obj.date,\n date_txt : obj.date_texte,\n volume : +obj.volume,\n valeur : +obj.valeur,\n insee_reg :obj.insee_reg,\n dest_dept_nom : obj.dest_dept_nom,\n //dest_reg_name : obj.dest_reg_name,\n dest_dept_nb : obj.dest_dept_nb, \n org_country_en: obj.country_name_en,\n population_2019 : obj.population_2019,\n org_country_fr : obj.country_name_fr,\n }}).sort((a, b) => a.dest_dept_nb - b.dest_dept_nb)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4353,"value":"md`## DATA department position on the map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1465,"value":"/*raw_mosaique = d3.csv(\n \"https://raw.githubusercontent.com/ToulouseDataViz/COVID-19/master/data/raw_mosaique.csv\",\n d3.autoType\n)*/\n\nraw_mosaique = d3.csv(\n \"https://raw.githubusercontent.com/ToulouseDataViz/COVID-19/master/data/raw_mosaique_old.csv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1467,"value":"mosaique =raw_mosaique //.filter(d => d.INSEE_DEP !=\"96\" & d.INSEE_DEP !=\"97\" & d.INSEE_DEP !=\"98\" & d.INSEE_DEP !=\"99\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14754,"value":"dept_traduction = d3.scaleOrdinal()\n\t.domain(raw_mosaique.map(d=>d.INSEE_DEP))\n\t.range(raw_mosaique.map(d=>d.NOM_DEP_M)).unknown(\" \");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9528,"value":"md`## DATA treatment for map display`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9570,"value":"md `### Liste des jours extraite du jeu de données` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4884,"value":"Mapjour = new Map(data_set.map(c => [c.date_txt, c]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4890,"value":"jour_list = Array.from(Mapjour.keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13451,"value":"md`### liste des pays extraite du jeu de données`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13453,"value":"Mappays = new Map(raw_data_banque.map(c => [c.origine_pays, c]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13454,"value":"data_pays_list = Array.from(Mappays.keys()).sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5066,"value":"md`### Regroupements par département`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2869,"value":"nesting= d3.nest()\n .key(d => d.dest_dept_nb)\n .entries(data_set);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2874,"value":"nested_data_set = {\n return nesting.map(obj => {\n return {\n key : obj.key,\n valeur : obj.values.map(obj => {\n return { \n key : obj.date, \n value : obj.valeur , nom_dept : obj.dest_dept_nom, insee_reg : obj.insee_reg, dest_dept_nb : obj.dest_dept_nb}}),\n volume : obj.values.map(obj => {\n return { \n key : obj.date, \n value : obj.volume , nom_dept : obj.dest_dept_nom, nom_reg : obj.dest_reg_name, dest_dept_nb : obj.dest_dept_nb}}),\n \n }})}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13478,"value":"md`### Association des raw DATA Banque et des DATA department position`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"cartogram_data_ = mosaique.map(obj => Object.assign({}, obj, {\n data: nested_data_set.find(d => d.key === obj.INSEE_DEP.toString()),\n})).filter(d=>d.INSEE_DEP !='971' & d.INSEE_DEP !='972' & d.INSEE_DEP !='973' & d.INSEE_DEP !='974' & d.INSEE_DEP !='976' )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13707,"value":"md`### Traitement additionel pour le cas des absences de données `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13362,"value":"cartogram_data= {\n return cartogram_data_.map(obj => {\n return {\n INSEE_DEP : obj.INSEE_DEP,\n INSEE_REG : obj.INSEE_REG,\n POP_2018: obj.POP_2018,\n NOM_DEP_M: obj.NOM_DEP,\n NOM_DEP: obj.NOM_DEP,\n row: obj.row,\n column: obj.column,\n data : obj.data ? obj.data : {key : obj.INSEE_DEP, valeur : {}, volume :{}}\n }})}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13793,"value":"md`# Calcul du total par pays `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14728,"value":"sum_selectEncoding = d3.sum(raw_data_banque.map(d=>d[selectedEncoding]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13802,"value":"total_pays = d3.nest()\n .key(d=>d.origine_pays)\n .rollup(function(v) { return { \n dest_dept_nom : \"all_pays\",\n volume : d3.sum(v, d=> d.volume),\n valeur : d3.sum(v, d=> d.valeur),\n volume_pourcent : 100*d3.sum(v, d=> d.volume)/sum_selectEncoding,\n valeur_pourcent : 100*d3.sum(v, d=> d.valeur)/sum_selectEncoding, \n }; }) \n .entries(raw_data_banque)\n .sort((a, b) => b.value[selectedEncoding] - a.value[selectedEncoding])\n .slice(0, 40)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14611,"value":"md`# Calcul du total par départements `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14614,"value":"total_dept = d3.nest()\n .key(d => dept_traduction(d.dest_dept_nb))\n .rollup(function(v) { return { \n dest_dept_nom : \"all_dept\",\n volume : d3.sum(v, d=> d.volume),\n valeur : d3.sum(v, d=> d.valeur), \n volume_pourcent : 100*d3.sum(v, d=> d.volume)/sum_selectEncoding,\n valeur_pourcent : 100*d3.sum(v, d=> d.valeur)/sum_selectEncoding, \n }; }) \n .entries(raw_data_banque)\n .sort((a, b) => b.value[selectedEncoding] - a.value[selectedEncoding])\n .slice(0,40)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14630,"value":"md`# Calcul du total par date`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14634,"value":"total_deptByCountry = d3.nest()\n .key(d => d.date)\n .rollup(function(v) { return { \n volume : d3.sum(v, d=> d.volume),\n valeur : d3.sum(v, d=> d.valeur), \n }; }) \n .entries(raw_data_banque)\n .sort((a, b) => new Date (a.key) - new Date(b.key))\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14606,"value":"md`## Style for row chart total pays`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14082,"value":" html`\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13715,"value":"md`### Recherche des dates min et max du jeu de données global `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1514,"value":"minmaxValues = ({\n date_min: d3.min(raw_data_banque.map(d=>d.date)),\n date_max: new Date(d3.max(raw_data_banque.map(d=>d.date)).getTime()) \n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13559,"value":"date_max_plusUnMois = new Date (minmaxValues.date_max.getFullYear()+','+(minmaxValues.date_max.getMonth()+2)+',01')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13711,"value":"md`### Calcul du nombre de mois entre date min et date max`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13535,"value":"month_number = 12*(minmaxValues.date_max.getFullYear() - minmaxValues.date_min.getFullYear()) + minmaxValues.date_max.getMonth() - minmaxValues.date_min.getMonth()+1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3494,"value":"maxValues = ({\n y: select_scale=='Auto' ? checkVar(selectedEncoding) : select_scale})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"md`### Configuration`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6322,"value":"button = (data, filename = 'data.csv') => {\n if (!data) throw new Error('Array of data required as first argument');\n\n let downloadData;\n if (filename.includes('.csv')) {\n downloadData = new Blob([d3.csvFormat(data)], { type: \"text/csv\" });\n } else {\n downloadData = new Blob([JSON.stringify(data, null, 2)], {\n type: \"application/json\"\n });\n }\n\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n filename,\n //`Download ${filename} (~${size} KB)`\n `Download ${filename}`\n );\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3539,"value":"//parseDate = d3.timeParse('%d/%m/%Y');\nparseDate = d3.utcParse('%d/%m/%Y');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2009,"value":"format = d3.format(\".0f\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2463,"value":"//formatDateTitle =d3.timeFormat(\"%e %B %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1762,"value":"function checkVar (variable){\n if(variable == \"valeur\") \n return Math.round(d3.max(data_set.map(d=>d.valeur).flat())) \n if(variable == \"volume\") \n return Math.round(d3.max(data_set.map(d=>d.volume).flat())) \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"getText = d => {\n let text\n switch(selectedEncoding) {\n case 'valeur': {\n text = `${\"Valeur : \"+d3.format('.1f')(d.value)+\"\\n\"}`\n break\n }\n case 'volume': {\n text = `${\"Volume : \"+d3.format('.1f')(d.value)+\"\\n\"}`\n break\n }\n default:\n text = `${d.value}`\n break\n }\n return `${d3.timeFormat(\"%b %y\")(d.key)}\\n${text}Département - ${get_dep_name (d.dest_dept_nb)} `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5422,"value":"//dept_text = mosaique.map(d=>d.INSEE_DEP+ \" - \"+d.NOM_DEP)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5427,"value":"function get_dep_name (number){ \n var nom_dep= mosaique.find(d=> d.INSEE_DEP == number).NOM_DEP\n return nom_dep\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":893,"value":"get_range = ramp => {\n const maxRange = 4\n if (d3[`scheme${ramp}`] === undefined) {\n // this is a sequential, multi-hue value\n // so we'll need to do some minor work\n const sequentialScale = d3.scaleSequential(d3[`interpolate${ramp}`])\n .domain(z.domain())\n \n return [\n 0, \n maxValues[`highest_${selectedEncoding}`] / 2, \n maxValues[`highest_${selectedEncoding}`]\n ].map(d => sequentialScale(d))\n } else {\n // use a scheme!\n return d3[`scheme${ramp}`][maxRange]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"get_value = (d, key=selectedEncoding) => {\n // return data based on data key\n const { value } = cartogram_data\n .find(v => v.INSEE_DEP == d.dest_dept_nb)\n .data[key]\n .find(v => v.key === d.key)\n return value\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":582,"value":"get_values = key => nested_data_set.map(d => d[key].map(d => d.value)).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"clusterScale = scaleCluster()\n .domain(get_values(selectedEncoding))\n .range(get_range(selectedRamp))\n // Actual color scheme: ['rgb(251, 172, 165)', 'rgb(214, 48, 147)', 'rgb(73, 0, 106)']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"colorRamps = [\n ['Blues', 'Greens', 'Greys', 'Oranges', 'Purples', 'Reds'],\n ['BuGn', 'BuPu', 'GnBu', 'OrRd', 'PuBuGn', 'PuBu', 'PuRd', 'RdPu', 'YlGnBu', 'YlGn', 'YlOrBr', 'YlOrRd'],\n ['Viridis', 'Inferno', 'Magma', 'Plasma', 'Warm', 'Cool', 'CubehelixDefault'],\n ['BrBG', 'PRGn', 'PiYG', 'PuOr', 'RdBu', 'RdGy', 'RdYlBu', 'RdYlGn', 'Spectral'],\n ['Rainbow', 'Sinebow']\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1727,"value":"path = d3.geoPath()","pinned":true,"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":220,"value":"z = d3.scaleLinear()\n .domain([0, maxValues.y])\n .range([state_size, 0]);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"x_column = ({column}) => 0.4*column * (state_size + state_padding)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"y_column = ({row}) => 0.4*row * (state_size + state_padding)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"margin = ({top: 40, right: 20, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1511,"value":"ratioHW = 1.25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"state_padding = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"state_size = (width/ offset) ///","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"offset = 25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"md`### Libraries and imports`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6361,"value":"//https://observablehq.com/@jeremiak/download-data-button","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6364,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":607,"value":"scaleCluster = require('d3-scale-cluster@1.3.1/dist/d3-scale-cluster.min.js')","pinned":true,"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\",\"d3-regression\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"import {select, color, radio, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"import {ramp} from \"@mbostock/d3-color-schemes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6317,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3639,"value":"axios = require(\"axios@0.19.0/dist/axios.js\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3640,"value":"cheerio = require('https://bundle.run/cheerio@1.0.0-rc.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7342,"value":"import {toDataURL} from '@mootari/embedding-fonts-into-an-svg'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9296,"value":"footnote = (referencingCellName, number, text) => {\n return html`

^ ${text}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9307,"value":"//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9294,"value":"footnote1 = footnote(\"paragraph1\", 1, \"ANNEXE 1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9254,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9314,"value":"footnote2 = footnote(\"paragraph1\", 2, \"ANNEXE 2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9321,"value":"md`\nExplorateur de données inspiré de https://observablehq.com/@aboutaaron/small-multiple-chart-cartogram\n\nExplorateur de données inspiré de http://www.toulouse-dataviz.fr/covidoscope/html/index_covidOscope.html\n\nMarkdown-Style Footnotes Refined :https://observablehq.com/@jashkenas/markdown-style-footnotes#paragraph2\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9319,"value":"footnote3 = footnote(\"paragraph1\", 3, \"ANNEXE 3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9323,"value":"md`\nTo do list :\n- bloquer le zoom lors d'une action sur les sélecteurs\n- nice() pour les echelles des ordonnées. \n- regroupement de tous les pays et ajout \"all country \" dans le sélecteur de pays\nhttps://observablehq.com/@d3/d3-group\nhttps://observablehq.com/@t829702/d3-group-and-rollup-sortby-get-topn\n- Charger les open data directement depuis le site open data soft BPCE\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"