Slides from my talk at Django Boston, Oct 23, 2014 http://www.meetup.com/djangoboston/events/163174582/

1. D3.js meets Django
Visualizing Data in Your Web Application

2. About me:
Name: John Baldwin
Occupation: Software developer
Professional background
TL;DR – Go here:
http://www.linkedin.com/in/baldwinsplace/
Email: jlbaldwin@gmail.com
Twitter: @john_baldwin

3. What is D3.js?
“D3.js is a JavaScript library for manipulating documents
base on data.”
- D3.js home page (http://d3js.org/ )
 Created in 2011
 D3 = “Data-Driven Documents”
 This refers to the W3C Document Object Model
 Visualization is constructing a DOM from Data
 Rich ecosystem, very active community

4. Selection of D3.js Examples
 Epicyclic Gearing
 http://bl.ocks.org/mbostock/1353700
 Parallel Sets – Titanic Survivors
 http://www.jasondavies.com/parallel-sets/
 World Tour
 http://bl.ocks.org/mbostock/4183330
 Front Row to Fashion Week
 http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/
 Collapsible Tree
 http://bl.ocks.org/mbostock/4339083
 Force Directed Graph
 http://bl.ocks.org/mbostock/4062045
 Bright Point examples
 http://www.brightpointinc.com/project-list/

5. D3 Ecosystem at a Glance
 API Reference:
 https://github.com/mbostock/d3/wiki
 Tutorials collection
 https://github.com/mbostock/d3/wiki/Tutorials
 Three recommended starting points
 Code Academy - Interactive website tutorial
 http://www.codecademy.com/courses/web-beginner-en-kcP9b/0/1
 DashingD3js – Extensive flow from basic concepts to more
advanced steps
 Provides a great reference to keep on hand as you develop your first
D3 visualizations
 https://www.dashingd3js.com/
 Free online book: Interactive Data Visualization for the Web
 http://chimera.labs.oreilly.com/books/1230000000345
 Lots of examples on the web
 http://techslides.com/over-2000-d3-js-examples-and-demos/

6. The D3.js “Tech Stack”
D3.js
SVG HTML JavaScript CSS
Data
(JSON,
XML, et
al)

7. The Keys to Understanding
D3 Mechanics
SVG
Selection
Transition
Data binding
Image source: https://www.flickr.com/photos/practicalowl/256628505/

8. SVG=Scalable Vector Graphics
 It is a markup language for describing two-dimensional
graphics
 It supports interaction and animation
 It is a W3C open standard
 http://www.w3.org/Graphics/SVG/
 Supported by major modern web browsers
 http://caniuse.com/#feat=svg
 But the spec is extensive
 http://www.w3.org/TR/SVG11/
 It doesn’t need Flash!

9. What can SVG do?
Render basic shapes
 Rectangle
 Circle
 Ellipse
 Line
 Polyline
 Polygon
Advanced shape functionality
 path, fills, gradients, patterns
Text
Animation
And much, MUCH More!!!
Ref: http://www.w3.org/TR/SVG11/
Image credits: Saturday Night Live, NBC Studios

10. (Basic) Shapes in SVG

11. SVG ‘g’ Element
 Groups together related SVG elements (‘g’)
 Allows you to
 Inherit styles
 Transform as a group
 Translate
 Scale
 Rotate
 Skew
 See
 http://www.w3.org/TR/SVG/struct.html#GElement
 http://www.w3.org/TR/SVG/coords.html

12. So Why D3?
OK, SVG is great! So why do we need D3?
Answer:
Same reason we use jQuery

13. D3 Fundamentals
Selection, Transition, and Data Binding
 Demo with our sample app…

14. Visdjango
Django project to demonstrate
visualizations
Apps
 Intro – Introduces core concepts
D3 – Specific chart examples
NVD3 – Examples using a D3 framework
Project source code
 https://github.com/johnbaldwin/visdjango

15. JSON Data via AJAX
 Set your request url in your app urls.py
url(r’^mychart-data/', views.mychart_data),
 Create your view method in your app views.py
def mychart_data(request):
response_data = {
# Build your data in a dict/list
}
return HttpResponse(json.dumps(response_data),
content_type = 'application/json')
 Show the D3 parts in your JavaScript
d3.json("/app/mychart-data/", type,
function(error, data) {
// code block
}
 It really is that simple
 Unless you are doing cross site XHR requests

16. NVD3
 NVD3 is a JavaScript library to provide reusable charts
 Home page: http://nvd3.org/
 Built on D3.js
 There is a Django package for NVD3
 https://github.com/areski/django-nvd3
 Under active development
 Here are the chart types available now:
 http://nvd3.org/examples/
 Other frameworks (I haven’t tried yet)
 Cubism.js
 Dimple
 Ref: https://en.wikipedia.org/wiki/D3.js#Related_Tools_and_Libraries

17. More D3 topics
 Mike Bostock’s workshop slides
 http://bost.ocks.org/mike/d3/workshop/#0
 Thinking with Joins
 http://bost.ocks.org/mike/join/
 Layouts
 https://github.com/mbostock/d3/wiki/Layouts
 Queues
 https://github.com/mbostock/queue
 Geographic maps
 https://github.com/mbostock/topojson
 Visualizing algorithms
 http://bost.ocks.org/mike/algorithms/

18. Takeaways – D3
 D3
 I’ve only scratched the surface of what is
possible with D3
 D3 is broad and somewhat deep
 Lots of examples, play with them
 Start out small
 Get to know how to use SVG. This will help you
debug
 Remember, D3 stands for Data Driven
Documents
 Learn and use its data binding capability
 D3 doesn’t get in your way
 Data Tip
 If you are working with a lot of data:
 Break your data down into chunks and use queue
to “stream” the data into your page

19. Takeaways - JavaScript
 Link to trusted remote resource
 Such as a CDN
 Note: Referrer link is tracked in the request header
 Allow linking to local assets in development mode
 Code offline

20. Thanks!
Email: jlbaldwin@gmail.com