D3.js: Data Driven Documents – A Simple Introduction – Basic Selection and Chaining

View Github Repository Open presentation in a new window

sksizer

See all presentation from sksizer

D3.js: Data Driven Documents – A Simple Introduction – Basic Selection and Chaining

0 0

Tutorial-D3

On Github sksizer / Tutorial-D3

D3.js: Data Driven Documents

A Simple Introduction

What is D3.js?

  • It is not . . .
  • A Charting Library
  • A graphics API or library
  • A data processing library

It is a . . .

  • A framework
  • A means to elegantly bind data to view
  • A rich toolkit

Important Features

  • Speaks The Web - SVG, HTML
  • Declarative with Functions
  • Transformation over Static
  • Maintains Data Constancy

What it Provides

  • Data Loading
  • Data Binding
  • Transition System - Animations
  • Layouts
  • Geography
    • Paths
    • Projections
  • Gesture Behaviors
  • Scaling Functions
  • Axes Functions

Cons . . .

  • Chaining syntax (is good and bad) . . .
  • Knowing how to organize code . . .
  • Immediate mode(?)

Basic Selection and Chaining

Run! Reset
BasicSelectExample Div
            <div id='BasicSelectExample'>BasicSelectExample Div</div>
            
  d3.select("#BasicSelectExample")
    .append("p")
    .text("Some new text . . .");

Select All

Run! Reset
BasicSelectionExample Div
BasicSelectionExample Div
BasicSelectionExample Div
  <div class='BasicSelectAllExample'>BasicSelectionExample Div</div>
  <div class='BasicSelectAllExample'>BasicSelectionExample Div</div>
  <div class='BasicSelectAllExample'>BasicSelectionExample Div</div>
            
  d3.selectAll(".BasicSelectAllExample")
    .append("p")
    .text("Some new text . . .");

Data Binding

Run! Reset
  • Data Binding List 
              <ul id="BasicDataBindingExample">Data Binding List</ul>
            
var data = [5,10,0,25];

d3.select('#BasicDataBindingExample')
  .selectAll("li")
  .data(data)
  .enter()
  .append('li')
  .text('Data entry');
Select host element Create a 'virtual' selection Bind data to 'virtual' selection Filter new data from prior state to current Append items for each data item Insert text into single append item

How Does it Bind?

Super secret __data__ attribute

Why Select and Append the Same Thing?

Run! Reset
  • #WhySelectAndAppendExample 
<ul id="WhySelectAndAppendExample">#WhySelectAndAppendExample</ul>
            
              var data = [5,10,0,25];

              d3.select('#WhySelectAndAppendExample')
                .selectAll("p")
                .data(data)
                .enter()
                .append('li')
                .text('Data entry');

It's all Functions!

  • Data Binding List
Run! 
<ul id="DataFunctionExample">Data Binding List</ul>
          
var data = [5,10,0,25];

d3.select('#DataFunctionExample')
  .selectAll("li")
  .data(data)
  .enter()
  .append('li')
  .text(function(value, position) {
    return 'Value: ' + value + ' at the ' + position + ' position';
  });

Most methods accept a value or a function

SVG

Create a SVG Host

Run! Reset 
<div id="CreateSVGHost"></div>
            
var svg = d3.select('#CreateSVGHost')
            .append('svg')
            .attr('width', 500)
            .attr('height', 300)
            .style('background-color', 'white');
svg.append('rect')
   .attr('width', 100)
   .attr('height', 100)
   .attr('x', 100)
   .attr('y', 100);
};

Putting It Together

Run! Reset 
            
var CreateSVGViz = (function() {
  var data = [5,10,3,25];
  var maxValue = data.reduce(function(prevValue, currValue) {
    return prevValue > currValue ? prevValue : currValue;
  }, 0);
  var svgHeight = 300;
  var svgWidth = 500;

  function heightFunction(value) {
    return(svgHeight * value/maxValue);
  }

  function widthFunction(value) {
    return(svgWidth / data.length - 4);
  }

  function yPosition(value) {
    return(svgHeight - heightFunction(value));
  }

  function xPosition(value, position) {
    return(svgWidth / data.length * position);
  }

  return function() {
    var svg = d3.select('#CreateSVGViz')
                .append('svg')
                .attr('width', svgWidth)
                .attr('height', svgHeight);

    svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('x', xPosition)
        .attr('y', yPosition)
        .attr('height', heightFunction)
        .attr('width', widthFunction)
        .attr('fill', 'red')
        .attr('stroke', 'white');
  }
})();

Who uses it?

Further Reading

General

Tutorials