d3.select(). - WordPress.com

disgustedtukwilaInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 5 μήνες)

87 εμφανίσεις

D3 Practicum

CS 4460


Information Visualization


Megha Sandesh


Prepared under advisement by Dr.Fames Foley


Agenda


Background


D3 and SVG


Hello D3


Animation


Bind Data and Create a Simple Bar Chart


Syncing Between Views


Loading data from External Source


Summary

2

CS 4460

Background


D3


D
ata
D
riven
D
ocuments


Developed by Mike Bostock, creator of
Protovis


Free Javascript library


Bind data to DOM, apply transformations

3

CS 4460

Background


Uses method chaining model to simplify
operations on data


d3.select().append().
attr
()….


Statements like the above are perfectly

legal in d3.


Compact, clean code


minimum looping


Animations can be chained to create
complex visualizations

4

CS 4460

D3 and SVG


D3 does not have a graphical renderer


Uses SVG to visually present data
transformation


Leverages HTML5, CSS3 and SVG to create
powerful visualizations




CS 4460

5

SVG
-

S
calable
V
ector
G
raphics


SVG is a language for describing two
-
dimensional
vector graphics in XML.


Unlike raster/bitmap graphics (.JPEG, .PNG, .GIF
etc.), does not lose quality upon zooming in more
than 100%


Can scale to any size dynamically; amenable to
indexing and compression


SVG files can be created in any text editor


SVG is
an open standard.

CS 4460

6

Hello D3


First program

CS 4460

7


Root element


d3


select()


append()


Structure and aesthetic


attr() and style()


Method chaining


Animation


Anonymous methods

Animation


Animation achieved by binding event
listeners to specific actions


mouse
hover, click etc.


Event listener can be inline or written as a
separate method


E.g.
-

on("
mouseover
",animate)



CS 4460

8

Animation chaining


Ability to add more than one transition to
an SVG object.


Achieved by the “each” function in d3



each("end",
animatenext
)


Animations can be chained with other
event listeners as well

CS 4460

9

Binding Data


A Simple Bar Chart


Data bound to code by using the “data”
method


var dataset = [1,2,3,4,5];



d3.select(this)


.data(dataset);


The statement above binds data to the selection,
creating an internal loop

CS 4460

10

Linking


Sync 2 visualizations


pie chart and bar
graph


Method :


Trigger a redraw of one view when an

event occurs in the other visualization.


Hover over individual pie slices to
highlight corresponding bars

CS 4460

11

Loading External Data


Loading data from external files


CSV


Inbuilt routine


csv()


d3.csv(
filename, action/method
)


Method describes how to handle and store
the data


CS 4460

12

Some Pointers


D3 is not the be
-
all, end
-
all of visualization.


Consider these as well


jquery, backbone.js and
any javascript library which adds to the
convenience and power of d3 (don’t reinvent the
wheel!)


Aim for compact code. Programs will be much
more maintainable and extensible


d3 will almost
force you to do this.


Avoid loops and inline data as much as possible


cleaner code, leaner HTML. Go for JSON, CSV and
even MYSQL databases.

CS 4460

13

Further Learning


http://mbostock.github.com/d3/

-

d3 library,
documentation and lots of examples


http://www.drewconway.com/zia/?p=2857



video tutorial


http://www.janwillemtulp.com/category/d3/


http://christopheviau.com/d3_tutorial/


http://www.jeromecukier.net/blog/category/d3/


http://www.jeromecukier.net/blog/2012/01/02/
using
-
d3
-
with
-
a
-
mysql
-
database/

-

d3 and
MySQL




CS 4460

14