Penguins, meet Quarto!

departements = JSON.parse(dpt)
departements_centroid = JSON.parse(dpt_centroid)
departements_line = JSON.parse(dpt_line)

otex_communes = JSON.parse(otex)
pbs_communes = JSON.parse(pbs)

departements.crs =  {
  "type": "name",
  "properties": {
    "name": "epsg:2154"
    }
  }

geo = require("geoverview@1.2.1")
bertin = require("bertin@1.2.4")

viewof nbreaks = Inputs.range([3, 9], { label: "Nombre de classes", step: 1, value: 7 })
bertin.draw({
  params: { projection: d3.geoIdentity().reflectY(true) },
  layers: [
   {
      type: "header",
      text: "PBS moyenne par commune",
      fill: "#383838"
    },
  {    type: "layer",
       geojson: departements_line,
       tooltip: ["Dept:","$nom", "pop:", "$population"],
       stroke: "red",
       strokeWidth: 4
   },
  {   type: "layer",
      geojson: pbs_communes,
      tooltip: ["commune:","$nom", "pbs totale:", "$pbs"],
      fill: {
        type: "choro",
        values: "pbs_moy",
        nbreaks: nbreaks,
        method: "quantile",
        colors: "GnBu",
        leg_round: -1,
        leg_divisor: 1000,
        leg_title: `pbs moyenne (k€)`,
        leg_x: 70,
        leg_y: 400
      }
  }

  ]
})

Meet Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see https://quarto.org.