D 3 C 3 4 U Rob Ribeiro

  • Slides: 18
Download presentation
D 3 + C 3 4 U Rob Ribeiro

D 3 + C 3 4 U Rob Ribeiro

About me @azurelogic https: //azurelogic. com

About me @azurelogic https: //azurelogic. com

D 3 C 3

D 3 C 3

D 3 C 3

D 3 C 3

What is D 3? • “Data-Driven Documents” • http: //d 3 js. org •

What is D 3? • “Data-Driven Documents” • http: //d 3 js. org • DOM manipulation • Binding data to the DOM • Often used for SVG visualizations • Declarative approach (9+)

What is SVG? • “Scalable Vector Graphics” • XML-based vector images • Renders based

What is SVG? • “Scalable Vector Graphics” • XML-based vector images • Renders based on tags and attributes • Even styles with CSS! • rect, circle, g, text <svg width=“ 50” height=“ 50”> <circle cx=“ 25” cy=“ 25” r=“ 10” fill=“yellow” stroke=“orange” stroke-width=“ 5”/> </svg>

DOM manipulation • Key methods: select, select. All, append, attr, style • Standard CSS

DOM manipulation • Key methods: select, select. All, append, attr, style • Standard CSS selector syntax • Example: http: //jsfiddle. net/azurelogic/Lrahn 718/

Data binding • Not what you think • Declaratively attach data to DOM elements

Data binding • Not what you think • Declaratively attach data to DOM elements • Key methods: data, enter, exit • Example: http: //jsfiddle. net/azurelogic/2 q 52997 h/

Our first chart • Scatter with SVG <circle> • Note: (0, 0) is in

Our first chart • Scatter with SVG <circle> • Note: (0, 0) is in the upper left! • Example: http: //jsfiddle. net/azurelogic/t 52 eo 19 g/

Scaling • Now, a bar chart with SVG <rect> • Map input/domain to output/range

Scaling • Now, a bar chart with SVG <rect> • Map input/domain to output/range • Scales: ordinal, linear, log, etc • Example: http: //jsfiddle. net/azurelogic/6 zmvr. Lnz/ • Alternative scaling: http: //jsfiddle. net/azurelogic/t 4 xwvy 75/

Updating • Set some trigger and rebind data • Only need to redefine values

Updating • Set some trigger and rebind data • Only need to redefine values that change • http: //jsfiddle. net/azurelogic/trxuzb 3 u/

Transitions • Key methods: transition, duration, delay, ease, remove • Example: http: //jsfiddle. net/azurelogic/c

Transitions • Key methods: transition, duration, delay, ease, remove • Example: http: //jsfiddle. net/azurelogic/c 9 so 1 h 4 u/ • Smooth transitions require “data joins” • • Default is by index • Supply your own keys for smooth transitions • Key function tells data how to find them Example with data join: http: //jsfiddle. net/azurelogic/6 L 50 wxjy/

What else? • Axes • Interactivity • Other layouts: pie, stack, force • There’s

What else? • Axes • Interactivity • Other layouts: pie, stack, force • There’s so much you could write a book on it. . .

BUT I’M A LAZY DEVELOPER!!!

BUT I’M A LAZY DEVELOPER!!!

What is C 3? • “D 3 -based reusable chart library: Comfortable, Customizable, Controllable”

What is C 3? • “D 3 -based reusable chart library: Comfortable, Customizable, Controllable” • http: //c 3 js. org/ • Better than any of us can do • Full featured and highly configurable • Easier than D 3 • Line, bar, scatter, pie, donut, and more • None of this though: http: //mbostock. github. io/d 3/talk/20111116/forcecollapsible. html

That bar chart again • var chart = c 3. generate(config) • That’s it.

That bar chart again • var chart = c 3. generate(config) • That’s it. • Sample: http: //jsfiddle. net/azurelogic/wn 3 vzn 0 k/

Updating • chart. load(update. Config) • Simpler config • Sample: http: //jsfiddle. net/azurelogic/kotbxp 4

Updating • chart. load(update. Config) • Simpler config • Sample: http: //jsfiddle. net/azurelogic/kotbxp 4 f/ • Practical use – Angular: • Make a directive that creates a chart • On load, it retrieves initial data and appends chart to DOM • On update by user, it requerys the server and calls chart. load with new data

Thanks! Rob Ribeiro @azurelogic https: //azurelogic. com

Thanks! Rob Ribeiro @azurelogic https: //azurelogic. com