Visualizzazione di dati interattiva per il web

Visualizzazione di dati interattiva per il web

Introduzione: L’enorme crescita di dati accessibili attraverso Internet richiede l’uso di mezzi di rappresentazioni adatti. Eccone uno non molto difficile da usare se avete un po’ di competenza di programmazione per il web.

Cose da fare: La pagina iniziale punta all’indice di una introduzione passo a passo su come usare il web per rappresentare dati. Quello che dovete fare e’ seguire le istruzioni copiando e incollando il codice in un file di testo con un editore di testi tipo wordpad o vim. Dopodiche’  salvate il file e provate a guardarlo col browser.

Cosa succede: La visualizzazione interattiva dei dati sul web fa uso degli elementi base delle pagine Web, cioe’ HTML, javascript , CSS  e DOM. Viene usato inoltre anche SVG per produrre grafica di qualita’. Infine la libreria Javascript  d3.js  permette di mettere assieme tutti questi elementi per costruire una pagina web con una grafica perfetta e per di piu’ interattiva.

La prima pagina da guardare per rendersi conto di cosa potete fare, e’ la galleria degli esempi. Cliccate su una figura  e vi trovate un disegno interattivo. Quasi tutti gli esempi possono essere scaricati, esaminati e modificati localmente sul vostro computer : basta fare “Salva pagina con nome” selezionando il tipo “pagina web completa”.

L’ultima versione di d3.js si puo’ scaricare dal sito ufficiale d3js.org . Se lo si scarica in una sottocartella chiamata d3, questo e’ uno dei primi programmi che si copiano e incollano (nel capitolo Using your data).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) { return d; });
</script>
</body>

Altri applet di informatica

Il materiale ha come indirizzo http://alignedleft.com/tutorials/d3

Il suo autore e’ Scott Murray
© Scott Murray
Titolo in inglese: D3 Tutorials 

Ricerca di pagine che hanno link a questo materiale .

Tweet

Leave a Reply

Your email address will not be published. Required fields are marked *