Infografici e D3.js
Fabrizio Rodono'
DATI + HTML5
=
D3JS
Data Driven DocumentsDATI
=
CSV, JSON (, XML, TEXT, ..)
HTML5
=
HTML, CSS, JS
SVG
d3js
=
d3js
Selezione di Oggetti DOM
Collegamento ai dati
Transizioni
Vettori ed Aggregazione dei dati
Matematica
Colori
Scale di Misura ed Assi
Utility Grafiche (Brush)
Formatting (Tempo, Date, Stringhe)
..
..
LAYOUT
CHORD
CLUSTER
FORCE
HIERARCHY
HISTOGRAM
PACK
PARTITION
PIE
TREE
TREEMAP
..
..
GEOGRAFIA E PROIEZIONI
GEOMETRIA
VORONOI
QUADTREE
POLYGON
HULL
COMPORTAMENTI
DRAG
ZOOM
Esempi di Infografici
nations=[{"name":"Angola","region":"Sub-Saharan Africa","income":[[1800,359.93],[1820,359.93],[1913,556.12],[1950,3363.02],[1951,3440.9],[1952,3520.61],[1953,3598.81],[1954,3450.82],[1955,3672.08],[1956,3549.04],[1957,3827.94],[1958,3966.42],[1959,3917.76],[1960,4006.21],[1961,4463.83],[1962,4269.28],[1963,4413.6],[1964,4826.49],[1965,5102.21],[1966,5308.14],[1967,5522.78],[1968,5346.63],[1969,5408.12],[1970,5651.88],[1971,5526.21],[1972,5473.29],[1973,5722.02],[1974,5470.21],[1975,3430.85],[1976,3050.32],[1977,3008.65],[1978,3070.82],[1979,3064.89],[1980,3074.75],[1981,2953.41],[1982,2756.95],[1983,2584.56],[1984,2527.47],[1985,2492.83],[1986,2220.61],[1987,2430.21],[1988,2728.53],[1989,2730.56],[1990,2777.42],[1991,2730.85],[1992,2627.85],[1993,1869.92],[1994,1851.45],[1995,1989.02],[1996,2157.35],[1997,2277.14],[1998,2384.48],[1999,2417.18],[2000,2446.65],[2001,2479.69],[2002,2773.29],[2003,2785.39],[2004,3007.11],[2005,3533],[2006,4069.56],[2007,4755.46],[2008,5228.74],[2009,5055.59]],"population":[[1800,1567028],[1820,1567028],[1940,3738000],[1950,4117617],[1951,4173095],[1952,4232095],[1953,4293840],[1954,4357527],[1955,4423223],[1956,4490992],[1957,4561361],[1958,4635885],[1959,4714676],[1960,4797344],[1961,4752489],[1962,4826015],[1963,4919586],[1964,5026044],[1965,5134818],[1966,5201250],[1967,5247469],[1968,5350384],[1969,5471641],[1970,5605626],[1971,5752775],[1972,5894858],[1973,6025841],[1974,5986432],[1975,5884241],[1976,5942225],[1977,6162675],[1978,6285716],[1979,6451227],[1980,6741465],[1981,6877697],[1982,7016384],[1983,7238214],[1984,7439658],[1985,7581504],[1986,7744932],[1987,7874230],[1988,8018724],[1989,8148595],[1990,8290856],[1991,8490763],[1992,8735988],[1993,8961438],[1994,9170032],[1995,9421477],[1996,9660081],[1997,9875024],[1998,10071442],[1999,10263229],[2000,10442812],[2001,10623424],[2002,10866106],[2003,11186202],[2004,11521432],[2005,11827315],[2006,12127071],[2007,12420476],[2008,12707546]],"lifeExpectancy":[[1800,26.98],[1940,26.98],[1950,29.22],[1951,29.42],[1952,29.81],[1953,30.21],[1954,30.6],[1955,31],[1956,31.4],[1957,31.8],[1958,32.2],[1959,32.6],[1960,33],[1961,33.4],[1962,33.8],[1963,34.2],[1964,34.6],[1965,35],[1966,35.4],[1967,35.8],[1968,36.2],[1969,36.6],[1970,37],[1971,37.41],[1972,37.83],[1973,38.26],[1974,38.68],[1975,39.09],[1976,39.46],[1977,39.8],[1978,40.1],[1979,40.34],[1980,40.55],[1981,40.71],[1982,40.85],[1983,40.97],[1984,41.08],[1985,41.2],[1986,41.33],[1987,41.48],[1988,41.64],[1989,41.81],[1990,41.99],[1991,42.16],[1992,42.32],[1993,42.46],[1994,42.59],[1995,42.7],[1996,42.82],[1997,42.96],[1998,43.12],[1999,43.32],[2000,43.56],[2001,43.86],[2002,44.22],[2003,44.61],[2004,45.05],[2005,45.52],[2006,46.02],[2007,46.54],[2008,47.06],[2009,47.58]]},{"name":"Benin","region":"Sub-Saharan Africa","income":[[1800,553.72],[1820,553.72],[1913,855.53],[1950,1104.47],[1951,1083.57],[1952,1062.75],[1953,1012.84],[1954,1021.29],[1955,1000.66],[1956,980.06],[1957,959.6],[1958,974.04],[1959,988.88],[1960,996.93],[1961,1006.39],[1962,949.5],[1963,970.34],[1964,1012.25],[1965,1039.34],[1966,1051.67],[1967,1035.83],[1968,1048.78],[1969,1052.8],[1970,1047.17],[1971,1024.93],[1972,1085.8],[1973,1081.87],[1974,973.64],[1975,987.96],[1976,1002.19],[1977,1029.16],[1978,1032.01],[1979,1083.17],[1980,1154.23],[1981,1186.7],[1982,1277.9],[1983,1187.14],[1984,1243.82],[1985,1297.16],[1986,1285.08],[1987,1225.86],[1988,1222.9],[1989,1158.34],[1990,1165.47],[1991,1181.65],[1992,1191.21],[1993,1177.91],[1994,1168.53],[1995,1176.67],[1996,1202.15],[1997,1232.98],[1998,1251.88],[1999,1272.8],[2000,1307.57],[2001,1333.3],[2002,1372.88],[2003,1386.05],[2004,1389.13],[2005,1390],[2006,1402.94],[2007,1428.15],[2008,1459.07],[2009,1457.57]],"population":[[1800,636559],[1820,636559],[1950,1672661],[1951,1704916],[1952,1738315],[1953,1772899],[1954,1808895],[1955,1846175],[1956,1884978],[1957,1925173],[1958,1966816],[1959,2010163],[1960,2055083],[1961,2101846],[1962,2151895],[1963,2202775],[1964,2255760],[1965,2310714],[1966,2367951],[1967,2427334],[1968,2488957],[1969,2553162],[1970,2619809],[1971,2689271],[1972,2761407],[1973,2836325],[1974,2914439],[1975,2995605],[1976,3080268],[1977,3168267],[1978,3259760],[1979,3354798],[1980,3444361],[1981,3540043],[1982,3641603],[1983,3748839],[1984,3861680],[1985,3982013],[1986,4110035],
Selection
Enter - Update - Delete
API Reference
Playground
Credits & Links
D3.js - Data-Driven Documentsbl.ocks.org - mbostock
How Selections Work
Over 1000 D3.js Examples and Demos - TechSlides
Mike Bostock Slides
D3 Presentation
Crossfilter
DC JS
NVD3
Slodge