I diari di viaggio di mio nonno e altri task ripetitivi

Mio nonno, James, era un archiviatore meticoloso. Teneva dei diari scritti a mano contenenti i dettagli di qualsiasi cosa, dalle visite dal dottore alle fluttuazioni giornaliere delle azioni che possedeva. Ho scoperto questa parte della sua vita solo sette anni dopo la sua morte, quando il seminterrato dei miei si è allagato alla Vigilia di Natale del 2011 e abbiamo trovato i suoi diari mentre pulivamo il danno. Più di tutto, mi hanno impressionato i suoi archivi di viaggio. Ha documentato ogni singolo viaggio mai fatto, includendo date, paesi e città visitate, mezzi di trasporto e persone con cui ha viaggiato. In totale, ha lasciato gli Stati Uniti 99 volte, visitato 80 paesi e passato 1223 giorni per mare su 48 navi.

Avevo solo 24 anni quando è morto, così non mi sono reso conto di aver ereditato così tante delle sue abitudini di archiviazione, scrittura di diari e collezionismo. E non ho mai avuto l’occasione di fargli molte domande sui suoi viaggi (come il motivo per cui andò in Venezuela 12 volte o cosa ci faceva in Siria e a Beirut negli anni ’50). Quindi, nello sforzo di scoprire di più su di lui, ho deciso di creare un’infografica dei suoi diari di viaggio.

Oggi, diamo per scontato di poter controllare i mercati sui nostri telefoni o di andare online e vedere la documentazione delle visite dal dottore. I tipi di task ripetitivi che mio nonno faceva potrebbero sembrare eccessivi, specialmente per i giovani web developer e designer che non hanno mai dovuto farli. Ma mio nonno non aveva alcun metodo di archiviazione oltre a carta e penna per la maggior parte della sua vita, quindi questa era una parte normale e specialmente vitale della sua routine giornaliera.

Che stiate processando Sass, riducendo al minimo o usando Autoprefixer, state usando dei tool che svolgono i compiti noiosi e ripetitivi che prima si dovevano fare a mano, sebbene in un medium differente.

Ma cosa fate quando vi trovate di fronte a un problema che non può essere risolto con un plugin, come i dati di viaggio di mio nonno? Se siete un designer, qual è il modo migliore per strutturare dati non convenzionali in modo da potervi concentrare solo sul design?

La mia idea per la web app di viaggio era di tracciare un grafico per ogni paese basandomi sul numero di visite di mio nonno. Come paese visitato da lui più volte (ventidue), Bermuda avrebbe avuto una barra del grafico che sarebbe arrivata al 100% lungo lo schermo, mentre un paese visitato undici volte (St. Thomas, per esempio) sarebbe stato lungo circa il 50%, le proporzioni leggermente aggiustate per accomodare nome e visite. Volevo anche che ciascuna barra del grafico fosse del colore principale della bandiera dello stato.

Il grande problema per cominciare era che alcuni dati erano su carta e altri erano già stati trascritti in un file di testo. Avrei potuto scrivere HTML e CSS a mano, ma volevo avere l’opzione di mostrare i dati in modi diversi. Mi serviva un file JSON.

Ho tediosamente trascritto i dati di viaggio rimanenti in un file di testo separato da tab per gli stati. Ho aggiunto il nome, il numero di visite e il colore della bandiera.

...
honduras	    1    #0051ba
syria	1	#E20000
venezuela	    16    #fcd116
enewetak	2	rgb(0,56,147)
...

Per le navi, ho aggiunto la data e il nome:

...
1941    SS Granada
1944    USS Alimosa
1945    USS Alcoa Patriot
...

Creare a mano un file JSON avrebbe richiesto un’eternità, quindi ho usato JavaScript per iterare nei file di testo e creare due file JSON separati: uno per gli stati e uno per le navi, che poi avrei messo insieme.

Per prima cosa, ho usato readFileSync() e trim() di Node per rimuovere qualunque virgoletta alla fine del file per evitare un oggetto vuoto nei risultati:

const fs = require('fs');

let countriesData = fs.readFileSync('countries.txt', 'utf8')
	.trim();

Questo ha ritornato i contenuti del file countries.txt e li ha memorizzati in una variabile chiamata countriesData. A questo punto, ho mandato in uscita la variabile alla console, che ha mostrato i dati che erano stati raggruppati in una stringa gigante con un insieme di tab (\t) e newlines (\n):

"angaur\t2\t#56a83c\nantigua\t5\t#ce1126\nargentina\t2\trgb(117,170,219)\naruba\t10\trgb(0,114,198)\nbahamas\t3\trgb(0,173,198)\nbarbados\t6\trgb(255,198,30)\nbermuda\t22\trgb(0,40,104)\nbonaire\t1\trgb(37,40,135)\nguyana\t2\trgb(0,158,73)\nhonduras\t1\trgb(0,81,186)\nvirgin Islands\t2\trgb(0,40,104)\nbrazil\t3\trgb(30,181,58)\nburma\t1\trgb(254,203,0)\ncanary Islands\t1\trgb(7,104,169)\ncanal Zone\t7\trgb(11,14,98)\ncarriacou\t1\trgb(239,42,12)\n ..."

Poi, ho suddiviso la stringa ai line break (\n):

const fs = require('fs');

let countriesData = fs.readFileSync('countries.txt', 'utf8')
.trim()
.split('\n');

Dopo split(), nella console, i dati degli stati vivevano in un array:

[
  "angaur\t2\t#56a83c",
  "antigua\t5\t#ce1126",
  "argentina\t2\trgb(117,170,219)",
  "aruba\t10\trgb(0,114,198)",
  "bahamas\t3\trgb(0,173,198)",
  "barbados\t6\trgb(255,198,30)",
  "bermuda\t22\trgb(0,40,104)",
  ...
]	

Volevo suddividere ogni item dei dati dello stato ai tab, separando il nome, il numero di visite e il colore. Per farlo, ho usato map(), che itera e fa girare una funzione su ogni item, ritornando qualcosa di nuovo. In questo caso, suddivide la stringa ad ogni tab che trova e ritorna un array nuovo:

const fs = require('fs');

let countriesData = fs.readFileSync('countries.txt', 'utf8')
	.trim()
	.split('\n')
	.map(item => item.split('\t'));

Dopo aver usato map(), countriesData era un array di array con ogni paese e i suoi dati suddivisi in item separati:

[
  [
    "angaur",
    "2",
    "#56a83c"
  ],
  [
    "antigua",
    "5",
    "#ce1126"
  ],
  [
    "argentina",
    "2",
    "rgb(117,170,219)"
  ],
  [
    "aruba",
    "10",
    "rgb(0,114,198)"
  ],
  [
    "bahamas",
    "3",
    "rgb(0,173,198)"
  ],
  ...
]

Per creare l’output finale per ogni paese, ho usato reduce(), che usa un accumulator e una funzione per creare qualcosa di nuovo, che sia un oggetto, un valore o un array. Accumulator è un nome fantasioso per far riferimento al prodotto finale, che nel nostro caso è un oggetto ({}).

const fs = require('fs');

let countriesData = fs.readFileSync('countries.txt', 'utf8')
	.trim()
	.split('\n')
	.map(item => item.split('\t'))
	.reduce((countries, item) => {
		return countries;
	}, {countries: []});

Sapevo di volere che {countries: []} contenesse i dati. Quindi, invece di crearlo nel primo passo e testarne l’esistenza in ogni iterazione, ho aggiunto {countries: []} all’oggetto risultante. In questo modo, esisteva prima che cominciassi ad iterarvi.

Questo processo ha ritornato un oggetto vuoto perché non avevo detto a reduce() cosa fare con ogni array di dati.

Per sistemarlo, ho usato reduce() per fare la push e aggiungere un nuovo oggetto a ogni stato con il nome (item[0]), le visite (item[1]) e il colore (item[2]) nell’oggetto finale. Infine, ho usato una funzione che trasforma in maiuscolo ogni valore del nome per assicurarmi che la formattazione fosse consistente.

const fs = require('fs');

const cap = (s) => {
  return s.charAt(0).toUpperCase() + s.slice(1);
};

let countriesData = fs.readFileSync('countries.txt', 'utf8')
	.trim()
	.split('\n')
	.map(item => item.split('\t'))
	.reduce((countries, item) => {
		countries["countries"].push({
			name: cap(item[0]),
      			visits: item[1],
      			color: item[2]
		});
		return countries;
	}, {countries: []});

Ho usato lo stesso metodo per il file ships.txt e ho fatto il merge dei due usando Object.assign, un metodo che prende due oggetti e ne crea uno nuovo.

let result = Object.assign({}, countriesData, shipsData);

Avrei potuto creare una funzione che prendesse un file di testo e un oggetto o creare uno strumento form-to-JSON, ma mi sembrava un po’ troppo per questo progetto e avevo già trascritto alcuni dati in file separati prima di concepire l’idea dell’infografica. Potete trovare su CodePen il risultato JSON finale.

Ho usato i dati JSON per creare le barre dell’infografica, definendo il layout per ciascuna con CSS Grid e stili dinamici per larghezza e colore. Guardate il prodotto finale su ninetyninetimes.com. Penso che a mio nonno sarebbe piaciuto vedere i suoi diari scritti a mano trasformati in un formato visuale che mostrasse la mole dei suoi viaggi.

È morto nel 2005, ma mi ricordo di avergli mostrato il mio Blackberry e di avergli spiegato internet, mostrandogli come poteva guardare le foto scattate nel mondo e leggere articoli. Ha bevuto un sorso del suo Martini e ha come allontanato lo schermo con la mano. Penso preferisse le note scritte a mano e la vita fuori da internet, qualcosa che molti di noi apprezzano. Dopo aver messo in ordine i suoi diari di viaggio, ho capito più chiaramente l’importanza che metteva nell’avere esperienze diverse, incontrare nuove persone ed esplorare il mondo senza paura. Per lui, i suoi viaggi erano molto più che date su una pagina. Adesso sono più di quello anche per me.

L’autore vorrebbe ringraziare Mattias Petter Johansson, la cui serie video, “Fun Fun Function”, ha ispirato alcuni ragionamenti in questo articolo.