D3.js

data-driven documents

Intro

  • Popular open-source project
     
  • A JavaScript library with a focus on data visualizations
     
  • Data-binding is a powerful method
     
  • A combination of building blocks (modules)
     
  • Used for mapping data to the DOM
     
  • Smooth animation transformations

SVG's

  • Scalable Vector Graphics
     
  • XML file format for rendering graphics
     
  • Can be rendered in modern browsers

JSON

  • JavaScript Object Notation
     
  • Syntax for storing and exchanging data
     
  • Can present data by:
    • keys/values (objects)
    • array of values
       
  • Is text only, therefore it can be read and used as a data format by any programming language
{
   "data": [
      {
         "id": "X999_Y999",
         "from": {
            "name": "Tom Brady", "id": "X12"
         },
         "message": "Looking forward to 2010!",
         "actions": [
            {
               "name": "Comment",
               "link": "http://www.facebook.com/X999/posts/Y999"
            },
            {
               "name": "Like",
               "link": "http://www.facebook.com/X999/posts/Y999"
            }
         ],
         "type": "status",
         "created_time": "2010-08-02T21:27:44+0000",
         "updated_time": "2010-08-02T21:27:44+0000"
      }
   ]
}
{
    "red":"#f00",
    "green":"#0f0",
    "blue":"#00f",
    "cyan":"#0ff",
    "magenta":"#f0f",
    "yellow":"#ff0",
    "black":"#000"
}
{
    "colorsArray":[{
            "red":"#f00",
            "green":"#0f0",
            "blue":"#00f",
            "cyan":"#0ff",
            "magenta":"#f0f",
            "yellow":"#ff0",
            "black":"#000"
        }
    ]
}

Built-in Request methods

Getting data from another file into an application

  • d3.csv (most used)
  • d3.json (most used)
  • d3.html
  • d3.tsv
  • d3.text
  • d3.xml

Example of methods

// JSON method
d3.json('path-to-file.json', function(error, data){
});

// CSV method
d3.csv('path-to-file.csv', function(error, data){
});

// HTML method
d3.html('path-to-file.html', function(error, data){
});

// text method
d3.text('path-to-file.txt', function(error, data){
});

// TSV method
d3.tsv('path-to-file.tsv', function(error, data){
});

// XML method
d3.xml('path-to-file.xml', function(error, data){
});

d3.json method

// D3 JSON method
d3.json('path-to-file.json', function(error, data){
  if ( error ) {
    // handle the error
  }
  // do something with the loaded data
});
  • First argument is a callback to a file or data object
     
  • Second argument is a callback function and is only executed after the request returns data or fails

Data-binding

  • D3 does not store data within variables
     
  • D3 stores data within the DOM selectors by calling the selection.data() method
     
  • You can create elements in the DOM based on data

Simple data-binding

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
        <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
    </body>
</html>
// Data to be bind
var dummyData = [2, 30, 45, 11];

// Select all <li>
d3.selectAll('li')
    // Bind data from Array with the data method
    .data(dummyData)
    // Pass the data to <li> and concat px to the data to change styling
    .style('margin-left', function(data) {
        return data + 'px';
    });

Selections

  • You first need to select an element because you can change or modify it
     
  • Takes valid CSS selectors as parameters
     
  • Uses 2 primary methods
// Returns the first element matching the CSS selector given.
d3.select('div')
d3.select('#name')

// Returns a selection in an array that contains
// all elements matching the CSS selector given.
d3.selectAll('div')
d3.selectAll('#name')

Changing attributes

  • Can be used to adjust attributes for SVG's and non-SVG's such as size or position
     
  • Can be combined with data-binding and mouse events
// method
.attr()

// Needs 2 values: attribute that needs to be changed and the new value
selection.attr("attribute string", new value);


// Example
circle.attr("r", 55);

Changing styles

  • Can be used to adjust styling for SVG's and non-SVG's such as size or position
  • D3 can utilize these new changes without the need of a patch
  • Can be combined with data-binding and mouse events
// method
.style()

// Needs 2 values: CSS style that needs to be changed and the new value
selection.style("CSS Style string", new value);


// Example
circle.style("fill", "#FF0000");
circle.style("stroke", "#000000");

Transitions

  • Used on a selection to allow it's operators to apply smoothly over time
     
  • By default it starts and last for a duration of 250ms
// Select an element and chain transition to it
d3.select('div').transition();


// Select a div element and give it the ease transition
d3.select('div')
  .transition()
  .ease('bounce');

Made with Slides.com