{ "metadata": { "name": "" }, "nbformat": 3, "nbformat_minor": 0, "worksheets": [ { "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Data Visualization With D3\n", "\n", "This lab is adapted from the fantastic [D3 Tutorial](http://alignedleft.com/tutorials/d3/) by Scott Murray. We\u2019ll work through a quick version of his tutorial, and then build a simple interactive visualization dashboard for a sample dataset. If you're interested in a more thorough introduction to D3, take a look at his book [Interactive Data Visualization for the Web](http://chimera.labs.oreilly.com/books/1230000000345/index.html), which is available for free online. Additionally, if you're thinking of working with D3 for your project, have a look at [this fantastic gallery](https://github.com/mbostock/d3/wiki/Gallery) for some really good starting points!\n", "\n", "We're going to use this lab to learn and practice D3 fundamentals, to make sure the concepts are solidified to make fancier visualizations.\n", "\n", "Don't forget to [fill out the response form](http://goo.gl/awwkDP)!\n", "\n", "## Basics\n", "\n", "* **HTML** - By now, hopefully you\u2019ve heard about HTML. HTML, invented by lazy physicists, is the language of the web, and we\u2019ll use it for laying out and displaying documents - in this case, our visualizations.\n", "* **CSS** - In modern webpages, HTML is used for layout of elements, while CSS is used to *style* the visual presentation of HTML, doing things like setting fonts and line widths, etc. We'll make heavy use of CSS to style our visualizations.\n", "* **DOM** - A DOM is an object model used to represent HTML documents as well as documents in other markup formats. A DOM can be thought of as a tree of nodes, where each node represents an element in the document, with the tree rooted at as the document. A visualization of the DOM for a simple table looks like this: \n", " \n", " \n", "\n", "* **Javascript** - A client side scripting language embedded in most web browsers. Has really nice integration with the current page's DOM and can manipulate it.\n", "* **SVG** - Scalable Vector Graphics format for describing vector graphics in XML. Very low level - allows for description of basic shapes. A green rectangle with a black border in SVG looks like this:\n", "\n", " \n", " \n", " Which, rendered by your web browser, looks like this:\n", " \n", " \n", "\n", " Since it\u2019s XML - we can load it as a DOM! And we can manipulate it with Javascript!\n", "\n", "* **D3** - A javascript library to generate visualizations. Works on things other than SVG, but SVG enables us to do things we can\u2019t with raster images - including *interactivity*. \n", "\n", "The key idea behind D3 is that we can programmatically manipulate SVG elements in a webpage to create great visualizations, and with the help of a little javascript, we can make them *interactive*.\n", "\n", "## Setup\n", "\n", "Since an iPython notebook is just a webpage, we can actually modify elements inside it while we're running. Let's take a look at what we mean - create a new html element in the middle of this webpage by running the following snippet." ] }, { "cell_type": "code", "collapsed": false, "input": [ "%%html\n", "