Laboratory seizures over 10-year periods

brand = ({
  purple: "#403A5E",
  taupe:  "#AEA793",
  green:  "#5D8E74",
  blue:   "#3D8CBC",
  maroon: "#9F344D",
  orange: "#E3A261"
})

grupoColors = ({
  "Mariguana":              brand.green,
  "Cocaina":                brand.blue,
  "Opioides tradicionales": brand.orange,
  "Metanfetamina":          brand.purple,
  "Fentanilo":              brand.maroon
})

labColors = ({
  "COCAINA":       brand.blue,
  "HEROINA":       brand.orange,
  "METANFETAMINA": brand.purple
})

metodoColors = ({
  "Fumigación": brand.blue,
  "Manual":     brand.green
})

// Grupos presentes en incineraciones (sin fentanilo), en orden
incGrupos = ["Mariguana", "Cocaina", "Opioides tradicionales", "Metanfetamina"]

plotStyle = ({fontFamily: "Lato, system-ui, sans-serif", fontSize: "16px"})

i18n = ({
  es: {
    locale:   "es-MX",
    period:   "Período",
    group:    "Grupo de droga",
    all:      "Todos",
    events:   "eventos",
    event:    "evento",
    year:     "Año",
    pctEvents:"% de eventos",
    drugType: "Tipo de droga",
    term:     "Administración presidencial",
    ops:      "Operaciones militares",
    download: "⬇ Descargar datos (CSV)",
    grupos: {
      "Mariguana":              "Mariguana",
      "Cocaina":                "Cocaína",
      "Opioides tradicionales": "Opioides tradicionales",
      "Metanfetamina":          "Metanfetamina",
      "Fentanilo":              "Fentanilo"
    },
    labs: {COCAINA: "Cocaína", HEROINA: "Heroína", METANFETAMINA: "Metanfetamina"},
    drogas: {
      mariguana: "Mariguana", semilla_de_mariguana: "Semilla de mariguana",
      cocaina: "Cocaína", goma_de_opio: "Goma de opio", heroina: "Heroína",
      semilla_de_amapola: "Semilla de amapola", metanfetamina: "Metanfetamina",
      fentanilo: "Fentanilo", pastillas_de_fentanilo: "Pastillas de fentanilo",
      ampolletas_de_fentanilo: "Ampolletas de fentanilo"
    },
    unidades: {kg: "kg", pastillas: "pastillas", ampolletas: "ampolletas"}
  },
  en: {
    locale:   "en-US",
    period:   "Period",
    group:    "Drug group",
    all:      "All",
    events:   "events",
    event:    "event",
    year:     "Year",
    pctEvents:"% of events",
    drugType: "Drug type",
    term:     "Presidential term",
    ops:      "Military operations",
    download: "⬇ Download data (CSV)",
    grupos: {
      "Mariguana":              "Marijuana",
      "Cocaina":                "Cocaine",
      "Opioides tradicionales": "Traditional opioids",
      "Metanfetamina":          "Methamphetamine",
      "Fentanilo":              "Fentanyl"
    },
    labs: {COCAINA: "Cocaine", HEROINA: "Heroin", METANFETAMINA: "Methamphetamine"},
    drogas: {
      mariguana: "Marijuana", semilla_de_mariguana: "Marijuana seed",
      cocaina: "Cocaine", goma_de_opio: "Opium gum", heroina: "Heroin",
      semilla_de_amapola: "Poppy seed", metanfetamina: "Methamphetamine",
      fentanilo: "Fentanyl", pastillas_de_fentanilo: "Fentanyl pills",
      ampolletas_de_fentanilo: "Fentanyl ampoules"
    },
    unidades: {kg: "kg", pastillas: "pills", ampolletas: "ampoules"}
  }
})[lang]

// Números: miles separados con espacio indivisible ("10 000") y punto decimal,
// igual en español e inglés. Sin coma de miles (estilo de la casa).
fmtNum = (v, maxDec = 2) => {
  const s = Number(v).toLocaleString("en-US", {maximumFractionDigits: maxDec, useGrouping: false})
  const [int, dec] = s.split(".")
  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, "\u00A0")
  return dec ? `${grouped}.${dec}` : grouped
}

// Rangos con guion corto ("1990-2000") se muestran con raya ("1990–2000")
fmtRange = s => String(s).replace("-", "–")

// Ancho de las gráficas: llena el contenedor, con tope para pantallas grandes.
// Se mide directamente el ancho de la columna de contenido y se vuelve a avisar cada vez
// que cambia (p. ej. cuando el iframe se acomoda tarde en celular), para que las gráficas
// se redibujen al ancho real y no se queden con el ancho provisional del primer dibujo.
vizWidth = Generators.observe(notify => {
  const main = document.querySelector("main.content") || document.body
  let last = -1
  const send = () => {
    const w = Math.min(Math.floor(main.clientWidth || width), 1000)
    if (w > 0 && w !== last) { last = w; notify(w) }
  }
  send()
  const ro = new ResizeObserver(send)
  ro.observe(main)
  window.addEventListener("resize", send)
  return () => { ro.disconnect(); window.removeEventListener("resize", send) }
})

viewof periodo_mapa = Inputs.select(
  ["1990-2000", "2001-2010", "2011-2020", "2021-2024"],
  {label: i18n.period, value: "2011-2020", format: fmtRange}
)

{
  const mexico = await FileAttachment("mexico_states.geojson").json()

  const allData = transpose(lab_map_data)
  const filtered = allData.filter(d => d.periodo === periodo_mapa)

  const colors = labColors

  const nameMap = i18n.labs

  const points = {
    type: "FeatureCollection",
    features: filtered.map(d => ({
      type: "Feature",
      geometry: {type: "Point", coordinates: [+d.lon, +d.lat]},
      properties: {tipo_droga: d.tipo_droga, anio: d.anio}
    }))
  }

  return Plot.plot({
    projection: {type: "mercator", domain: mexico},
    width: vizWidth,
    height: Math.round(vizWidth * 0.66),
    style: plotStyle,
    color: {
      domain: Object.keys(colors),
      range: Object.values(colors),
      legend: true,
      label: i18n.drugType,
      tickFormat: d => nameMap[d] ?? d
    },
    marks: [
      Plot.geo(mexico, {fill: "#e8e8e8", stroke: "#aaa", strokeWidth: 0.5}),
      Plot.geo(points, {
        r: 5,
        fill: d => colors[d.properties.tipo_droga] ?? "gray",
        fillOpacity: 0.75,
        stroke: "white",
        strokeWidth: 0.3,
        tip: true,
        title: d => `${nameMap[d.properties.tipo_droga] ?? d.properties.tipo_droga}\n${i18n.year}: ${d.properties.anio}`
      })
    ]
  })
}