Utilizzare React per creare interfacce interattive per dataset emozionanti

Usare React per creare interfacce interattive per dataset emozionanti.

Tutorial sui dati

Creare un’esperienza di visualizzazione dei dati più dinamica utilizzando lo sviluppo web

Accanto al mio lavoro a tempo pieno come CEO di una piccola azienda di machine learning, il mio hobby è creare bellissime visualizzazioni dei dati.

Di solito lo faccio usando Matplotlib, ma questa volta volevo creare un’esperienza più interattiva.

Dato che mi piace lo sviluppo web e il design, ho deciso di creare un’applicazione React per il dataset delle Stime e Proiezioni della Popolazione della Banca Mondiale.

È un dataset affascinante in cui è possibile visualizzare le piramidi di popolazione di tutti i paesi e le regioni dal 1960 al 2022, inclusa una previsione fino al 2050. È concesso in licenza con Creative Commons Attribution 4.0.

È anche un dataset adatto per un’interfaccia interattiva in cui le persone possono cambiare rapidamente gli anni e le regioni.

In questa storia, condividerò le mie esperienze di lavoro e ciò che ho imparato.

Se vuoi testare la soluzione, puoi trovarla qui: https://datawonder.io/population-pyramids

Cominciamo.

Parte 1: Preparazione dei dati

Volevo creare un backend semplice e veloce che fornisce i dati al frontend senza eseguire alcuna elaborazione lunga.

Invece, la mia idea era di preparare tutti i dati in anticipo e caricarli tutti in memoria quando l’applicazione si avvia.

I dati della Banca Mondiale hanno sempre un insieme di indicatori, e quelli che mi interessano hanno il seguente formato:

Popolazione età <gruppo di età>, <sesso>

Ci sono 17 gruppi di età che vanno da 0-4 e 80+. Ogni indicatore ha una colonna separata per ogni anno, come nel data frame di pandas qui sotto.

Dato che sapevo esattamente quali parti dei dati mi servivano e non volevo fare alcun filtraggio o altre operazioni…