Scribd Logo
Upload

Welcome to Scribd!

  • Data Driven Documents: Introduction To Visualising Data With D3.js

    Uploaded by

    abhishek ranjan
    9 views37 pages

    Original Title

    d3introduction-150205090549-conversion-gate02.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views37 pages

    Data Driven Documents: Introduction To Visualising Data With D3.js

    Uploaded by

    abhishek ranjan

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 37

    Data Driven Documents

    Introduction to visualising data with D3.js

    Michał Oniszczuk"
    micon@icm.edu.pl"
    adalab.icm.edu.pl
    Me & my team

    software dev
    adalab.icm.edu.pl
    text & data mining
    Agenda
    what is D3
    core ideas
    features
    D3 in ICM
    What is D3?

    more examples: d3js.org


    Architecture
    Data

    UI
    Architecture
    Data

    UI
    Architecture
    Data
    Libraries

    Low–level

    UI
    <html>
    <body>
    "
    <svg width="400" height="200">
    <circle cx="100" cy="100" r="10"></circle>
    <circle cx="200" cy="100" r="30" fill="orange"></circle>
    <circle cx="300" cy="100" r="20" fill="olivedrab"></circle>
    </svg>

    examples are inspired by the Three Little Circles tutorial by Mike Bostock
    Core D3 ideas

    select
    bind
    Include .

    <html>
    <body>
    <script src=„d3.js”></script>
    ...
    Select
    Select
    Select

    <svg>...</svg>
    "
    <script>
    var circles = d3.selectAll("circle");
    circles.attr("r", 30);
    </script>
    Select

    <svg>...</svg> CSS3 selector


    "
    <script>
    var circles = d3.selectAll("circle");
    circles.attr("r", 30);
    </script>
    Select

    <svg>...</svg> CSS3 selector


    "
    <script>
    var circles = d3.selectAll("circle");
    circles.attr("r", 30);
    </script>
    Select

    <svg>...</svg> CSS3 selector


    "
    <script>
    var circles = d3.selectAll("circle");
    circles
    .attr("r", 30)
    method chaining
    { .attr("stroke", "black")
    .attr("stroke-width", 1.5);
    </script>
    Select with jQuery

    <svg>...</svg>
    "
    <script>
    var circles = $("circle");
    circles
    .attr("r", 30)
    .attr("stroke", "black")
    .attr("stroke-width", 1.5);
    </script>
    Bind

    var sizes = [10, 25, 60];


    Bind
    <svg>...</svg>
    "
    <script>
    var circles = d3.selectAll("circle");
    var sizes = [10, 25, 60];
    circles
    .data(sizes)
    .attr("r", function(size)
    { return size / 2; });
    </script>
    Batteries included
    layouts scales
    transitions date & time
    geography colour helpers
    localisation svg helpers
    json & csv drag & drop
    Libraries
    c3js.org
    <link href="c3.css" rel="stylesheet" type="text/css">
    <script src="d3.js"></script>
    <script src="c3.js"></script>
    "
    <div id="chart"></div>
    "
    <script>
    var chart = c3.generate({
    bindto: '#chart',
    data: {
    columns: [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 20, 10, 40, 15, 25]
    ]
    }
    });
    </script> c3js.org
    <link href="c3.css" rel="stylesheet" type="text/css">
    <script src="d3.js"></script>
    <script src="c3.js"></script>
    "
    <div id="chart"></div>
    "
    <script>
    var chart = c3.generate({
    bindto: '#chart',
    data: {
    columns: [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 20, 10, 40, 15, 25]
    ]
    }
    });
    </script> c3js.org
    NVD3.js

    nvd3.org
    ramnathv.github.io/rCharts
    D3 in ICM
    Scholar Graph Explorer

    developed in adalab.icm.edu.pl
    R graphs exporter

    developed by Monika Pawluczuk m.pawluczuk@icm.edu.pl


    & Michał Bojanowski m.bojanowski@uw.edu.pl
    Charts
    More charts
    Summary
    Data
    Libraries

    Low–level

    UI
    Warning

    low–level
    steep learning curve
    D3 is good
    flexible
    declarative
    community
    libs
    Links
    d3js.org — great examples & tutorials
    libraries & tools:!
    nvd3.org, c3js.org, … — easier charts
    ramnathv.github.io/rCharts — create D3 charts in R
    app.raw.densitydesign.org — WYSIWYG, no coding
    mikemcdearmon.com/portfolio/techposts/charting-
    libraries-using-d3 — many more libs
    Thanks!
    Please ask questions

    Michał Oniszczuk"
    micon@icm.edu.pl"
    adalab.icm.edu.pl

    You might also like