Exemples de codi

Gràfics amb Plot

Plot és la biblioteca de JavaScript que vam fer servir a l’assignatura de Visualització de l’Informació i que va ser especialment dissenyada per accelerar l’anàlisi exploratòria de dades.

Aquest exemple visualitza dades anuals d’atur per província a Catalunya.

dadesAtur


const lineChart = (width) => Plot.plot({
  width,
  height: width * 0.5,
  marginRight: 60,
  marks: [
    Plot.lineY(dadesAtur, {x: "year", y: "Barcelona", stroke: blue, title: "Barcelona", marker: true, curve: "monotone-x", tip: true}),
    Plot.lineY(dadesAtur, {x: "year", y: "Girona", stroke: yellow, title: "Girona", marker: true, curve: "monotone-x", tip: true}),
    Plot.lineY(dadesAtur, {x: "year", y: "Lleida", stroke: grey, title: "Lleida", marker: true, curve: "monotone-x", tip: true}),
    Plot.lineY(dadesAtur, {x: "year", y: "Tarragona", stroke: purple, title: "Tarragona", marker: true, curve: "monotone-x", tip: true}),
    Plot.text(dadesAtur, Plot.selectLast({x: "year", y: "Barcelona", text: d => "Barcelona", textAnchor: "start", dx: 6})),
    Plot.text(dadesAtur, Plot.selectLast({x: "year", y: "Girona", text: d =>  "Girona", textAnchor: "start", dx: 6})),
    Plot.text(dadesAtur, Plot.selectLast({x: "year", y: "Lleida", text: d =>  "Lleida", textAnchor: "start", dx: 6})),
    Plot.text(dadesAtur, Plot.selectLast({x: "year", y: "Tarragona", text: d =>  "Tarragona", textAnchor: "start", dx: 6}))
  ],
  x: {
    label: "Any",
    tickFormat: d3.format("d")
  },
  y: {
    grid: true,
    label: "Taxa d'atur (%)"
  }
});

Normalment, utilitzareu els gràfics dins de targetes en un panell de dades. Llegiu més sobre les nostres guies sobre com estructurar panells per a aquest projecte i sobre com funcionen les grids a Observable Framework.

A sota es mostra un exemple de quatre cards per a les quatre províncies.

<div class="grid grid-cols-4" style="grid-auto-rows: 240px;">
  <div class="card">
    ${resize((width, height) => lineChartProvince(width, height, "Barcelona", blue))}
  </div>
  <div class="card">
    ${resize((width, height) => lineChartProvince(width, height, "Tarragona", purple))}
  </div>
  <div class="card">
    ${resize((width, height) => lineChartProvince(width, height, "Girona", yellow))}
  </div>
  <div class="card">
    ${resize((width, height) => lineChartProvince(width, height, "Lleida", grey))}
  </div>
</div>

Mapes amb Mapbox

Mapbox és una eina i API per produïr mapes interactius en aplicacions web. En aquesta secció, explorarem com utilitzar Mapbox a Observable Framework per crear, per example, mapes coroplètics per mostrar dades geoespacials.

Aquest exemple mostra com crear un mapa coroplètic, que fa servir color per representar la variable estadística al mapa. En aquest cas es visualitzen unes dades inventades a quatre seccions censals a la provincia de Girona.

const choropleth = display(document.createElement("div"));
choropleth.style = "height: 540px;";

const map = new mapboxgl.Map({
  container: choropleth,
  accessToken: MAPBOX_TOKEN,
  style: 'mapbox://styles/fndvit/clvnpq95k01jg01qz1px52jzf',
  center: [2.1745, 41.65],
  zoom: 6.8
});

const testData = [
  { mundissec: "17901101001", rate: 8 },
  { mundissec: "17022102003", rate: 6 },
  { mundissec: "17181201002", rate: 5 },
  { mundissec: "17044801002", rate: 7 }
  //S'entenc, oi?
];

const createColorExpression = (data) => {
  const colorExpression = [
    "step",
    ["get", "rate"],
    "#f0f0f0",
    5,
    "#fec3b8",
    6,
    "#c289a8",
    7,
    "#885198",
    8,
    "#4c1787"
  ];

  const matchExpression = ["match", ["get", "MUNDISSEC"]];

  data.forEach((entry) => {
    matchExpression.push(entry.mundissec, entry.rate);
  });

  matchExpression.push(0);

  colorExpression[1] = matchExpression;

  return colorExpression;
};

map.on('load', function () {
  map.addSource("seccen", {
      type: "vector",
      url: "mapbox://fndvit.3n29djx2",
      promoteId: "MUNDISSEC"
  });

  map.addLayer({
    id: "seccen-fill",
    type: "fill",
    source: "seccen",
    "source-layer": "seccen-dgddop",
    paint: {
      'fill-color': createColorExpression(testData),
    }
  }, "admin-1-boundary-bg");
});

Carregadors de dades

Els carregadors de dades (data loaders) permeten generar instantànies de dades pre-processades durant el procés de construcció del projecte. Poden ser escrits en qualsevol llenguatge de programació i són útils per accedir, transformar i preparar dades per a la seva visualització.

Avantatges dels carregadors de dades

Exemple de codi per a un carregador de dades en JavaScript

Suposem que volem carregar dades dels embassaments a Catalunya des de l’API del Portal de Transparència de Catalunya.

const response = await fetch("https://analisi.transparenciacatalunya.cat/resource/gn9e-3qhr.json?$limit=32877");
if (!response.ok) throw new Error(`fetch failed: ${response.status}`);
const json = await response.json();

const data = json.map((d) => {
  const capacity = (100 * d.volum_embassat) / d.percentatge_volum_embassat;
  const date = new Date(d.dia);
  const pct = +d.percentatge_volum_embassat;
  const level = +d.volum_embassat;
  return { date, pct, level, capacity };
}).sort( (a,b) => a.date - b.date);

process.stdout.write(JSON.stringify(data));

Aquest carregador de dades obté dades des d’una API, les transforma al format adequat i genera un fitxer JSON amb les dades dels embassaments.

Com utilitzar els carregadors de dades

Si el carregador aquest es diu per exemple embassaments.json.js, haurà generat un fitxer embassaments.json: ara pots accedir-hi des del client utilitzant FileAttachment.

const embassaments = FileAttachment("data/dades.json").json();

FileAttachment retorna una Promise, podeu utilitzar les dades en un bloc de codi diferent només cridant embassaments.

embassaments

Per a més informació i exemples sobre com escriure carregadors de dades en diferents llenguatges, pots visitar la documentació d’Observable Framework.