Il web visto come un cielo
Nel 2011 Ruslan Enikeev pubblicò The Internet Map, una mappa del web in cui ogni sito era un cerchio e la sua grandezza dipendeva dal traffico. Guardarla dava un'idea concreta di quanto è grande internet e di come è distribuito.
Volevo riprendere quell'idea e rifarla con strumenti di oggi: leggera, veloce anche sul telefono, senza librerie esterne e senza nessuna richiesta a terzi.
Esplorare, non solo guardare
L'obiettivo era una mappa che si potesse esplorare davvero:
- spostarsi e fare zoom in modo fluido su migliaia di elementi
- cercare un sito o un paese e arrivarci subito
- capire a colpo d'occhio quali siti contano di più e dove si trovano
- funzionare bene sia su computer sia su telefono
- dire con chiarezza quali dati sono reali e quali no
Come funziona
1. Una mappa da esplorare
Ci si sposta trascinando e si fa zoom con la rotella, con due dita, con il doppio clic o con i pulsanti. Una minimappa mostra in ogni momento dove ti trovi.
2. Cerca e scopri
La ricerca trova un sito o un paese. Aprendo un sito si vedono la posizione nella classifica mondiale e in quella del suo paese, le visite mensili, la categoria, la quota di traffico del paese e i siti collegati.
3. Paesi e collegamenti
Una legenda dei paesi evidenzia un paese alla volta, e un livello facoltativo mostra i collegamenti tra i siti principali.
4. Comoda anche da tastiera
/ porta alla ricerca, Esc chiude pannelli e finestre, + e - fanno zoom e 0 riporta la vista all'inizio.
In parte reale, in parte simulata
La mappa non finge di essere qualcosa che non è, e l'interfaccia lo dice.
- Circa 425 siti reali, con stime del traffico mensile approssimative e scelte a mano
- Circa 8.600 siti simulati, con nomi inventati, per ricreare la densità della mappa originale. Sono segnati come "Sito simulato" e non hanno il pulsante per visitarli
- Posizioni e collegamenti generati: i gruppi dei paesi sono disposti a mano e i collegamenti sono scelti a caso in base al traffico. Non rappresentano il pubblico in comune o i link reali tra i siti, che erano invece la base della mappa originale
La generazione parte sempre dallo stesso seme, quindi tutti vedono esattamente la stessa mappa.
Un motore grafico scritto a mano
Internet Map è scritta in HTML, CSS e JavaScript puri, divisi in moduli ES, senza framework, senza pacchetti npm e senza passaggi di build.
Il cuore è un motore su Canvas 2D che gestisce la telecamera, il disegno e la selezione degli elementi sotto il puntatore. Intorno ci sono i moduli dell'interfaccia: ricerca, legenda, pannello del sito, minimappa, zoom e suggerimenti. Il font è incluso nel sito.
Dati (reali + generati) → motore Canvas 2D → interfaccia
Le parti più difficili
1. Migliaia di elementi, sempre fluidi
Con circa novemila siti sullo schermo, ogni spostamento e ogni zoom devono restare fluidi, anche su un telefono. Per questo il disegno avviene su Canvas e non con migliaia di elementi nella pagina.
2. Capire cosa c'è sotto il dito
Su un Canvas i cerchi sono solo pixel: per sapere su quale sito si trova il puntatore o il dito, il motore deve calcolarlo da solo a ogni livello di zoom.
3. Una mappa uguale per tutti
I dati simulati sono generati al momento, ma con un seme fisso: ogni visitatore vede la stessa mappa, senza dover scaricare un file enorme.
Leggera e onesta
1. Nessuna dipendenza
Niente librerie, niente CDN e niente build: il sito funziona così com'è su qualsiasi hosting statico.
2. Nessuna richiesta a terzi
Nessun tracker e nessuna richiesta esterna. Gli unici link verso l'esterno sono quelli che scegli di aprire: la mappa originale e il pulsante per visitare un sito.
3. Trasparenza sui dati
I siti simulati sono riconoscibili e spiegati nella pagina "Informazioni", perché una mappa bella che confonde reale e inventato non servirebbe a nessuno.
4. Il merito a chi l'ha pensata
L'idea e la mappa originale sono di Ruslan Enikeev, ed è citato chiaramente nel sito.
Internet, da lontano
Internet Map trasforma il web in un cielo da esplorare: si vede quanto sono grandi i giganti, come si raggruppano i paesi e quanto spazio occupa tutto il resto.