Birth indicators in France

% of births from mother aged under 20

% of babies borned under 2.5kg

% of births before 37 weeks

Births by mother age - comparison across areas

// todo : function

// barcode with value
Plot.plot({
  x: {label: "%"},
  y: {label: null,
   domain:["Under 20 years old",
            "20-24 years old",
            "25-29 years old",
            "30-34 years old",
            "35-39 years old",
            "40 years old and above"]},
  marginLeft: 130,
    marks : [
        Plot.tickX(data_last.filter(function(x) {
  return x.isd == "Births according to mother age"}), {x: "value", y: "indicator", stroke:"lightgrey", channels: {Area: "code_geo"}, tip: true}),
        Plot.tickX(filtered_last.filter(function(x) {
  return x.isd == "Births according to mother age"}), {x: "value", y: "indicator", stroke:"red"})
    ]
    })

Births by mother age - change over time

// ajouter plus grande valeur ou derniere
Plot.plot({
    x:{label: "Year", domain: [2012, 2022], tickFormat: ""},
    y:{label: "Difference to France (in %)"},
    color: {
      legend: true,
      type: "categorical",
      domain:["Under 20 years old",
            "20-24 years old",
            "25-29 years old",
            "30-34 years old",
            "35-39 years old",
            "40 years old and above"]
    },
    marks : [
        Plot.ruleY(filtered_c24, {x1: 2012, x2: 2022, y: 0, stroke: "grey"}),
        Plot.lineY(filtered_c24, {x: "annee", y: "diff", stroke: "indicator", marker: "circle", tip: true})

    ]
    })

depFrance = FileAttachment("data/raw.topojson").json();
depContours = topojson.feature(depFrance, "France");

projection = d3
  .geoMercator()
  .center([2, 47]) // GPS of location to zoom on
  .scale(800) // This is like the zoom
  .translate([220 / 2, 220 / 2]);

pathGenerator = d3.geoPath(projection);

// France map function
// inspired by https://observablehq.com/@danielkerrigan/synchronized-map-input
frMap = (value) => {
  const svg = d3.create("svg").attr("width", 220).attr("height", 220);

  const statesDrawn = svg
    .selectAll(".state")
    .data(depContours.features)
    .join("path")
    .attr("class", "state")
    .attr("d", pathGenerator)
    .attr("fill", "white")
    .attr("stroke", "grey")
    // sending updates:
    // when a state is clicked, set the value property and emit an input event
    .on("click", (event, d) =>
      svg.property("value", d.properties.INSEE_DEP).dispatch("input")
    );

  // receiving updates:
  // update the map in the setter
  Object.defineProperty(svg.node(), "value", {
    get() {
      return value;
    },
    set(v) {
      value = v;
      statesDrawn
        .attr("fill", (d) => (d.properties.INSEE_DEP === v ? "blue" : "white"))
        .attr("opacity", (d) => (d.properties.INSEE_DEP === v ? 0.5 : 1.0));
    },
  });

  // initial value
  svg.property("value", value);

  return svg.node();
}

Inputs.bind(
  Inputs.select(
    new Map(depContours.features.map(d => [d.properties.LIBELLE_DEPARTEMENT, d.properties.INSEE_DEP])), 
  {sort: true, label: "Select an area: ", format: ([name, value]) => `${name}`}), 
  viewof dep
  )

viewof dep = frMap("75")

filtered = data.filter(function(x) {
  return dep == x.code_geo ;
})

// filter for each graph
// to do - function to wrap that
filtered_c22 = filtered.filter(function(x) {
  return x.isd == "Premature births by week of amenorrhea"})

filtered_c23 = filtered.filter(function(x) {
  return x.isd == "Births according to child weight"})

filtered_c24 = filtered.filter(function(x) {
  return x.isd == "Births according to mother age"})

// last year
data_last = data.filter(function(x) {
  return x.annee == 2022})

filtered_last = data_last.filter(function(x) {
  return dep == x.code_geo})

viewof isd = Inputs.radio(
   data.map(d => d.isd), 
   {sort: true, unique: true, value: "Births according to mother age", label: "Indicator: "}
)

viewof indicator = Inputs.radio(
   data.filter((x)=>{return x.isd == isd}).map(d =>d.indicator), 
   {sort: true, unique: true, value: "25-29 years old", label: "Dimension: "}
)

Grid cartogram of choosen indicator and dimension

// indicateur global sur un graph
Plot.plot({
  height: 700,
  width: 700,
  axis: null,
  color: {
    type: "linear",
    scheme: "gnbu"
  },
  marks: [
    Plot.cell(data_grid_filtered, {x: "col", y: "row", fill: "value", inset: 0.5, tip: true}),
    Plot.text(data_grid_filtered, {x: "col", y: "row",  text: "code", fill: "black", dy: -5}),
    Plot.text(data_grid_filtered, {x: "col", y: "row",  text: "value", fill: "black", dy: 7, fillOpacity: 0.6})
  ]
})

// faire un sub fichier pour voir si c’est possible

This dashboard is an exploration around some context indicators about births in France. It aims at showing some capabilities of Observable JS and Quarto Dashboard to display data in a reactive context. Data cleaning and wrangling was done in R by Kantiles. Code is available on Github.

Data comes from France’s Ministry of Health.

Built by Thomas Vroylandt at Kantiles.

This vizualisation hasn’t been approved by the Ministry of Health and should only be use as a demonstrator. Please see the official dashboard on VILAS.