Tweet
Tweet

Slide 1

Slide 1 text

Data-Driven Documents

Slide 2

Slide 2 text

Levan Velijanashvili [email protected] twitter.com/Stichoza github.com/Stichoza

Slide 3

Slide 3 text

WHAT IS D3 Charting library

Slide 4

Slide 4 text

WHAT IS D3 The bestCharting library

Slide 5

Slide 5 text

WHAT IS D3 The best that is not a Charting library

Slide 6

Slide 6 text

WHAT IS D3 Charting mmm... nope

Slide 7

Slide 7 text

d3.selectAll("p") .attr("class", "lead") .style("color", "red"); WHAT IS D3 D3 is jQuery(?) lol, nope

Slide 8

Slide 8 text

jQuery WHAT D3 IS NOT

Slide 9

Slide 9 text

jQuery Charting Library WHAT D3 IS NOT

Slide 10

Slide 10 text

jQuery Charting Library Graphics Layer WHAT D3 IS NOT

Slide 11

Slide 11 text

jQuery Charting Library Graphics Layer SVG Polyfill WHAT D3 IS NOT

Slide 12

Slide 12 text

jQuery Charting Library Graphics Layer SVG Polyfill ...and a vitamin WHAT D3 IS NOT

Slide 13

Slide 13 text

DATA VISUALIZATION D3.js is a JavaScript library for manipulating documents based on data

Slide 14

Slide 14 text

W3C standards Super flexible Functional GOOD PARTS

Slide 15

Slide 15 text

GOOD PARTS

Slide 16

Slide 16 text

GOOD PARTS

Slide 17

Slide 17 text

GOOD PARTS

Slide 18

Slide 18 text

GOOD PARTS

Slide 19

Slide 19 text

Hard to learn BAD PARTS

Slide 20

Slide 20 text

D3 STRUCTURE AND PRINCIPLES

Slide 21

Slide 21 text

d3.select("p") .attr("class", "lead") .style("color", "red"); SELECTIONS d3.selectAll("ul li") .foo(...);

Slide 22

Slide 22 text

d3.selectAll("p") .transition() .delay(200) .duration(500) .ease("linear") .style("color", "red"); TRANSITIONS

Slide 23

Slide 23 text

d3.selectAll("ul li") .data([293, 12, 6, 89, 11]) .style("width", function (d) { return (d * 10) + "px"; }) .style("color", "red") .enter() .style("color", "lime") DATA BINDING

Slide 24

Slide 24 text

ENTER / UPDATE / EXIT enter() exit() update()

Slide 25

Slide 25 text

D3JS.ORG

Slide 26

Slide 26 text

d3.selectAll("meetup people") .data(questions) .ask(function(q) { return answer(q); });