d3.js - kathy zhou (infoscout intern)

Introduction to D3.jsKathy Zhou - 2014 InfoScouttern

InfoScout Dev Talks

San Francisco, July 10, 2014

© 2014 ScoutIt, Inc.

Kathy Zhou, 2014 InfoScouttern

What is D3.js?

D3 stands for Data Driven Documents- client-side Javascript charting library- for data visualization in web applications



Other Javascript Charting Libraries

- Highcharts.js- Chart.js- CanvasJS

- Nice and proper :)- Appropriate for most occasions- Easy to learn

- Limited interactivity- Hard to modify/build upon

Nicki Minaj



How D3.js is different

- Crazy!!- But highly practical

- Detailed- Interactive- Engaging

still Nicki Minaj



What can I make with D3.js? Examples:

← Sunburst DiagramsGood for funnel data

Force-directed graphs → Network data

← Chord diagramAffinities, group associations



What can I make with D3.js?

Pretty much anything!



How does D3 work?

- one 8,000-line Javascript file uncompressed!- Built on top of existing web technologies

image source: jolicharts.com



How does D3 work?

<svg> tags are tags in HTML5 (the latest version of HTML): elements on the page made up of circles, rectangles, textboxes, etc.

^ basic shapes and text is what D3 boils down to

image source: googlecode.blogspot.com



What I’ve done with D3 so far

Cooccurrences diagram- highly developed chart to show brand affinities

- used for clients Unilever and Coty (I made us money :D)- the chart rearranges itself alphabetically and by affinity- hover effects: shows percentages, all statistics for one brand




Category seasonality- heatmap to show most popular days of the week in purchasing

- displays product popularity by day of week, day of month, day of year




Trip Circuits - what percent of consumers buy a product in what order?- like a pie chart, but more robust to include funnel dataex. 0.6% buys Huggies and then Pampers in one time period



Make-your-own

~50 lines of javascript~25 lines of html + css



Make-your-own

link to html file: http://pastebin.com/R4VHS9BM

link to json file: http://pastebin.com/18SE2EpY

your source directory should look like this:



Make-your-own

type this command in the folder of your project:

python -m SimpleHTTPServer

you should see this message in your terminal



Make-your-own

go to http://localhost:8000/to see your D3.js app!



Make-your-own

Adding more ‘people’- add a

{"name":"<name>","group":<group_no>}

to the “nodes” list in force.json

Adding more links- the numbers in “source” and “target” correspond to the indices of the people in the “nodes” list- the “value” corresponds to the stroke color



Make-your-own

Changing node affinity:- line 33 in index.html

Changing edge length- line 34 in index.html

Changing node size:- line 61 in index.html


1. Interesting front-end challenge2. Can create more interactive and visually appealing data analytics tools

- make revenue :D3. Helps solve interesting problems in data science

- graph theory- associations- geographical, etc.


Summary: Why should I used D3?



Where do I go from here?

If you’re inexperienced with web, look into using Highcharts or charts.js first

http://www.highcharts.com/

For building on existing visualizationshttps://github.com/mbostock/d3/wiki/Gallery

More on how it workshttp://alignedleft.com/tutorials/d3/

http://www.highcharts.com/

https://github.com/mbostock/d3/wiki/Gallery

http://alignedleft.com/tutorials/d3/


Any questions?


Q & A


Thank you!!


Q & A

Go forth and D3!!

@kaffkaff^ self-promotion

Pusheen the cat

d3.js - kathy zhou (infoscout intern)

Software