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 }