What is D3?

Hack to the Future 2

2014-05-31

Jason Axelson / @bostonvaulter

D3 is

Data-Driven Documents

This may be how you picture D3

http://bl.ocks.org/mbostock/4062006

Instead of this

You have this

Fundamentals

  • HTML
  • DOM
  • Javascript
  • SVG

HTML

Hypertext Markup Language: structures content for web browsers


DOM

Document Object Model: Hierarchical structure of HTML


<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Title on Page</h1>
    <p>Paragraph on the page.</p>
  </body>
</html>

CSS

Cascading Style Sheets


Style the visual presentation of HTML



body {
    background-color: black;
    color: white;
}

JavaScript

Dynamic scripting language that modifies web pages



<script type="text/javascript">
    alert("Hello, world!");
</script>

SVG

Scalable Vector Graphics

Text-based image format



<svg width="50" height="50">
    <circle cx="25" cy="25" r="22"
        fill="blue" stroke="steelblue" stroke-width="3"/>
</svg>

D3 is a toolbox

  • Scales
  • Data-binding
  • Selections
  • Data Manipulation
  • Layouts

Scales

Convert a number to a color

Data-binding

Where the magic happens

Selections

Select specific group of HTML or SVG elements

Select elements that don't exist yet

Other Tools

  • Min/Max
  • Layouts
  • Nest/Rollup
  • Dynamic Properties
  • Transitions
  • Colors
  • Axis
  • Touch
  • Interpolation
  • External Resources
  • Controls
  • Time
  • And More!

Like this

http://mbostock.github.io/d3/talk/20111018/collision.html

Or this

Or simply

What is the d3 workflow?

  • Find a nice example
  • Copy it
  • Tweak it
  • Profit!

You may recognize

http://pasdechocolat.com/2013/07/20/livebus-with-meteor-and-d3/
Hawaii Examples

Part

So what is D3?

Powerful toolbox for creating visualizations


Thank You

Jason Axelson / @bostonvaulter