D3 + Angular

Data Driven for life!

Daniel Correa

Univalle

Web UI at
Globant (ASDK)

@danielcb29

Let's start!

Just charts?...

d3? => Data-Driven Documents

No, much more :D!

You can bind arbitrary data to a DOM and apply transformations to the document.

That means...

Using...

How the data is binded?:

and 

,

Check some awesome examples!

Physical Concepts

Crazy diagrams

Games!

Keep Calm!, start with the basics

TIP: Be careful with the versions, v3 and v4 are such different, if you select one, continue with this

HTML Basic Approach

D3 Basic Approach

var data = [2,18,8,12,5,20];

d3.select(".chart")
  .selectAll("div")
    .data(data)
    .style("width", d => d*10 + "px")
    .text(d => d);

D3 Basic Approach Lesson

- d3 works by selectors

- datum: Current element in the loop

- d3 iterate in the data and apply the properties in the selection

D3 Update Pattern

  var bar = d3.select(".chart")
        .selectAll("div")
        .data(data);
  
  // EXIT
  bar.exit().remove();
  
  // UPDATE
  bar.style("width", d => (d*10) + "px")
      .text(d => d);

  // ENTER
  bar.enter()
      .append('div')
      .style("width", d => (d*10) + "px")
      .text(d => d);

D3 UP merge enter + update

  var bar = d3.select(".chart")
        .selectAll("div")
        .data(data);
  
  // EXIT
  bar.exit().remove();

  // ENTER
  bar.enter()
      .append('div')
  .merge(bar) // UPDATE + ENTER
      .style("width", d => (d*10) + "px")
      .text(d => d);

D3 Update Pattern Lesson

- Our data is async and dynamic

- You can create elements using d3

- Don't repeat code, use d3 merge for new and old data behaviour

D3 Transitions

D3 Transitions Lesson

- d3-ease: A lot of ease types to animate elements

- You can concat different transitions

Nice D3 Events
Example

 var t = d3.transition()...
  
  var bar = d3.select(".chart")...
  
  // EXIT
  bar.exit()
    .transition(t)
      ...
      .remove();
  
  // ENTER
  bar.enter()
      .append('div')
      ...
      .on('click', function(d) {
        console.log(d);
        d3.select(this)
          .style('background-color', "yellow");
      })
      .on('mouseover', function(d) {
        d3.select(this)
          .style('outline', "2px solid brown");
      })
      .on('mouseout', function(d) {
        d3.select(this)
          .style('outline', "none");
      });

How can I use it with Angular?

Angular import 
example

Cons: 2 ways of update the DOM :/

but...

Check this project:

https://github.com/tomwanzek/d3-ng2-service

Interesting links!

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

Examples: https://github.com/d3/d3/wiki/Gallery​

Official tuto: https://github.com/d3/d3/wiki/Tutorials

Official page: https://d3js.org/​

Thanks!!

Questions?

I'm

Daniel Correa

@danielcb29