Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
INTERACTIVITY
                               It’s alive!!!




Tuesday, January 29, 13
Why?
                  Our data is large and multi-faceted---multiple parameters, data
                  types, sources of...
Compare:
                                Module 23




                                                  41
              ...
Compare:




Tuesday, January 29, 13
How?
                  HTML, CSS, Javascript

                  HTML - HyperText Markup Language
                  A webpa...
But...How does it work?
                  HTML is, for our purposes, more like just a dumb container.
                  CS...
What can d3 do?

                  http://mbostock.github.com/d3/ex/force.html
                  http://square.github.com/...
Case Study


                  Let’s graph a freaking time series!

                  What do we even input as data to thi...
Our Data
                  It’s basically just a saved dictionary into a file.
                  Python has a ‘JSON’ modul...
How do I do that?




Tuesday, January 29, 13
But how do I get it going?
     Just tell it that
       it’s HTML


    These are library
        imports




           ...
Now....What?

              Make a div




            Call our script

Tuesday, January 29, 13
Getting our hands dirty
       Load our data, the graph creation is wrapped inside this (`$` is jQuery)




    We populat...
Making a place to place
                               We have to place
      Create our svg
                             ...
Let’s place some data

            We append a path,
           with our data, using
           a previously defined
      ...
But now we need to know
                               what’s a point
               We add the data
               circle...
But wait, now let’s make this
                              interactive
          We use tipsy/jQuery
             to gene...
Now for looking at it!
                  We can just open the .html file in a web browser or...

                  We need...
Now, the moment of glory




Tuesday, January 29, 13
As help
                  I have a web template repo on bitbucket that you can use, with a
                  special branc...
As a note

                  This is all really new, cool stuff.

                  As such, it requires effort on your pa...
Upcoming SlideShare
Loading in …5
×

of

D3 interactivity Linegraph basic example Slide 1 D3 interactivity Linegraph basic example Slide 2 D3 interactivity Linegraph basic example Slide 3 D3 interactivity Linegraph basic example Slide 4 D3 interactivity Linegraph basic example Slide 5 D3 interactivity Linegraph basic example Slide 6 D3 interactivity Linegraph basic example Slide 7 D3 interactivity Linegraph basic example Slide 8 D3 interactivity Linegraph basic example Slide 9 D3 interactivity Linegraph basic example Slide 10 D3 interactivity Linegraph basic example Slide 11 D3 interactivity Linegraph basic example Slide 12 D3 interactivity Linegraph basic example Slide 13 D3 interactivity Linegraph basic example Slide 14 D3 interactivity Linegraph basic example Slide 15 D3 interactivity Linegraph basic example Slide 16 D3 interactivity Linegraph basic example Slide 17 D3 interactivity Linegraph basic example Slide 18 D3 interactivity Linegraph basic example Slide 19 D3 interactivity Linegraph basic example Slide 20 D3 interactivity Linegraph basic example Slide 21
Upcoming SlideShare
Introduction to Mercurial, or "Why we're switching from SVN no matter what"
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

D3 interactivity Linegraph basic example

Download to read offline

Super basic tutorial about how to create an interactive web graphic with d3.js for those that know how to program/use the command line but not any web technology.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

D3 interactivity Linegraph basic example

  1. 1. INTERACTIVITY It’s alive!!! Tuesday, January 29, 13
  2. 2. Why? Our data is large and multi-faceted---multiple parameters, data types, sources of information, etc. At times it is difficult to explore it fully and build an integrated understanding of the system Even with statistical or numerical analyses it is difficult to translate results to actual physical phenomena or situations in the data It is important to be able to check our assumptions with active exploration of the system Tuesday, January 29, 13
  3. 3. Compare: Module 23 41 18 41 18 18 41 18 42 41 18 41 Tuesday, January 29, 13
  4. 4. Compare: Tuesday, January 29, 13
  5. 5. How? HTML, CSS, Javascript HTML - HyperText Markup Language A webpage, if you will. This is just to hold the meat really. Don’t worry, this isn’t 1999 on MySpace. CSS - Cascading Style Sheets This is for styling our page elements in a sane and modular fashion Javascript - ...just Javascript This is a programming language, no relation to Java (Thank God) Tuesday, January 29, 13
  6. 6. But...How does it work? HTML is, for our purposes, more like just a dumb container. CSS is just to do styling on elements and isn’t needed to start. REAL TALK: Javascript on its own...isn’t great. BUT: There are tons of libraries for javascript that make it great to work with. The rate of libraries is also growing at an astonishing rate (for actual programming use check out node.js) Specifically we will make heavy use of: jQuery (adds lots of methods, functional programming elements) d3.js (this is how we graph) Tuesday, January 29, 13
  7. 7. What can d3 do? http://mbostock.github.com/d3/ex/force.html http://square.github.com/crossfilter/ http://bl.ocks.org/1136236 Pros: Easy to use, Web standard (with WebKit), SVG, Interactive Cons: Examples are the primary reference material. There is an excellent primer by Scott Murray (http://alignedleft.com), but you have to get your hands dirty Tuesday, January 29, 13
  8. 8. Case Study Let’s graph a freaking time series! What do we even input as data to this? JSONs (JavaScript Object Notation), Don’t worry it’s awesome. CSVs (Comma Separated Values) Tuesday, January 29, 13
  9. 9. Our Data It’s basically just a saved dictionary into a file. Python has a ‘JSON’ module that can import/export dictionaries as a json string for saving Tuesday, January 29, 13
  10. 10. How do I do that? Tuesday, January 29, 13
  11. 11. But how do I get it going? Just tell it that it’s HTML These are library imports Importing supported styling Tuesday, January 29, 13
  12. 12. Now....What? Make a div Call our script Tuesday, January 29, 13
  13. 13. Getting our hands dirty Load our data, the graph creation is wrapped inside this (`$` is jQuery) We populate the arrays with our x and y data Define the height and width for our graphic to be used later (this is important) Tuesday, January 29, 13
  14. 14. Making a place to place We have to place Create our svg our svg in a div (our to place our graph div had an id in (uses our width ‘party-viz’) and height from before) Tuesday, January 29, 13
  15. 15. Let’s place some data We append a path, with our data, using a previously defined line function This is our function, it just iterates through the data, returning the x and y transformed positions for a point Tuesday, January 29, 13
  16. 16. But now we need to know what’s a point We add the data circles as a svg container type Now we actually append and give the attributes for the circles Tuesday, January 29, 13
  17. 17. But wait, now let’s make this interactive We use tipsy/jQuery to generate an interactive tooltip Return an appropriately formatted string to display Tuesday, January 29, 13
  18. 18. Now for looking at it! We can just open the .html file in a web browser or... We need a server. WAIT ISN’T THAT HARD?????? We can use a super quick, simple server with python. In the directory with the page and code just do: Tuesday, January 29, 13
  19. 19. Now, the moment of glory Tuesday, January 29, 13
  20. 20. As help I have a web template repo on bitbucket that you can use, with a special branch for this example. Tuesday, January 29, 13
  21. 21. As a note This is all really new, cool stuff. As such, it requires effort on your part to make it work and understand it. Not everything needs to be interactive/web. It takes work to do this, so think first if it is worth your time. I am more than willing to help you, but there is one master of d3.js right now---the guy who wrote it. Tuesday, January 29, 13

Super basic tutorial about how to create an interactive web graphic with d3.js for those that know how to program/use the command line but not any web technology.

Views

Total views

3,512

On Slideshare

0

From embeds

0

Number of embeds

458

Actions

Downloads

11

Shares

0

Comments

0

Likes

0

×