Serie A: il calcio mercato a nudo su Data Wired

This post is also avai­la­ble in: Inglese

Il cam­pio­na­to ita­lia­no è ini­zia­to da poche gior­na­te, ma gli appas­sio­na­ti han­no anco­ra nel­le orec­chie la cro­na­ca for­sen­na­ta del­le ulti­me ore del cal­cio mer­ca­to esti­vo, chiu­so uffi­cial­men­te alle 23:00 del 2 set­tem­bre scor­so. Normalmente si par­la soprat­tut­to dei gran­di col­pi di mer­ca­to, da Tevez e Llorente del­la Juventus, alla ven­di­ta di Cavani da par­te del Napoli, all’arrivo in extre­mis di Kaka al Milan.

Come san­no gli esper­ti, però, il cal­cio mer­ca­to è ogni vol­ta mol­to più di que­sto. Si trat­ta di miglia­ia di ope­ra­zio­ni, tra pre­sti­ti, rien­tri, ven­di­te e acqui­sti, svin­co­li e mil­le for­me di com­pro­prie­tà. Roba da anchi­lo­sa­re l’indice a for­za di scrol­la­re la tabel­la com­ple­ta. Come visua­liz­za­re effi­ca­ce­men­te un data­set come que­sto? Ci sono pro­ba­bil­men­te mil­le modi, ma il più intui­ti­vo è sfrut­ta­re il con­cet­to di rete: i nodi rap­pre­sen­ta­no le squa­dre coin­vol­te, men­tre le con­nes­sio­ni i tra­sfe­ri­men­ti di gio­ca­to­ri tra due squa­dre. Mettendo il tut­to in una for­ma­zio­ne cir­co­la­re (mol­to com­pat­ta e sim­me­tri­ca) si ottie­ne un cosid­det­to chord dia­gram (la tra­du­zio­ne let­te­ra­le in ita­lia­no non ren­de, dia­gram­ma di accor­do… la paro­la chord non si rife­ri­sce agli accor­di musi­ca­li, ma al ter­mi­ne tec­ni­co pro­prio del­la teo­ria dei gra­fi).

Chord diagram del calcio mercato estivo delle squadre della Serie A. La dimensione degli archi è proporzionale al numero di cessioni.

Chord dia­gram del cal­cio mer­ca­to esti­vo del­le squa­dre del­la Serie A. La dimen­sio­ne degli archi è pro­por­zio­na­le al nume­ro di ces­sio­ni.

L’immagine che vede­te qua sopra è uno screen­shot del­la visua­liz­za­zio­ne inte­rat­ti­va appe­na pub­bli­ca­ta su Data Wired, il nuo­vis­si­mo data blog di Wired​.it. Giocateci pure, il pas­sag­gio del mou­se sui nodi visua­liz­za in bas­so il tota­le degli acqui­sti e del­le ces­sio­ni del­la rela­ti­va squa­dra, men­tre il pas­sag­gio sul­le con­nes­sio­ni mostra i sin­go­li tra­sfe­ri­men­ti tra le due squa­dre col­le­ga­te, con nomi dei gio­ca­to­ri e tipo­lo­gie di ope­ra­zio­ne. Aggiungo a mar­gi­ne che il data blog del Guardian ha pub­bli­ca­to una visua­liz­za­zio­ne mol­to simi­le (sem­pre basa­ta su D3) sul cal­cio mer­ca­to del­la Premier League nell’agosto scor­so. Abbiamo usa­to pure la stes­sa fon­te! Il bel­lo è che ho sco­per­to que­sto pez­zo del Guardian solo dopo aver comin­cia­to a lavo­ra­re sul­la mia visua­liz­za­zio­ne (il 16 ago­sto, scu­sa­te, ma ero in ferie sot­to il sole del­la Sicilia). Una bel­la sod­di­sfa­zio­ne!

Tornando a noi, la sem­pre san­ta libre­ria D3 ha già in sé tut­ti i meto­di per costrui­re colo­ra­tis­si­mi chord dia­gram inte­rat­ti­vi a par­ti­re da una lista di nodi e una matri­ce di adia­cen­za (ci sono tan­ti modi per descri­ve­re le con­nes­sio­ni tra nodi, uno di que­sti pre­ve­de la costru­zio­ne di una matri­ce qua­dra­ta). Costruire tale matri­ce dal­la tabel­la di tut­ti i tra­sfe­ri­men­ti non è imme­dia­to, ma un uti­le eser­ci­zio di pro­blem sol­ving nell’ambito dei fogli di cal­co­lo (per quel che ne so, non esi­ste una fun­zio­ne in LibreOffice o in Excel che fa tut­to in auto­ma­ti­co). I più curio­si pos­so­no dare un’occhiata al foglio di cal­co­lo fina­le da cui ho rica­va­to i dati per la visua­liz­za­zio­ne.

Il codi­ce java­script di visua­liz­za­zio­ne è sostan­zial­men­te quel­lo dell’esempio che si tro­va nel­la gal­le­ria di D3, ma que­sta vol­ta ho spe­ri­men­ta­to uno stru­men­to nuo­vo. Invece di scri­ve­re da zero tut­to il codi­ce, ho fat­to ricor­so a un fra­mework vota­to al van­ge­lo DRY (Don’t Repeat Yourself), oltre che ai prin­ci­pi tipi­ci del­la pro­gram­ma­zio­ne a ogget­ti come l’incap­su­la­zio­ne e l’ere­di­ta­rie­tà: Enyo 2.0. I det­ta­gli li evi­to per­ché inte­res­se­reb­be­ro solo gli svi­lup­pa­to­ri, basti sape­re però che è un vali­do aiu­to per la scrit­tu­ra di appli­ca­zio­ni web com­pa­ti­bi­li sia per desk­top che per mobi­le.

Tutto il codi­ce del­la visua­liz­za­zio­ne è dispo­ni­bi­le in un appo­si­to repo­si­to­ry GitHub. Visto che c’ero, poi, con que­sto lavo­ro ho ini­zia­to lo svi­lup­po di un add-on per Enyo che inte­gri nel fra­mework anche la libre­ria D3 e ren­da così facil­men­te riu­ti­liz­za­bi­li le varie tipo­lo­gie di gra­fi­ci. Amici svi­lup­pa­to­ri, se vi pia­ce / inte­res­sa, for­ka­te, pul­la­te, ecc. ecc. 🙂

Alessio Cimarelli

Alessio Cimarelli

Data scientist at Dataninja
Sono giornalista free-lance, data scientist e sviluppatore web. Dopo la lau­rea in fisica all’Università Sapienza di Roma, ho con­se­guito il master in Comunicazione della Scienza alla SISSA di Trieste e ho comin­ciato a girare l’Italia, tra gior­na­li­, uffici stampa e ricerca pura. Sono co-fondatore di dataninja.it e datamediahub.it e attualmente collaboro con varie testate ita­liane (Wired, L'Espresso, Secolo XIX) e alcune agen­zie edi­to­riali in ambito di data jour­na­lism e svi­luppo web. Sono mem­bro della comu­nità Spaghetti Open Data e ormai scrivo quasi più in java­script e python che in ita­liano o inglese.
Alessio Cimarelli