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!

And much more!

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

<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>

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

  var t = d3.transition()
    .duration(400)
    .ease(d3.easeCubicOut);
  
  var bar = d3.select(".chart")
        .selectAll("div")
        .data(data);
  
  // EXIT
  bar.exit()
    .transition(t)
      .style('background-color', 'red')
      .style('opacity', 0)
      .remove();
  
  // ENTER
  bar.enter()
      .append('div')
      .style('opacity', 0)
      .style('background-color', 'green')
      .style("width", "0px")
  .merge(bar) // ENTER + UPDATE.
      .text(d => d)
      .transition(t)
        .style('opacity', 1)
        .style("width", d => d*10 + "px")
        .style('background-color', 'steelblue');

D3 Transitions Lesson

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

- You can concat different transitions

- t: Transition configuration, use t to assign your transition to elements

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?

It's just a lib, you can import it and use it

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