Introducing d3.js

Practical d3.js introduction which teaches some of d3's fundamentals such as data-joins, scales, axis, labels, ticks, animations...

We start off with a plain SVG representing a chart, refine it, in each iteration touching a new topic to actually update the chart (animate bars and scale) every x minutes.

After the talk, you should be able to understand how scales, axis and data-binding work together.

Demo code for this talk can be found at: https://github.com/toonketels/d3-presentation-demo

Presented at Fronteers Meetup - Mechelen, Belgium

Transcript

1. @toonketels
   

   View Slide

2. Insert SVG into DOM
   Data joins
   Scales
   Axis & labels
   Axis & ticks
   Animations
   Update chart when data changes
   

   View Slide

3. View Slide

4. Scalable Vector Graphics (SVG) is an XML-
   based vector image format for two-
   dimensional graphics that has support for
   interactivity and animation. The SVG
   specification is an open standard developed
   by the World Wide Web Consortium (W3C)
   since 1999.
   Wikipedia
   

   View Slide

5. XML based - "tags and attributes"
   optimized for images - better for visualization
   

   View Slide

6. <
   s
   v
   g
   >
   <
   /
   s
   v
   g
   >
   <
   r
   e
   c
   t
   >
   <
   /
   r
   e
   c
   t
   >
   <
   p
   a
   t
   h
   >
   <
   /
   p
   a
   t
   h
   >
   <
   c
   i
   r
   c
   l
   e
   >
   <
   /
   c
   i
   r
   c
   l
   e
   >
   <
   t
   e
   x
   t
   >
   <
   /
   t
   e
   x
   t
   >
   

   View Slide

7. <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   5
   " y
   =
   "
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   c
   i
   r
   c
   l
   e c
   x
   =
   "
   1
   0
   0
   " c
   y
   =
   "
   2
   5
   0
   " r
   =
   "
   4
   0
   "
   >
   <
   /
   c
   i
   r
   c
   l
   e
   >
   

   View Slide

8. Hardcoded into the HTML source
   

   View Slide

9. <
   s
   v
   g w
   i
   d
   t
   h
   =
   "
   7
   0
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   0
   "
   >
   <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   5
   " y
   =
   "
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   3
   1
   " y
   =
   "
   7
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   8
   6
   " y
   =
   "
   1
   4
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   4
   7
   4
   " y
   =
   "
   2
   1
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   3
   0
   8
   " y
   =
   "
   2
   8
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   7
   0
   0
   " y
   =
   "
   3
   5
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   r
   e
   c
   t x
   =
   "
   0
   " w
   i
   d
   t
   h
   =
   "
   6
   3
   0
   " y
   =
   "
   4
   2
   0
   " h
   e
   i
   g
   h
   t
   =
   "
   5
   0
   "
   >
   <
   /
   r
   e
   c
   t
   >
   <
   /
   s
   v
   g
   >
   

   View Slide

10. Hardcode SVG into the DOM
    

    View Slide

11. How to use d3 to create SVG element?
    

    View Slide

12. v
    a
    r c
    a
    n
    v
    a
    s
    _
    d = {
    w
    i
    d
    t
    h
    : 7
    0
    0
    , h
    e
    i
    g
    h
    t
    : 5
    0
    0
    }
    ,
    c
    a
    n
    v
    a
    s = d
    3
    .
    s
    e
    l
    e
    c
    t
    (
    '
    #
    c
    a
    n
    v
    a
    s
    '
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    s
    v
    g
    '
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , c
    a
    n
    v
    a
    s
    _
    d
    .
    w
    i
    d
    t
    h
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , c
    a
    n
    v
    a
    s
    _
    d
    .
    h
    e
    i
    g
    h
    t
    )
    ;
    

    View Slide

13. <
    d
    i
    v i
    d
    =
    "
    c
    a
    n
    v
    a
    s
    "
    >
    <
    s
    v
    g w
    i
    d
    t
    h
    =
    "
    7
    0
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    0
    "
    >
    <
    /
    s
    v
    g
    >
    <
    /
    d
    i
    v
    >
    

    View Slide

14. Search for existing DOM node
    Use .
    a
    p
    p
    e
    n
    d
    (
    '
    s
    v
    g
    '
    )
    Set attributies with .
    a
    t
    t
    r
    (
    '
    n
    a
    m
    e
    '
    , '
    v
    a
    l
    u
    e
    '
    )
    

    View Slide

15. How to display content in SVG?
    

    View Slide

16. View Slide

17. <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    5
    " y
    =
    "
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    1
    " y
    =
    "
    7
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    8
    6
    " y
    =
    "
    1
    4
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    4
    7
    4
    " y
    =
    "
    2
    1
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    0
    8
    " y
    =
    "
    2
    8
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    7
    0
    0
    " y
    =
    "
    3
    5
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    6
    3
    0
    " y
    =
    "
    4
    2
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    

    View Slide

18. w
    i
    d
    t
    h
    y
    

    View Slide

19. y = 7
    0 * i
    w
    i
    d
    t
    h = c
    a
    n
    v
    a
    s
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    )
    5
    0 /
    / o
    u
    r v
    a
    l
    u
    e
    1
    0
    0 /
    / m
    a
    x
    i
    m
    u
    m v
    a
    l
    u
    e
    7
    0
    0 p
    x /
    / w
    i
    d
    t
    h
    =
    > w
    i
    d
    t
    h = 7
    0
    0 p
    x * (
    5
    0 / 1
    0
    0
    ) /
    / 3
    5
    0
    

    View Slide

20. v
    a
    r d
    a
    t
    a = [
    2
    6
    0
    0
    9
    8
    9
    6
    , 1
    7
    9
    8
    0
    4
    7
    5
    5
    , 4
    9
    4
    4
    7
    8
    7
    9
    7
    , 2
    7
    1
    8
    5
    0
    5
    8
    8
    8
    , 1
    7
    6
    5
    6
    8
    6
    4
    6
    5
    v
    a
    r m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l = d
    3
    .
    m
    a
    x
    (
    d
    a
    t
    a
    )
    ;
    

    View Slide

21. d
    a
    t
    a
    .
    m
    a
    p
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) {
    c
    a
    n
    v
    a
    s
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0 )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , c
    a
    n
    v
    a
    s
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    )
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , 7
    0 * i
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    }
    )
    ;
    

    View Slide

22. d
    a
    t
    a
    .
    m
    a
    p
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) {
    c
    a
    n
    v
    a
    s
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0 )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) {
    r
    e
    t
    u
    r
    n c
    a
    n
    v
    a
    s
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    )
    }
    )
    (
    d
    , i
    )
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) {
    r
    e
    t
    u
    r
    n 7
    0 * i
    ;
    }
    )
    (
    d
    , i
    )
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    ;
    }
    )
    ;
    

    View Slide

23. <
    s
    v
    g w
    i
    d
    t
    h
    =
    "
    7
    0
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    0
    "
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    5
    " y
    =
    "
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    1
    " y
    =
    "
    7
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    8
    6
    " y
    =
    "
    1
    4
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    4
    7
    4
    " y
    =
    "
    2
    1
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    0
    8
    " y
    =
    "
    2
    8
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    7
    0
    0
    " y
    =
    "
    3
    5
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    6
    3
    0
    " y
    =
    "
    4
    2
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    /
    s
    v
    g
    >
    

    View Slide

24. View Slide

25. c
    a
    n
    v
    a
    s
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0 )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    {
    r
    e
    t
    u
    r
    n c
    a
    n
    v
    a
    s
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    )
    ;
    }
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) {
    r
    e
    t
    u
    r
    n 7
    0 * i
    ;
    }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    

    View Slide

26. c
    a
    n
    v
    a
    s
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0 )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    {
    r
    e
    t
    u
    r
    n c
    a
    n
    v
    a
    s
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    )
    ;
    }
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) {
    r
    e
    t
    u
    r
    n 7
    0 * i
    ;
    }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    

    View Slide

27. c
    a
    n
    v
    a
    s
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    {
    r
    e
    t
    u
    r
    n c
    a
    n
    v
    a
    s
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    )
    }
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n 7
    0 * i }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    ;
    

    View Slide

28. Select elements with .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    Create data join with .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    Get the enter subcollection via .
    e
    n
    t
    e
    r
    (
    )
    Append the elements via .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    Set attributes with .
    a
    t
    t
    r
    (
    '
    n
    a
    m
    e
    '
    , '
    v
    a
    l
    u
    e
    '
    )
    

    View Slide

29. Insert SVG container (canvas)
    Create new elements via data binding
    

    View Slide

30. I hate the math in our code, can't we use
    scales for that?
    

    View Slide

31. a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    { r
    e
    t
    u
    r
    n c
    h
    a
    r
    t
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    )
    

    View Slide

32. a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    { r
    e
    t
    u
    r
    n c
    h
    a
    r
    t
    _
    d
    .
    w
    i
    d
    t
    h * (
    d
    /
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    ) }
    )
    w
    i
    d
    t
    h
    : d
    a
    t
    a =
    > p
    i
    x
    e
    l
    s
    v
    a
    r w
    i
    d
    t
    h = s
    c
    a
    l
    e
    F
    u
    n
    c
    (
    1
    7
    9
    8
    0
    4
    7
    5
    5
    ) /
    / 3
    1
    

    View Slide

33. v
    a
    r d
    a
    t
    a = [
    2
    6
    0
    0
    9
    8
    9
    6
    ,
    1
    7
    9
    8
    0
    4
    7
    5
    5
    ,
    4
    9
    4
    4
    7
    8
    7
    9
    7
    ,
    2
    7
    1
    8
    5
    0
    5
    8
    8
    8
    ,
    1
    7
    6
    5
    6
    8
    6
    4
    6
    5
    ,
    4
    0
    1
    5
    6
    9
    2
    3
    8
    0
    ,
    3
    6
    1
    1
    6
    1
    2
    0
    9
    6
    ]
    ;
    

    View Slide

34. <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    5
    " y
    =
    "
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    1
    " y
    =
    "
    7
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    8
    6
    " y
    =
    "
    1
    4
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    4
    7
    4
    " y
    =
    "
    2
    1
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    0
    8
    " y
    =
    "
    2
    8
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    7
    0
    0
    " y
    =
    "
    3
    5
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    6
    3
    0
    " y
    =
    "
    4
    2
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    

    View Slide

35. 2
    6
    0
    0
    9
    8
    9
    6 =
    > 5
    1
    7
    9
    8
    0
    4
    7
    5
    5 =
    > 3
    1
    4
    9
    4
    4
    7
    8
    7
    9
    7 =
    > 8
    6
    2
    7
    1
    8
    5
    0
    5
    8
    8
    8 =
    > 4
    7
    4
    1
    7
    6
    5
    6
    8
    6
    4
    6
    5 =
    > 3
    0
    8
    4
    0
    1
    5
    6
    9
    2
    3
    8
    0 =
    > 7
    0
    0
    3
    6
    1
    1
    6
    1
    2
    0
    9
    6 =
    > 6
    3
    0
    

    View Slide

36. 0 =
    > 0
    4
    0
    1
    5
    6
    9
    2
    3
    8
    0 =
    > 7
    0
    0
    0 =
    > 0
    o
    v
    e
    r
    a
    l
    l
    _
    m
    a
    x =
    > c
    h
    a
    r
    t
    _
    d
    .
    w
    i
    d
    t
    h
    

    View Slide

37. x = d
    3
    .
    s
    c
    a
    l
    e
    .
    l
    i
    n
    e
    a
    r
    (
    )
    .
    d
    o
    m
    a
    i
    n
    (
    [
    0
    , m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    ]
    )
    .
    r
    a
    n
    g
    e
    (
    [
    0
    , c
    h
    a
    r
    t
    _
    d
    .
    w
    i
    d
    t
    h
    ]
    )
    ;
    

    View Slide

38. c
    h
    a
    r
    t
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    { r
    e
    t
    u
    r
    n x
    (
    d
    ) }
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n 6
    0 * i }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    ;
    

    View Slide

39. c
    h
    a
    r
    t
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , x
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n 6
    0 * i }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    ;
    

    View Slide

40. Create a linear scale with d
    3
    .
    s
    c
    a
    l
    e
    .
    l
    i
    n
    e
    a
    r
    (
    )
    Set the input domain as the lowest/highest value
    .
    d
    o
    m
    a
    i
    n
    (
    [
    0
    , m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    ]
    )
    Set the output range as the lowest/highest value
    .
    r
    a
    n
    g
    e
    (
    [
    0
    , c
    h
    a
    r
    t
    _
    d
    .
    w
    i
    d
    t
    h
    ]
    )
    

    View Slide

41. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    

    View Slide

42. I hate the math in our code, can't we use
    scales for that?
    

    View Slide

43. a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    { r
    e
    t
    u
    r
    n i * 6
    0 }
    )
    

    View Slide

44. y
    : d
    a
    t
    a
    -
    i
    t
    e
    m =
    > p
    i
    x
    e
    l
    s
    v
    a
    r y = s
    o
    m
    e
    O
    t
    h
    e
    r
    S
    c
    a
    l
    e
    F
    u
    n
    c
    (
    1
    7
    9
    8
    0
    4
    7
    5
    5
    ) /
    / 7
    0
    

    View Slide

45. v
    a
    r d
    a
    t
    a = [
    2
    6
    0
    0
    9
    8
    9
    6
    ,
    1
    7
    9
    8
    0
    4
    7
    5
    5
    ,
    4
    9
    4
    4
    7
    8
    7
    9
    7
    ,
    2
    7
    1
    8
    5
    0
    5
    8
    8
    8
    ,
    1
    7
    6
    5
    6
    8
    6
    4
    6
    5
    ,
    4
    0
    1
    5
    6
    9
    2
    3
    8
    0
    ,
    3
    6
    1
    1
    6
    1
    2
    0
    9
    6
    ]
    ;
    

    View Slide

46. <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    5
    " y
    =
    "
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    1
    " y
    =
    "
    7
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    8
    6
    " y
    =
    "
    1
    4
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    4
    7
    4
    " y
    =
    "
    2
    1
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    3
    0
    8
    " y
    =
    "
    2
    8
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    7
    0
    0
    " y
    =
    "
    3
    5
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    <
    r
    e
    c
    t x
    =
    "
    0
    " w
    i
    d
    t
    h
    =
    "
    6
    3
    0
    " y
    =
    "
    4
    2
    0
    " h
    e
    i
    g
    h
    t
    =
    "
    5
    0
    "
    >
    <
    /
    r
    e
    c
    t
    >
    

    View Slide

47. 2
    6
    0
    0
    9
    8
    9
    6 =
    > 0
    1
    7
    9
    8
    0
    4
    7
    5
    5 =
    > 7
    0
    4
    9
    4
    4
    7
    8
    7
    9
    7 =
    > 1
    4
    0
    2
    7
    1
    8
    5
    0
    5
    8
    8
    8 =
    > 2
    1
    0
    1
    7
    6
    5
    6
    8
    6
    4
    6
    5 =
    > 2
    8
    0
    4
    0
    1
    5
    6
    9
    2
    3
    8
    0 =
    > 3
    5
    0
    3
    6
    1
    1
    6
    1
    2
    0
    9
    6 =
    > 4
    2
    0
    

    View Slide

48. 2
    6
    0
    0
    9
    8
    9
    6 =
    > 0
    1
    7
    9
    8
    0
    4
    7
    5
    5 =
    > ?
    4
    9
    4
    4
    7
    8
    7
    9
    7 =
    > ?
    2
    7
    1
    8
    5
    0
    5
    8
    8
    8 =
    > ?
    1
    7
    6
    5
    6
    8
    6
    4
    6
    5 =
    > ?
    4
    0
    1
    5
    6
    9
    2
    3
    8
    0 =
    > ?
    3
    6
    1
    1
    6
    1
    2
    0
    9
    6 =
    > 5
    0
    0 - 6
    0
    2
    6
    0
    0
    9
    8
    9
    6 =
    > 0
    1
    7
    9
    8
    0
    4
    7
    5
    5 =
    > ?
    4
    9
    4
    4
    7
    8
    7
    9
    7 =
    > ?
    2
    7
    1
    8
    5
    0
    5
    8
    8
    8 =
    > ?
    1
    7
    6
    5
    6
    8
    6
    4
    6
    5 =
    > ?
    4
    0
    1
    5
    6
    9
    2
    3
    8
    0 =
    > ?
    3
    6
    1
    1
    6
    1
    2
    0
    9
    6 =
    > h
    e
    i
    g
    h
    t - r
    a
    n
    g
    e
    B
    a
    n
    d
    

    View Slide

49. y = d
    3
    .
    s
    c
    a
    l
    e
    .
    o
    r
    d
    i
    n
    a
    l
    (
    )
    .
    d
    o
    m
    a
    i
    n
    (
    d
    a
    t
    a
    )
    .
    r
    a
    n
    g
    e
    B
    a
    n
    d
    s
    (
    [
    0
    , c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t
    ]
    )
    ;
    

    View Slide

50. c
    h
    a
    r
    t
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , x
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , y
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , 5
    0
    )
    ;
    

    View Slide

51. c
    h
    a
    r
    t
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , x
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , y
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , y
    .
    r
    a
    n
    g
    e
    B
    a
    n
    d
    )
    ;
    

    View Slide

52. Create an ordinal scale with d
    3
    .
    s
    c
    a
    l
    e
    .
    o
    r
    d
    i
    n
    a
    l
    (
    ) for
    individual items
    Pas all the values as input domain .
    d
    o
    m
    a
    i
    n
    (
    d
    a
    t
    a
    )
    Use rangeBands as output .
    r
    a
    n
    g
    e
    B
    a
    n
    d
    s
    (
    [
    0
    ,
    c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t
    ]
    )
    Use y
    .
    r
    a
    n
    g
    e
    B
    a
    n
    d to get the height of a bar
    

    View Slide

53. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    Use ordinal scale to convert Y value
    

    View Slide

54. How do we create labels?
    

    View Slide

55. View Slide

56. axis creator function
    draw axis
    

    View Slide

57. a
    x
    i
    s
    _
    y
    _
    f = d
    3
    .
    s
    v
    g
    .
    a
    x
    i
    s
    (
    )
    .
    s
    c
    a
    l
    e
    (
    y
    )
    .
    o
    r
    i
    e
    n
    t
    (
    '
    l
    e
    f
    t
    '
    )
    

    View Slide

58. a
    x
    i
    s
    _
    y = c
    h
    a
    r
    t
    .
    a
    p
    p
    e
    n
    d
    (
    '
    g
    '
    )
    .
    a
    t
    t
    r
    (
    '
    c
    l
    a
    s
    s
    '
    , '
    a
    x
    i
    s y
    '
    )
    .
    c
    a
    l
    l
    (
    a
    x
    i
    s
    _
    y
    _
    f
    )
    ;
    

    View Slide

59. a
    x
    i
    s
    _
    y
    _
    f = d
    3
    .
    s
    v
    g
    .
    a
    x
    i
    s
    (
    )
    .
    s
    c
    a
    l
    e
    (
    y
    )
    .
    o
    r
    i
    e
    n
    t
    (
    '
    l
    e
    f
    t
    '
    )
    .
    t
    i
    c
    k
    P
    a
    d
    d
    i
    n
    g
    (
    3
    0
    )
    .
    t
    i
    c
    k
    S
    i
    z
    e
    (
    0
    , 0
    , 0
    )
    ;
    

    View Slide

60. First we create an axis with d
    3
    .
    s
    v
    g
    .
    a
    x
    i
    s
    (
    )
    We use to scale so it knows what to draw
    We can set other attributes to "tune" its display
    Finally, draw it by appending group
    c
    h
    a
    r
    t
    .
    a
    p
    p
    e
    n
    d
    (
    '
    g
    '
    )
    And call the creator function .
    c
    a
    l
    l
    (
    a
    x
    i
    s
    _
    y
    _
    f
    )
    

    View Slide

61. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    Use ordinal scale to convert Y value
    Display labels through axis
    

    View Slide

62. How do we create those vertical lines?
    

    View Slide

63. View Slide

64. a
    x
    i
    s
    _
    x
    _
    f = d
    3
    .
    s
    v
    g
    .
    a
    x
    i
    s
    (
    )
    .
    s
    c
    a
    l
    e
    (
    x
    )
    .
    o
    r
    i
    e
    n
    t
    (
    '
    t
    o
    p
    '
    )
    .
    t
    i
    c
    k
    P
    a
    d
    d
    i
    n
    g
    (
    1
    0
    )
    .
    t
    i
    c
    k
    s
    (
    5
    )
    .
    t
    i
    c
    k
    S
    i
    z
    e
    (
    c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t
    , 0
    , 0
    )
    a
    x
    i
    s
    _
    x = c
    h
    a
    r
    t
    .
    a
    p
    p
    e
    n
    d
    (
    '
    g
    '
    )
    .
    a
    t
    t
    r
    (
    '
    c
    l
    a
    s
    s
    '
    , '
    a
    x
    i
    s x
    '
    )
    .
    a
    t
    t
    r
    ( '
    t
    r
    a
    n
    s
    f
    o
    r
    m
    '
    , '
    t
    r
    a
    n
    s
    l
    a
    t
    e
    (
    '
    + 0 +
    '
    , '
    + c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t +
    '
    )
    ' )
    .
    c
    a
    l
    l
    (
    a
    x
    i
    s
    _
    x
    _
    f
    )
    ;
    

    View Slide

65. a
    x
    i
    s
    _
    x
    _
    f = d
    3
    .
    s
    v
    g
    .
    a
    x
    i
    s
    (
    )
    .
    s
    c
    a
    l
    e
    (
    x
    )
    .
    o
    r
    i
    e
    n
    t
    (
    '
    t
    o
    p
    '
    )
    .
    t
    i
    c
    k
    P
    a
    d
    d
    i
    n
    g
    (
    1
    0
    )
    .
    t
    i
    c
    k
    s
    (
    5
    )
    .
    t
    i
    c
    k
    S
    i
    z
    e
    (
    c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t
    , c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t
    , 0
    )
    .
    t
    i
    c
    k
    S
    u
    b
    d
    i
    v
    i
    d
    e
    (
    2
    )
    

    View Slide

66. We create axis just like before (create/draw)
    Just be sure we set a the tick size to charts height
    t
    i
    c
    k
    S
    i
    z
    e
    (
    c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t
    , c
    h
    a
    r
    t
    _
    d
    .
    h
    e
    i
    g
    h
    t
    ,
    0
    )
    

    View Slide

67. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    Use ordinal scale to convert Y value
    Display labels through axis
    Display ticks through axis
    

    View Slide

68. Should we display what the values represent
    as label?
    

    View Slide

69. v
    a
    r d
    a
    t
    a = [
    {
    v
    a
    l
    u
    e
    : 2
    6
    0
    0
    9
    8
    9
    6
    , n
    a
    m
    e
    : "
    a
    n
    g
    u
    l
    a
    r
    .
    j
    s
    "
    }
    ,
    {
    v
    a
    l
    u
    e
    : 1
    7
    9
    8
    0
    4
    7
    5
    5
    , n
    a
    m
    e
    : "
    b
    a
    c
    k
    b
    o
    n
    e
    .
    j
    s
    "
    }
    ,
    {
    v
    a
    l
    u
    e
    : 4
    9
    4
    4
    7
    8
    7
    9
    7
    , n
    a
    m
    e
    : "
    b
    a
    t
    m
    a
    n
    .
    j
    s
    "
    }
    ,
    {
    v
    a
    l
    u
    e
    : 2
    7
    1
    8
    5
    0
    5
    8
    8
    8
    , n
    a
    m
    e
    : "
    e
    m
    b
    e
    r
    .
    j
    s
    "
    }
    ,
    {
    v
    a
    l
    u
    e
    : 1
    7
    6
    5
    6
    8
    6
    4
    6
    5
    , n
    a
    m
    e
    : "
    k
    n
    o
    c
    k
    o
    u
    t
    .
    j
    s
    "
    }
    ,
    {
    v
    a
    l
    u
    e
    : 4
    0
    1
    5
    6
    9
    2
    3
    8
    0
    , n
    a
    m
    e
    : "
    s
    a
    m
    m
    y
    .
    j
    s
    "
    }
    ,
    {
    v
    a
    l
    u
    e
    : 3
    6
    1
    1
    6
    1
    2
    0
    9
    6
    , n
    a
    m
    e
    : "
    s
    p
    i
    n
    e
    .
    j
    s
    "
    }
    ]
    ;
    

    View Slide

70. View Slide

71. m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l = d
    3
    .
    m
    a
    x
    (
    d
    a
    t
    a
    )
    ,
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l = d
    3
    .
    m
    a
    x
    (
    d
    a
    t
    a
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n d
    .
    v
    a
    l
    u
    e }
    )
    

    View Slide

72. .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , x
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n x
    (
    d
    .
    v
    a
    l
    u
    e
    ) }
    )
    

    View Slide

73. .
    d
    o
    m
    a
    i
    n
    (
    d
    a
    t
    a
    )
    .
    d
    o
    m
    a
    i
    n
    (
    d
    a
    t
    a
    .
    m
    a
    p
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    )
    { r
    e
    t
    u
    r
    n d
    .
    n
    a
    m
    e }
    )
    )
    

    View Slide

74. .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , y
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n y
    (
    d
    .
    n
    a
    m
    e
    ) }
    )
    

    View Slide

75. To use real labels they need to be in the data source
    We use data accessor functions to tell d3 what attributes to
    use
    

    View Slide

76. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    Use ordinal scale to convert Y value
    Display labels through axis
    Display ticks through axis
    

    View Slide

77. Why is stuff not moving?
    

    View Slide

78. c
    h
    a
    r
    t
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n y
    (
    d
    .
    n
    a
    m
    e
    ) }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , y
    .
    r
    a
    n
    g
    e
    B
    a
    n
    d
    )
    .
    s
    t
    y
    l
    e
    (
    '
    f
    i
    l
    l
    '
    , '
    #
    3
    3
    3
    '
    )
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    6
    0
    0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n x
    (
    d
    .
    v
    a
    l
    u
    e
    ) }
    )
    

    View Slide

79. c
    h
    a
    r
    t
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n y
    (
    d
    .
    n
    a
    m
    e
    ) }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , y
    .
    r
    a
    n
    g
    e
    B
    a
    n
    d
    )
    .
    s
    t
    y
    l
    e
    (
    '
    f
    i
    l
    l
    '
    , '
    #
    3
    3
    3
    '
    )
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    6
    0
    0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n x
    (
    d
    .
    v
    a
    l
    u
    e
    ) }
    )
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    4
    0
    0
    )
    .
    s
    t
    y
    l
    e
    (
    '
    f
    i
    l
    l
    '
    , '
    b
    l
    a
    c
    k
    '
    )
    

    View Slide

80. a
    x
    i
    s
    _
    y = c
    h
    a
    r
    t
    .
    a
    p
    p
    e
    n
    d
    (
    '
    g
    '
    )
    .
    a
    t
    t
    r
    (
    '
    c
    l
    a
    s
    s
    '
    , '
    a
    x
    i
    s y
    '
    )
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    e
    l
    a
    y
    (
    8
    0
    0
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    8
    0
    0
    )
    .
    c
    a
    l
    l
    (
    a
    x
    i
    s
    _
    y
    _
    f
    )
    ;
    

    View Slide

81. To animate use .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    Transitions can have .
    d
    e
    l
    a
    y
    (
    5
    0
    0
    ) and
    d
    u
    r
    a
    t
    i
    o
    n
    (
    5
    0
    0
    )
    Change a attribute/style... before and after transition, d3
    will do the rest
    

    View Slide

82. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    Use ordinal scale to convert Y value
    Display labels through axis
    Display ticks through axis
    Animate the bars
    

    View Slide

83. How could we easily update our numbers?
    

    View Slide

84. View Slide

85. We've changed the data source so that:
    drawChart gets called once, the first time
    every x seconds, updateChart gets called with new data
    

    View Slide

86. b
    a
    r
    s = c
    h
    a
    r
    t
    .
    s
    e
    l
    e
    c
    t
    A
    l
    l
    (
    '
    r
    e
    c
    t
    '
    )
    .
    d
    a
    t
    a
    ( d
    a
    t
    a )
    .
    e
    n
    t
    e
    r
    (
    )
    .
    a
    p
    p
    e
    n
    d
    (
    '
    r
    e
    c
    t
    '
    )
    .
    a
    t
    t
    r
    (
    '
    x
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , 0
    )
    .
    a
    t
    t
    r
    (
    '
    y
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n y
    (
    d
    .
    n
    a
    m
    e
    ) }
    )
    .
    a
    t
    t
    r
    (
    '
    h
    e
    i
    g
    h
    t
    '
    , y
    .
    r
    a
    n
    g
    e
    B
    a
    n
    d
    )
    u
    .
    s
    t
    y
    l
    e
    (
    '
    f
    i
    l
    l
    '
    , '
    #
    3
    3
    3
    '
    )
    ;
    b
    a
    r
    s
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    6
    0
    0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n x
    (
    d
    .
    v
    a
    l
    u
    e
    ) }
    )
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    4
    0
    0
    )
    .
    s
    t
    y
    l
    e
    (
    '
    f
    i
    l
    l
    '
    , '
    b
    l
    a
    c
    k
    '
    )
    

    View Slide

87. f
    u
    n
    c
    t
    i
    o
    n u
    p
    d
    a
    t
    e
    C
    h
    a
    r
    t
    (
    d
    a
    t
    a
    ) {
    b
    a
    r
    s
    .
    d
    a
    t
    a
    (
    d
    a
    t
    a
    )
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    6
    0
    0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n x
    (
    d
    .
    v
    a
    l
    u
    e
    ) }
    )
    ;
    }
    

    View Slide

88. To update the chart, rebind the data via .
    d
    a
    t
    a
    (
    u
    p
    d
    a
    t
    e
    d
    _
    d
    a
    t
    a )
    To redraw, actually call a method that will update the
    display like .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    ,
    .
    .
    .
    )
    

    View Slide

89. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    Use ordinal scale to convert Y value
    Display labels through axis
    Display ticks through axis
    Animate the bars
    Update the bars when data changes
    

    View Slide

90. What's with all that unused whitespace?
    

    View Slide

91. Ask ourself: "What would need to change to update our axis?"
    

    View Slide

92. axis creator function
    scale function
    scale's input domain
    

    View Slide

93. .
    d
    o
    m
    a
    i
    n
    (
    [
    0
    , 4
    0
    0
    0
    ]
    )
    .
    d
    o
    m
    a
    i
    n
    (
    [
    0
    , 2
    0
    0
    0
    ]
    )
    

    View Slide

94. To update the axis, just update the scale and call something on
    the axis again.
    

    View Slide

95. /
    / S
    e
    t t
    h
    e c
    u
    r
    r
    e
    n
    t o
    v
    e
    r
    a
    l m
    a
    x
    ;
    m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l = d
    3
    .
    m
    a
    x
    (
    d
    a
    t
    a
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n d
    .
    v
    a
    l
    u
    e }
    )
    ;
    /
    / U
    p
    d
    a
    t
    e t
    h
    e x s
    c
    a
    l
    e
    x
    .
    d
    o
    m
    a
    i
    n
    (
    [
    0
    , m
    a
    x
    _
    o
    v
    e
    r
    a
    l
    l
    ]
    )
    /
    / U
    p
    d
    a
    t
    e x a
    x
    i
    s
    a
    x
    i
    s
    _
    x
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    6
    0
    0
    )
    .
    c
    a
    l
    l
    (
    a
    x
    i
    s
    _
    x
    _
    f
    )
    ;
    /
    / U
    p
    d
    a
    t
    e t
    h
    e b
    a
    r
    s w
    i
    t
    h n
    e
    w d
    a
    t
    a
    b
    a
    r
    s
    .
    d
    a
    t
    a
    (
    d
    a
    t
    a
    )
    .
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    (
    )
    .
    d
    e
    l
    a
    y
    (
    8
    0
    0
    )
    .
    d
    u
    r
    a
    t
    i
    o
    n
    (
    6
    0
    0
    )
    .
    a
    t
    t
    r
    (
    '
    w
    i
    d
    t
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    d
    , i
    ) { r
    e
    t
    u
    r
    n x
    (
    d
    .
    v
    a
    l
    u
    e
    ) }
    )
    ;
    

    View Slide

96. We can update anything
    Always ask: "For it to update, what needs to change?"
    Change that value and redraw
    

    View Slide

97. Insert SVG container (canvas)
    Create new elements via data binding
    Use linear scale to convert width
    Use ordinal scale to convert Y value
    Display labels through axis
    Display ticks through axis
    Animate the bars
    Update the bars when data changes
    Update the entire chart when data changes
    

    View Slide

98. View Slide

99. Grab the from github
    demo code
    

    View Slide