Scribd Logo
Upload

Welcome to Scribd!

  • 1 d3js Data Vis Fundamentals Slides

    Uploaded by

    Kyu Riyu
    15 views16 pages
    kodumai hai

    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
    kodumai hai

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    15 views16 pages

    1 d3js Data Vis Fundamentals Slides

    Uploaded by

    Kyu Riyu
    kodumai hai

    Copyright:

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

    D3.

    js Data Visualization Fundamentals


    The Basics
    Ben Sullins
    bensullins.com
    @bensullins

    Course Outline

    The Basics

    Working with Data

    Mapping

    Basic Charting

    Enhancing
    Your Viz

    Pulling it
    All Together

    Overview
    D3 Origins
    SVG Objects
    Drawing Shapes
    D3 Principles
    Drawing with Data

    D3 Origins

    D3 Origins
    Data-Driven
    Documents (D3.js)

    Flash and Java

    90s

    The Web

    00s

    2005

    Protoviz

    2011

    SVG Objects

    Scalable Vector Graphics

    Scalable Vector Graphics


    Shapes

    SVG
    Filters

    http://www.w3schools.com/svg/svg_intro.asp

    Gradients

    Scalable Vector Graphics


    HTML
    <svg>
    </svg>

    <rect width="50" height="200" style="fill: blue;"/>

    D3.js
    d3.select("body").append("svg").append("rect").attr("width", 50).attr("height",
    200).style("fill", "blue");
    Both Output

    Scalable Vector Graphics


    The Coordinate System
    0,0

    300,0
    20,100

    40, 200

    0,300

    300,300

    Drawing Shapes

    D3 Principles

    D3 Principles
    Selections
    d3.select("body) //selects the <body> html element
    Append Operator
    d3.select("body")
    .append("svg") //adds new <svg> object
    .append("rect") //add a new <rect> html element
    Style Operator
    d3.select("body")
    .append("svg") //adds new <svg> object
    .append("rect") //add a new <rect> html element
    .attr("width", 50) //set the width of our bar
    .attr("height", 200) //set the height of our bar
    .style("fill", "blue"); //fill the bar w/ the color blue

    Chaining Syntax
    With Whitespace
    d3.select("body")
    .append("svg") //add a new <svg> html element
    .append("rect") //add a new <rect> html element which will be our bar
    .attr("width", 50) //set the width of our bar
    .attr("height", 200) //set the height of our bar
    .style("fill", "blue"); //fill the bar w/ the color blue
    No Whitespace
    d3.select("body").append("svg").append("rect").attr("width", 50).attr("height",
    200).style("fill", "blue");

    Drawing with
    Data

    Summary
    D3 Origins
    SVG Objects
    Drawing Shapes
    D3 Principles
    Drawing with Data

    You might also like