Santé Périnatale en France

% de naissances de mères de moins de 20 ans

% d’enfants de moins de 2,5kg

% de naissance avant 37 semaines

Births by mother age - comparison across areas

// barcode with value
Plot.plot({
  x: {label: "%"},
  y: {label: null,
   domain:["Moins de 20 ans",
      "20-24 ans",
      "25-29 ans",
      "30-34 ans",
      "35-39 ans",
      "40 ans et plus"]},
  marginLeft: 130,
    marks : [
        Plot.tickX(data_last.filter(function(x) {
  return x.isd == "Âge de la mère"}), {x: "value", y: "indicator", stroke:"lightgrey", channels: {Area: "code_geo"}, tip: true}),
        Plot.tickX(filtered_last.filter(function(x) {
  return x.isd == "Âge de la mère"}), {x: "value", y: "indicator", stroke:"red"})
    ]
    })

Births by mother age - change over time

Plot.plot({
    x:{label: "Année", domain: [2012, 2022], tickFormat: ""},
    y:{label: "Différence au national (%)"},
    color: {
      legend: true,
      type: "categorical",
        domain:[  "Moins de 20 ans",
      "20-24 ans",
      "25-29 ans",
      "30-34 ans",
      "35-39 ans",
      "40 ans et plus"]}
    ,
    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: "Département: ", 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 == "Naissances prématurées"})

filtered_c23 = filtered.filter(function(x) {
  return x.isd == "Poids de naissance"})

filtered_c24 = filtered.filter(function(x) {
  return x.isd == "Âge de la mère"})

// 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: "Âge de la mère", label: "Indicateur: "}
)

viewof indicator = Inputs.radio(
   data.filter((x)=>{return x.isd == isd}).map(d =>d.indicator), 
   {sort: true, unique: true, value: "25-29 ans", 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})
  ]
})

Données Drees.

Réalisé par Thomas Vroylandt, Kantiles.