cosa usiamo

HTML

CSS

JS

SVG

DOM

 

Hypertext Markup Language

Cascading Style Sheets

JavaScript

Scalable Vector Graphics

The Document Object Model

cosa serve

Un editor di testo

Un browser

Un web server
La libreria D3

Il tuo codice

(1° parte)

gedit, brackets, ..

firefox, chromium..

nodejs, phyton, php..

http://d3js.org

localhost

html5

<! doctype HTML>

 

 

DOM

Documento Object Model

...diamoci una occhiata con il web inspector

html

sintassi

 

 

 

struttura

Title Text

< > ... </>

<  />

<!--  comment  -->

 

DOM di tag ed elementi

+

link ad "espansioni"

CSS

sintassi

 

elementi

identificativi

classi

pseudoclassi

pseudo elementi

Cascading Style Sheets

selettore{key:value;}

 

p div ul li (tag dell' html)

#id

.class

::before/::after

:first-letter

 

 

e una rigida gerachia

• ereditarietà
• origine
• !important
• selezione

La regola:

 

html è ilcontenuto

css è lo stile

js sono le azioni

D3js  data-drive document

è una libreriA js

D3js loves web standard

è una libreria JavaScript per creare visualizzazioni dinamiche ed interattive partendo da dati organizzati, visibili attraverso un comune browser.

D3 non è una libreria di rappresentazioni grafiche, ma pratica trasformazioni nel DOM partendo dai dati.

Il suo stile di programmazioni è detto "chaining"

API

• Core - selections, transitions, data, localization, colors, etc.
• Geography - project spherical coordinates, latitude & longitude math
• Geometry - utilities for 2D geometry, such as Voronoi diagrams and quadtrees
• Layouts - derive secondary data for positioning elements
• Scales - convert between data and visual encodings
• SVG - utilities for creating Scalable Vector Graphics
• Time - parse or format times, compute calendar intervals, etc.
• Behaviors - reusable interaction behaviors

 

https://github.com/mbostock/d3/wiki/API-Reference

Text

dal web inspector

console:

 

 http://d3js.org

d3.select("body").append("svg")

.append("rect")

.attr("width", 25)

.attr("height", 25)

.style("fill", "red");

Thinking with Joins

.data()

.enter()

.exit()

.remove()

.transition()

http://jsfiddle.net/digitigrafo/q2w4mrtg/

esempio: http://jsfiddle.net/digitigrafo/h95eo8j7/5/

 

Avere le "reference" sotto mano

di html, css e API di d3

 

https://github.com/alignedleft/strata-d3-tutorial/blob/master/d3%20Cheat%20Sheet.pdf

All'inizio è dura, ma poi..

https://github.com/Dataninja/Dampyr-collection-visualized