What is D3? – Hack to the Future 2 – Fundamentals

View Github Repository Open presentation in a new window

axelson

See all presentation from axelson

What is D3? – Hack to the Future 2 – Fundamentals

0 0

d3_presentation

A 5-minute presentation on what D3 is and what it isn't

On Github axelson / d3_presentation

What is D3?

Hack to the Future 2

2014-05-31

Jason Axelson / @bostonvaulter

Audience: Some may know of D3, some may not. This presentation is aimed at all of you.

D3 is

Data-Driven Documents

The purpose of D3 is to help you create data-driven documents. Many times this takes the form of interactive visualizations.

This may be how you picture D3

http://bl.ocks.org/mbostock/4062006 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

Instead of this

This visualizes the frequency of words used by political candidates. One way to find it is to look at all their speeches and count the frequency of each word.

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>
Because SVG is text-based it is ideal for manipulating programmatically, for example via D3.

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!
So what kinds of things can you make with the d3 toolbox?

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

D3 is a collection of tools that will help you build a visualization. Sample visualizations you find online are like instructions that will help you build the final product, but they require tweaking.

Thank You

Jason Axelson / @bostonvaulter

0