D3 interactivity Linegraph basic example
-
Upload
adam-pah -
Category
Technology
-
view
112 -
download
3
description
Transcript of D3 interactivity Linegraph basic example
![Page 1: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/1.jpg)
INTERACTIVITYIt’s alive!!!
Tuesday, January 29, 13
![Page 2: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/2.jpg)
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
![Page 3: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/3.jpg)
Compare:
41
41
41
18
42
41
18
18 18
41
18
Module 23
Tuesday, January 29, 13
![Page 4: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/4.jpg)
Compare:
Tuesday, January 29, 13
![Page 5: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/5.jpg)
How?HTML, CSS, Javascript
HTML - HyperText Markup LanguageA webpage, if you will. This is just to hold the meat really.Don’t worry, this isn’t 1999 on MySpace.
CSS - Cascading Style SheetsThis is for styling our page elements in a sane and modular fashion
Javascript - ...just JavascriptThis is a programming language, no relation to Java (Thank God)
Tuesday, January 29, 13
![Page 6: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/6.jpg)
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
![Page 7: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/7.jpg)
What can d3 do?
http://mbostock.github.com/d3/ex/force.htmlhttp://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
![Page 8: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/8.jpg)
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
![Page 9: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/9.jpg)
Our DataIt’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
![Page 10: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/10.jpg)
How do I do that?
Tuesday, January 29, 13
![Page 11: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/11.jpg)
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
![Page 12: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/12.jpg)
Now....What?
Make a div
Call our script
Tuesday, January 29, 13
![Page 13: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/13.jpg)
Getting our hands dirtyLoad our data, the graph creation is wrapped inside this (`$` is jQuery)
We populate thearrays 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
![Page 14: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/14.jpg)
Making a place to placeCreate our svg
to place our graphin (uses our width and height from
before)
We have to place our svg in a div (our
div had an id ‘party-viz’)
Tuesday, January 29, 13
![Page 15: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/15.jpg)
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
![Page 16: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/16.jpg)
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
![Page 17: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/17.jpg)
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
![Page 18: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/18.jpg)
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
![Page 19: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/19.jpg)
Now, the moment of glory
Tuesday, January 29, 13
![Page 20: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/20.jpg)
As helpI have a web template repo on bitbucket that you can use, with a special branch for this example.
Tuesday, January 29, 13
![Page 21: D3 interactivity Linegraph basic example](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c68ca64a795962378b4624/html5/thumbnails/21.jpg)
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