Getting Started

with D3.js

Elisabeth Engel

What do you know about  D3?

What is D3 really?

JS Framework

helping you to

manipulate documents

based on data

Open Source  •  written by Mike Bostock

Hello World

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
    <div id="content"></div>
        <script> 

            d3.select('#content')
                .append('h1')
                .text('Hello World!');

        </script>
    </body>
</html>

Same Without D3

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
    <div id="content"></div>
        <script> 

            var greeting = document.createElement('h1');
            greeting.appendChild(document.createTextNode('Hello World!'));
            document.getElementById('content').appendChild(greeting);

        </script>
    </body>
</html>

Adding Data

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
    <div id="content"></div>
        <script> 

            d3.select('#content')
                .selectAll('h1')
                .data(['Sarah', 'Robert', 'Maria', 'Marc'])
                .enter()
                .append('h1')
                .text(function(name) {return 'Hello ' + name + '!'});

        </script>
    </body>
</html>

Adding Data

[...]

<div id="content">
    <h1>Hello Sarah!</h1>
    <h1>Hello Robert!</h1>
    <h1>Hello Maria!</h1>
    <h1>Hello Marc!</h1>
</div>

[...]

BROWSER

RESULTING HTML

Updating Data

Sarah

Robert

Maria

Marc

DOCUMENT

NEW DATA

Sam

Mike

Nora

Enter, Update, Exit

DATA JOIN
var textElements = svg.selectAll('text').data(data);
UPDATE OLD NODES
textElements.attr('class', 'grey');
ENTER NEW NODES
textElements.enter().append('text').attr('class', 'green');
UPDATE OLD AND NEW NODES
textElements.attr(..., ...);
EXIT
textElements.exit().attr('class', 'red');

So what?

HTML

[Markup]

JS

[Behavior]

CSS

[Styling]

Canvas

[Drawing]

SVG

[Drawing]

ScalableVectorGraphics

<rect>

<circle>

<line>

<text>

<g>

Description

Group

width

height

(x1, y1)

(x2, y2)

(x, y)

(x, y)

text

(cx, cy)

r

SVG Code

HTML

<svg>
    <rect x="10" y="15" width="60" height="20" />
    <line x1="95" y1="35" x2="105" y2="15" />
    <circle cx="130" cy="25" r="6" />
</svg>

BROWSER

/

var svg = d3.select('#content').append('svg');
svg.append('rect').attr('x', 10).attr(...)...;
svg.append('line').attr('x1', 85).attr(...)...;
svg.append('circle').attr('cx', 130).attr(...)...;

D3

Start Drawing

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
    <div id="content"></div>
        <script> 
         d3.select('#content')
            .append('svg')
               .selectAll('rect')
               .data([10, 20, 15, 6, 5])
               .enter()
               .append('rect')
                   .attr('x', 0)
                   .attr('y', function(data, index) {return index * 25})
                   .attr('height', 20)
                   .attr('width', function(data, index) {return data});
        </script>
    </body>
</html>

Live Demo

Data Import

  • CSV
    d3.csv("data.csv", function(data) {...}
     
  • TSV

    d3.tsv("data.tsv", function(data) {...}
     

  • JSON
    d3.json("data.json", function(data) {...}

What else?

  • Layouts and Geometry
  • Scales and Ranges
  • Data Transformation
  • Array and Math Functions
  • Colors
  • Time Formating and Scale 
  • Geography
  • Behaviors (Drag & Zoom)

Examples

Look at d3js.org for more examples

Resume

+ based on web standards

+ totally flexible

+ easy to debug

+ many, many examples online

+ Libaries build on D3 (NVD3.js, C3.js or IVML)

 

- a lot of code

- for standard charts too heavy

Go 4 Gold! 

  • https://github.com/mbostock/d3/wiki
  • https://github.com/mbostock/d3/wiki/API-Reference
  • http://bost.ocks.org/mike/
  • Getting Started with D3 by Mike Dewar
  • Interactive Data Visualization for the Web by Scott Murray (online for free)
  • https://github.com/alignedleft/d3-book

Good Starting Points

Credits

by Daniel Barth

14th & 15th September 2016

https://comsysto.com/veranstaltung/design-thinking-training

Design Thinking Training

comSysto GmbH

sponsored the time for this talk

&

is hiring in Munich & Berlin :)

Thanks for your attention!

 

Questions?

Get in touch later!

Twitter: _lizzelo_

Getting Started with D3.js

By Elisabeth Engel

Getting Started with D3.js

YouTube recording: https://www.youtube.com/watch?v=Ape1hFJv3Q0

  • 8,041

More from Elisabeth Engel