Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducing d3.js

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

Toon Ketels

May 23, 2013
Tweet

More Decks by Toon Ketels

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 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 full-size slide

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

    View full-size slide

  4. <
    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 full-size slide

  5. <
    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 full-size slide

  6. Hardcoded into the HTML source

    View full-size slide

  7. <
    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 full-size slide

  8. Hardcode SVG into the DOM

    View full-size slide

  9. How to use d3 to create SVG element?

    View full-size slide

  10. 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 full-size slide

  11. <
    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 full-size slide

  12. 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 full-size slide

  13. How to display content in SVG?

    View full-size slide

  14. <
    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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. <
    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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. <
    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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. <
    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 full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. How do we create labels?

    View full-size slide

  50. axis creator function
    draw axis

    View full-size slide

  51. 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 full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

  56. How do we create those vertical lines?

    View full-size slide

  57. 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 full-size slide

  58. 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 full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

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

    View full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

  64. .
    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 full-size slide

  65. .
    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 full-size slide

  66. .
    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 full-size slide

  67. 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 full-size slide

  68. 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 full-size slide

  69. Why is stuff not moving?

    View full-size slide

  70. 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 full-size slide

  71. 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 full-size slide

  72. 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 full-size slide

  73. 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 full-size slide

  74. 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 full-size slide

  75. How could we easily update our numbers?

    View full-size slide

  76. 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 full-size slide

  77. 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 full-size slide

  78. 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 full-size slide

  79. 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 full-size slide

  80. 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 full-size slide

  81. What's with all that unused whitespace?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. /
    / 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 full-size slide

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

    View full-size slide

  88. 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 full-size slide

  89. Grab the from github
    demo code

    View full-size slide