29:null 2a:["$","title",null,{"children":"Saisonnalité des mariages (1856-2019) - dissection d'un graphique heatmap | Éric Mauvière | Observable"}] 2f:Ta52,saison_mariages1 = { let elt_svg = svg` ` let gr_d3 = d3.select(elt_svg) yield elt_svg //rendu intermédiaire pour pouvoir calculer l'emprise des axes et ajuster les marges en fonction /* AXES */ let an_to_x = draw_x_y_axis_responsive(gr_d3) let ecart_to_fill = d3.scaleDiverging() .domain([domain_ecart[0], 0, domain_ecart[1]]) .interpolator(d3['interpolate' + scheme]) /* RECTANGLES */ let rects_group = d3.select(elt_svg).select('g.rects') rects_group.selectAll('rect') .data(tb_mariages) .join('rect') .attr('height', mois_to_y.bandwidth()) .attr('width', d => an_to_x(d.fin == 2019 ? d.fin : d.fin + 1) - an_to_x(d.debut)) .attr('x', d => an_to_x(d.debut)) .attr('y', d => mois_to_y(d.mois)) .attr('fill', d => ecart_to_fill(d.ecart)) .attr('stroke', d => ecart_to_fill(d.ecart)) .append('title').text(d => 'Écart relatif : ' + (d.ecart > 0 ? '+' : '') + d.ecart.toLocaleString() + ' %') /* LEGENDE */ let leg_group = gr_d3.select('g.legend'), leg = legend({ color: ecart_to_fill, width: 200 }) leg_group.attr('transform', `translate(${bars_svg_w/2 - 100}, ${bars_svg_h - 50})`) .append(() => leg) /* STYLES */ gr_d3.append('defs') .html(``) mutable render_chart1 = true return elt_svg }30:T431,saison_mariages2 = { let gr = saison_mariages1.cloneNode(true), gr_d3 = d3.select(gr) render_chart1 let max_abs_ecart = Math.max(-domain_ecart[0], 0, domain_ecart[1]) let ecart_to_fill = d3.scaleDiverging() .domain([-max_abs_ecart, 0, max_abs_ecart]) .interpolator(d3['interpolate' + scheme]) yield gr let an_to_x = draw_x_y_axis_responsive(gr_d3) /* RECTANGLES */ let rects_group = gr_d3.select('g.rects') rects_group.selectAll('rect') .data(tb_mariages) .join('rect') .attr('fill', d => ecart_to_fill(d.ecart)) .attr('stroke', d => ecart_to_fill(d.ecart)) .attr('width', d => an_to_x(d.fin == 2019 ? d.fin : d.fin + 1) - an_to_x(d.debut)) .attr('x', d => an_to_x(d.debut)) /* LEGENDE */ let leg_group = gr_d3.select('g.legend'), leg = legend({ color: ecart_to_fill, width: 200 }) leg_group.select('svg').remove() leg_group.append(() => leg) return gr }31:T486,evol_2010_2019 = { vl.vega.timeFormatLocale(locale); vl.vega.formatLocale(locale); let rule = vl.markRule({stroke:'#999'}) .encode(vl.y().datum(1)) return vl.layer( vl.markBar() .encode( vl.x().fieldN('mois').sort('mois') .axis({labelAngle: 0, grid: false, tickColor: "#fff", title: null, bandPosition: 1, labelPadding: -1, labelExpr:width < 600 ? "monthAbbrevFormat(datum.label-1)": "monthFormat(datum.label-1)"}), vl.y().fieldQ('ratio').axis({grid: true}).scale({domainMax: 2}).title(null), vl.color().fieldN('TRIM').scale({range:color_trims}).legend(null), vl.tooltip().fieldQ('ratio').format(".3") ), rule) .data( tb_mariages.filter(d => d.plage == '2010-2019') ) .transform( vl.calculate('~~(( datum.mois + 1 == 13 ? 0 : datum.mois) / 3)').as('TRIM') ) .title({ text: ['Distribution mensuelle des mariages', "période 2010-2019 - écart à l'uniformité (ratio)"], anchor: 'middle' }) .width(bars_svg_w - 35) .height(bars_svg_h - 60) .render({renderer: 'svg'}) }32:T528,saison_mariages3 = { let gr = saison_mariages1.cloneNode(true), gr_d3 = d3.select(gr) render_chart1 yield gr /* AXES */ let an_to_x = draw_x_y_axis_responsive(gr_d3) let max_abs_ecart = Math.max(-domain_log_ratio[0], 0, domain_log_ratio[1]) let ecart_to_fill = d3.scaleDiverging() .domain([-max_abs_ecart, 0, max_abs_ecart]) .interpolator(d3['interpolate' + scheme]) /* RECTANGLES */ let rects_group = gr_d3.select('g.rects') rects_group.selectAll('rect') .data(tb_mariages) .join('rect') .attr('fill', d => ecart_to_fill(d.log_ratio)) .attr('stroke', d => ecart_to_fill(d.log_ratio)) .attr('width', d => an_to_x(d.fin == 2019 ? d.fin : d.fin + 1) - an_to_x(d.debut)) .attr('x', d => an_to_x(d.debut)) /* LEGENDE */ let fmt = new Intl.NumberFormat('fr', { maximumSignificantDigits: 3 }) let leg_group = gr_d3.select('g.legend'), leg = legend({ color: ecart_to_fill, width: 200, tickValues:[1/3, 1/2, 1, 2, 3].map(Math.log), tickFormat: d => fmt.format(Math.exp(d)) }) leg_group.select('svg').remove() leg_group.append(() => leg) return gr }33:T5e2,saison_mariages4 = { let gr = saison_mariages3.cloneNode(true), gr_d3 = d3.select(gr) yield gr let an_to_x = draw_x_y_axis_responsive(gr_d3) /* CONVERSION COULEURS */ let color_interpolator = d3.interpolatePuOr color_interpolator = grey_negative // 🔑 let max_abs_ecart = Math.max(-domain_log_ratio[0], 0, domain_log_ratio[1]) let ecart_to_fill = d3.scaleDiverging() .domain([-max_abs_ecart, 0, max_abs_ecart]) .interpolator(color_interpolator) /* RECTANGLES */ let rects_group = gr_d3.select('g.rects') rects_group.selectAll('rect') .data(tb_mariages) .join('rect') .attr('fill', d => ecart_to_fill(d.log_ratio)) .attr('stroke', d => ecart_to_fill(d.log_ratio)) .attr('width', d => an_to_x(d.fin == 2019 ? d.fin : d.fin + 1) - an_to_x(d.debut)) .attr('x', d => an_to_x(d.debut)) /* LEGENDE */ let fmt = new Intl.NumberFormat('fr', { maximumSignificantDigits: 3 }) let leg_group = gr_d3.select('g.legend'), leg = legend({ color: ecart_to_fill, width: 200, tickValues:[1/3, 1/2, 1, 2, 3].map(Math.log), tickFormat: d => fmt.format(Math.exp(d)) }) leg_group.select('svg').remove() leg_group.append(() => leg) gr_d3.select('.header tspan:last-of-type').text("Mise en évidence de la sur-représentation") return gr }34:T665,saison_mariages5 = { let gr = saison_mariages3.cloneNode(true), gr_d3 = d3.select(gr) yield gr let an_to_x = draw_x_y_axis_responsive(gr_d3) /* CONVERSION COULEURS */ let color_interpolator = grey_positive // 🔑 let max_abs_ecart = Math.max(-domain_log_ratio[0], 0, domain_log_ratio[1]) let ecart_to_fill = d3.scaleDiverging() .domain([-max_abs_ecart, 0, max_abs_ecart]) .interpolator(color_interpolator) let ecart_to_fill_i = d3.scaleDiverging() .domain([max_abs_ecart, 0, -max_abs_ecart]) .interpolator(t => color_interpolator(1-t)) /* RECTANGLES */ let rects_group = gr_d3.select('g.rects') rects_group.selectAll('rect') .data(tb_mariages) .join('rect') .attr('fill', d => ecart_to_fill(d.log_ratio)) .attr('stroke', d => ecart_to_fill(d.log_ratio)) .attr('width', d => an_to_x(d.fin == 2019 ? d.fin : d.fin + 1) - an_to_x(d.debut)) .attr('x', d => an_to_x(d.debut)) /* LEGENDE */ let fmt = new Intl.NumberFormat('fr', { maximumSignificantDigits: 3 }) let leg_group = gr_d3.select('g.legend'), leg = legend({ color: ecart_to_fill_i, width: 200, tickValues:[1/3, 1/2, 1, 2, 3].map(Math.log), tickFormat: d => fmt.format(Math.exp(d)) }) leg_group.select('svg').remove() leg_group.append(() => leg) gr_d3.select('.header tspan:last-of-type').text("Mise en évidence de la sous-représentation") return gr }35:T451,saison_mariages6 = { let elt_svg = svg` ` let gr_d3 = d3.select(elt_svg) let grpos = saison_mariages4.cloneNode(true), grpos_d3 = d3.select(grpos), grneg = saison_mariages5.cloneNode(true), grneg_d3 = d3.select(grneg) gr_d3.select('.gpos').append(g => grpos) gr_d3.select('.gneg').append(g => grneg) grpos_d3.select('.header tspan:first-of-type').text("") grpos_d3.select('.header tspan:last-of-type').text("Mise en évidence de la sur-représentation") grneg_d3.select('.header tspan:first-of-type').text("") grneg_d3.select('.header tspan:last-of-type').text("Mise en évidence de la sous-représentation") return elt_svg }36:T82c,saison_mariages7 = { let gr = saison_mariages3.cloneNode(true), gr_d3 = d3.select(gr) yield gr let an_to_x = draw_x_y_axis_responsive(gr_d3) /* CONVERSION COULEURS */ let color_interpolator = d3['interpolate' + scheme] if (typ_pal.indexOf('positif') > 0 ) color_interpolator = grey_negative // 🔑 if (typ_pal.indexOf('négatif') > 0 ) color_interpolator = grey_positive // 🔑 let max_abs_ecart = Math.max(-domain_log_ratio[0], 0, domain_log_ratio[1]) let ecart_to_fill = d3.scaleDiverging() .domain([-max_abs_ecart, 0, max_abs_ecart]) .interpolator(color_interpolator) let ecart_to_fill_i = d3.scaleDiverging() // 🔑 .domain([max_abs_ecart, 0, -max_abs_ecart]) .interpolator(t => color_interpolator(1-t)) /* RECTANGLES */ let rects_group = gr_d3.select('g.rects') rects_group.selectAll('rect') .data(tb_mariages) .join('rect') .attr('fill', d => ecart_to_fill(d.log_ratio)) .attr('stroke', d => ecart_to_fill(d.log_ratio)) .attr('width', d => an_to_x(d.fin == 2019 ? d.fin : d.fin + 1) - an_to_x(d.debut)) .attr('x', d => an_to_x(d.debut)) /* LEGENDE */ let fmt = new Intl.NumberFormat('fr', { maximumSignificantDigits: 3 }) let leg_group = gr_d3.select('g.legend'), leg = legend({ color: typ_pal.indexOf('négatif') > 0 ? ecart_to_fill_i : ecart_to_fill, width: 200, tickValues:[1/3, 1/2, 1, 2, 3].map(Math.log), tickFormat: d => fmt.format(Math.exp(d)) }) leg_group.select('svg').remove() leg_group.append(() => leg) if (typ_pal.indexOf('positif') > 0 ) gr_d3.select('.header tspan:last-of-type').text("Mise en évidence de la sur-représentation") if (typ_pal.indexOf('négatif') > 0 ) gr_d3.select('.header tspan:last-of-type').text("Mise en évidence de la sur-représentation") return gr }37:T4b9,draw_x_y_axis_responsive = function(gr_d3) { let draw_y_axis = d3.axisLeft(mois_to_y) .tickSize(0).tickPadding(5).tickFormat(bars_svg_w < 550 ? fmt_mois_court : fmt_mois_long) // 🔑 let g_y_axis = gr_d3.select('g.y_axis') .attr('transform', `translate(${margins.left}, 0)`) draw_y_axis(g_y_axis) let selmois = gr_d3.selectAll('g.y_axis .tick text'), mois_max_width_px = d3.max(Array.from(selmois), d => d.getComputedTextLength()), marginLeft0 = 20, new_margin_left = marginLeft0 + mois_max_width_px // 🔑 g_y_axis.attr('transform', `translate(${new_margin_left}, 0)`) let an_to_x = d3.scaleLinear() .domain(domain_an) .range([new_margin_left, bars_svg_w - margins.right]) let draw_x_axis = d3.axisBottom(an_to_x) .tickValues(ticks).tickFormat(String) // 🔑 let g_x_axis = gr_d3.select('g.x_axis') .attr('transform', `translate(0, ${bars_svg_h - margins.bottom})`) draw_x_axis(g_x_axis) draw_x_axis.tickValues(ticks_responsive(an_to_x, gr_d3.node())) draw_x_axis(g_x_axis) return an_to_x }38:[{"id":"43c23fdda395767f57eccb670ae950044b3c2202339d70940ec501222d4de5436d48748f0ed9968512f554ce787cfbba69a1e519dcf21746343a2e98666fc776","href":"https://static.observableusercontent.com/files/43c23fdda395767f57eccb670ae950044b3c2202339d70940ec501222d4de5436d48748f0ed9968512f554ce787cfbba69a1e519dcf21746343a2e98666fc776","name":"heatmap_insee.png","type":"image/png","lastModified":1613641649278.468,"size":27298}] 2d:{"id":"086aebc1a1db12af","slug":"saisonnalite-des-mariages-1856-2019","title":"Saisonnalité des mariages (1856-2019) - dissection d'un graphique heatmap","thumbnail":"6fd5339e75616a368ab1300ea2eb9e97b4c11d13c9dbe9b991fe4586d0fa78b1","access_level":"public","create_time":"$D2021-02-18T09:45:36.205Z","update_time":"$D2022-09-18T13:10:45.011Z","view_time":null,"first_public_time":"$D2021-02-19T10:27:11.480Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"cd09b02ddc62abda","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":"starter_2024"},"version":503,"publish_version":503,"role":null,"authored":false,"authors":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null}],"members":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Saisonnalité des mariages (1856-2019) - dissection d'un graphique heatmap","cells":[{"id":0,"value":"md`# Saisonnalité des mariages (1856-2019) - dissection d'un graphique heatmap\n\nC’est un graphique éblouissant que l’Insee vient de publier dans une [nouvelle étude sur la saisonnalité des mariages](https://www.insee.fr/fr/statistiques/5018214). Celle-ci examine 150 ans de données, remontant jusqu’en 1856.\n\nQuand se marie-t-on, qu’est-ce qui a changé en plus d’un siècle ? L’étude de l’Insee synthétise ce jeu de données historiques en un graphique original et frappant à plus d’un titre.\n\nIl repose tout d’abord sur un indicateur brillant : l’écart à la moyenne, c’est-à-dire à la situation si l’on se mariait sans aucune préférence de date. Il est radiant aussi par le choix des couleurs, très lumineuses et très contrastées, il en met vraiment « plein la vue » !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\n

Source : [Insee](https://www.insee.fr/fr/statistiques/5018214)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"md `### Examen des données\nJe charge les données à partir d'une version CSV du classeur Excel mis à disposition par l'Insee. Il présente un 'écart' (relatif) : en moyenne entre 1856 et 1869, les mariages de janvier sont supérieurs de 27,7 % au nombre de mariages attendu si le même nombre de mariages était célébré chaque jour de l’année.\n\nJ'y ajoute deux indicateurs dérivés que j'expliciterai plus loin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof tb_mariages = {\n let url = 'https://static.data.gouv.fr/resources/tests-arrows/20210217-152354/ecart-mariages-mensuel.csv'\n return (await aq.loadCSV(url))\n .derive({ ratio: d => 1 + (d.ecart / 100) })\n .derive({ log_ratio: d => Math.log(d.ratio) })\n .view(5)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"md `Voici, avec l'aide d'Arquero, une version transposée des seuls ratios, qui met en évidence les mois en colonnes, et les valeurs extrêmes (<= 0.5 ou >= 2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"table_mariages = {\n let tbl_fmt = d3.range(1,13) // formatage des colonnes avec mise en évidence des extrêmes (fonction highlight())\n .reduce( (accumulator, v) => {\n accumulator[String(v)] = highlight()\n return accumulator\n }, {} )\n \n let pivot_mariages = tb_mariages.groupby('plage')\n .pivot('mois', 'ratio', {sort: false}) // Arquero !\n \n return Table(pivot_mariages, {format: tbl_fmt})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md `### Construction du graphique de type 'heatmap'\nVoici un premier résultat brut, en version transposée (année en axe x) avec une palette Color-Brewer, plus 'accessible' :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"md `Examinant la légende, je note une dissymétrie entre extrêmes négatif et positif. En effet l’écart le plus élevé en négatif est de - 71 %, alors que le maxi culmine à + 126 %. Or ma palette divergente est rigoureusement symétrique. Le fait que deux couleurs également foncées soit affectées à des grandeurs en valeur absolue si différentes m’interpelle.\n\nJe suis donc tenté de **rééquilibrer la palette de couleur** en l’étalonnant sur l’intervalle [- 126, + 126], ce qui m’amène à cette représentation. Et en effet, les écarts positifs extrêmes, bien supérieurs aux négatifs, ressortent davantage :\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md `Voici un zoom sur la période 2010-2019 :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md `La sur-représentation des mois de juin à septembre est manifeste. Mais la sous-représentation de janvier et février me parait plus criante encore. Et en effet, janvier est plus de 3 fois inférieur à la moyenne, alors que juin n’est que 2 fois supérieur à la droite d’uniformité. Avec ma première “heatmap”, j’ai cru opérer un rééquilibrage qui manifestement ne traduit pas correctement la situation.\n\nComme l'explique cet [article de Mike Bostock](https://observablehq.com/@mbostock/methods-of-comparison-compared), il y a dissymétrie fondamentale entre valeurs négatives et positives quand on considère un écart relatif. Car celui-ci ne peut excéder, en négatif, - 100 % (c’est à dire descendre sous 0 !), alors qu’il peut ici aller jusqu’à + 1 200 % (cas extrême où un même mois concentrerait tous les mariages).\n\nJe remplace donc l'écart relatif (m - a) / a par le ratio m/a, dont je prends le log pour obtenir une représentation symétrique :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md `Voilà qui est plus satsisfaisant, en tout cas plus fidèle aux données d'origine. \n\n### Versions distinctes ('small multiples')\nPour faciliter l'analyse des écarts, je choisis de diviser ce graphique en deux, dédiant chaque variante à l'un des versants : sur-représentation et sous-représentation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"md `Pour le plaisir du montage et du partage, en voici une version combinée en un seul graphique :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"md `### Intégration de diverses palettes de couleur \n\nVoici en fin de quoi jouer avec différentes palettes de couleurs, considérez celle qui vous convient le mieux :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"viewof schemes = Select(colors, {format: x => x.lib, value: \"PiYG\", label: \"Palette\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"viewof typ_pal = Select(['Palette 2 couleurs','Emphase écart positif','Emphase écart négatif'], {value: \"2 couleurs\", label: \"Mode de coloration\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md `## Annexes\n\nCi-dessous les éléments ayant permis la réalisation des graphiques et tableaux.\n\n### Paramètres`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"bars_svg_h = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"bars_svg_w = Math.min(width, 700)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"margins = {\n return {top: 50, left: 70, right: 20, bottom: 60}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"colors = [{id:'PiYG', lib:'Violets-Verts'}, {id:'PuOr', lib:'Bleus-Oranges'}, {id:'BrBG', lib:'Bruns-Verts'}, {id:'RdBu', lib:'Rouges-Bleus'}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"color_trims = ['#a2c6c8', '#cdd975', '#f6c580', '#eca7be']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"d3.schemeRdBu","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md `### Calculs intermédiaires`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"scheme = schemes.id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"domain_ratio = d3.extent(tb_mariages, d => d.ratio) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"domain_ecart = d3.extent(tb_mariages, d => d.ecart) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"domain_log_ratio = d3.extent(tb_mariages, d => d.log_ratio)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"domain_an = [ d3.min(tb_mariages, d => d.debut), d3.max(tb_mariages, d => d.fin) ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"domain_mois = [...new Set([...tb_mariages.column('mois')])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"ticks = {\n let a = [...tb_mariages.column('debut')].concat( [...tb_mariages.column('fin')].slice(-1) )\n \n let reducer = (accumulator, currentValue) => {\n let last = accumulator.length > 0 ? accumulator[accumulator.length - 1] : null \n return accumulator.length == 0 || currentValue - last >= 7 ? accumulator.concat(currentValue) : accumulator \n }\n \n return a.reduce(reducer, [])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"mutable render_chart1 = false ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md `### Fonctions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"grey_positive = t => t > 0.5 ? togrey(d3['interpolate' + scheme](t)) : d3['interpolate' + scheme](t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"grey_negative = t => t < 0.5 ? togrey(d3['interpolate' + scheme](t)) : d3['interpolate' + scheme](t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"togrey = c => {\n let l = d3.rgb(c).r* 0.3 + d3.rgb(c).g * 0.59 + d3.rgb(c).b * 0.11\n return d3.rgb(l,l,l)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"mois_to_y = d3.scaleBand()\n .domain(domain_mois)\n .range([margins.top, bars_svg_h - margins.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"ticks_responsive = function(an_to_x, gr) {\n let a = [...new Set([...tb_mariages.column('debut'), ...tb_mariages.column('fin')])] // valeurs uniques\n let first_year_label_length = Math.ceil( d3.select(gr).select(\"g.x_axis .tick text\").node().getComputedTextLength() )\n \n let reducer = (accumulator, currentValue) => {\n let last = accumulator.length > 0 ? accumulator[accumulator.length - 1] : null \n return accumulator.length == 0 || ( an_to_x(currentValue) - an_to_x(last) > first_year_label_length + 1 ) \n ? accumulator.concat(currentValue) \n : accumulator \n }\n \n return a.reduce(reducer, [])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"fmt_mois_long = function(d) {\n let dt = new Date(\"2000-\" + d + \"-1\"),\n s = dt.toLocaleString(undefined,{month: 'long'})\n return s.substr(0,1).toUpperCase() + s.substr(1) ;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"fmt_mois_court = function(d) {\n let dt = new Date(\"2000-\" + d + \"-1\"),\n s = dt.toLocaleString(undefined,{month: 'short'})\n return s.substr(0,1).toUpperCase() + s.substr(1) ;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function highlight() {\n return x => html`

2 ? 'green' : 'auto'};\n float: right;\n padding-right: 3px;\n padding-left: 3px;\n box-sizing: border-box;\n color: ${x<0.5 ? 'white' : x > 2 ? 'white' : 'auto'};\">${(Math.round(100*x)/100).toLocaleString(\"fr\")}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md `### Librairies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"import { vl } from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {Select, Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"import {locale } from '@ericmauviere/arquero-table-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2e:"$2d:body"