D3 Odds
and Ends

Objectives

  • Define what a tooltip is

  • Build tooltips to improve the readability of visualizations

  • Use D3 transitions to animate our graphs

  • Explain the D3 transition events

  • Use AJAX in D3 to import and format data from external sources

  • Use d3.queue to chain multiple requests together

Tooltips

Code Example

Code: http://bit.ly/2izJPMA

Live Site: http://bit.ly/2w8ETTG

Tooltip Functionality

tooltip!

tooltip!

data!

data!

Scatterplot

Tooltip Bug 

mousemove

TOOLTIP!

mouseout

Transitions

Code Example

Code: http://bit.ly/2wpBs9l​

Live Site: http://bit.ly/2wjCV2A

Transitions in D3

d3.transition()

Creates a new transition

Transitions in D3

Example transition methods

  • transition.attr(name, newVal) - transition name to newVal 
  • transition.style(name, newVal) - transition name to newVal
  • transition.transition() - chain a new transition
  • transition.merge(other) - merge transitions
  • transition.selection() - access transition's D3 selection

Duration

transition.duration([value])

new duration for the transition

value can be a constant or a callback to be invoked on each element

Transition Speed

transition.ease([value])

new easing function for the transition

D3 comes with many easings built in

Delay

transition.delay([value])

new delay for the transition

value can be a constant or a callback to be invoked on each element

Transition Events

transition.on(typenames[, listener])

Types of transition events:

  • start
  • end
  • interrupt

Managing Asynchronous Code with D3

Code Example

Code: http://bit.ly/2vVu185

Working with JSON

d3.json(url[, callback])

JSON file location

Code to run when response is received

Callback Structure

d3.json(url[, callback])

d3.json('url_goes_here', function(data) {
  // data refers to JSON data
});
d3.json('url_goes_here', function(error, data) {
  // error refers to any error,
  // or null if there is no error.
  // data refers to JSON data
});

Starting a Local Server

npm install -g http-server
http-server

Working with CSV

d3.csv(url[, callback])

CSV file location

Code to run when response is received

Working with CSV

d3.csv(url[, formatter, callback])

CSV file location

Code to run when response is received

format your data by iterating through rows

Formatter Callback

d3.csv(url[, formatter, callback])

d3.csv('url', function(row, i, headers) {
  // row - current CSV row as an object
  // i - row index
  // headers - array of CSV headers, 
  // which are also keys in the row object
}, function(error, data) {
  // write your code here
});

Formatter Callback

d3.csv(url[, formatter, callback])

d3.csv('url', function(row, i, headers) {
  if (/* condition */) return;
}, function(error, data) {
  // rows where condition was true
  // are removed from the data array! 
});

Other Request Methods

  • d3.text
  • d3.tsv
  • d3.html
  • d3.xml
  • d3.request

Queues

d3.queue()

queue.defer(fn[, arguments])

Asynchronous function

Arguments for fn

Resolving the Queue

queue.await()

queue.awaitAll()

d3.queue()
  .defer(fn1)
  .defer(fn2)
  .await(function(error, res1, res2) {
    // res1 - response from fn1
    // res2 - response from fn2
  });
d3.queue()
  .defer(fn1)
  .defer(fn2)
  .awaitAll(function(error, res) {
    // res[0] - response from fn1
    // res[1] - response from fn2
  });

YOUR

TURN

D3 Odds and Ends

By Elie Schoppik

D3 Odds and Ends

D3 Odds and Ends: Tooltips, Transitions, Managing Asynchronous Code

  • 2,099

More from Elie Schoppik