screencasts
Introduction to D3
- YouTube Video Presentation
- Slides and Code Examples (use left and right arrow keys to navigate examples)
This tutorial covers fundamental D3.js concepts from the ground up, and introduces basic visualizations.
- Technologies leveraged by D3: HTML, SVG, CSS, JavaScript
- SVG graphical elements: rect, circle, line, path
- Fundamental D3 concepts: CSV data, selections, scales, axes
- Visualizations: bar chart, scatter plot, line chart
More advanced tutorials that build off this one:
- Splitting Charts (Stacked & Grouped bar charts)
- Introduction to Chiasm (encapsulating reusable D3 patterns and charts)
Navigating the Video
The video is very long. Here’s an index of checkpoints where the focus shifts. You can click these times to go to specific points in the YouTube video.
- 0:00 - 7:08 Background information
- 7:08 - 25:20 Code examples covering basic HTML, SVG, and CSS
- 25:20 - 32:54 JavaScript overview, including parsing strings
- 32:54 - 45:57 Basic D3 (parsing CSV data, simple DOM manipulation, scales)
- 45:57 - 1:02:00 D3 selections and the Enter, Update, Exit pipeline
- 1:02:00 - 1:13:45 Building up a colored bubble chart with the Iris data set
- 1:13:45 - 1:22:30 Visualizing Population vs. GDP using log and sqrt scales
- 1:22:30 - 1:25:05 Visualizing cities (see also World City Explorer)
- 1:25:05 - 1:27:58 Building a line chart of temperature
- 1:27:58 - 1:32:10 Building a bar chart of city populations
- 1:32:10 - end Adding axes and text labels to visualizations
The video for this tutorial was recorded at a free event held in San Francisco on April 30, 2015. Many thanks to @enjalot and the Bay Area D3 Meetup Group for helping organize the event. Also big thanks to Galvanize for donating the great space for the evening.
Correction from screencast: Mike Bostock is no longer at the New York Times, see this twitterstorm https://twitter.com/mbostock/status/595252571658260481
The music interludes in the video come from my soundcloud posts.
List of Examples
Check out the Example Viewer. Use left and right arrow keys to navigate.
-
Example 1 - (run it! index.html) - Hello HTML -
Example 2 - (run it! index.html) - Hello SVG -
Example 3 - (run it! index.html) - Default SVG size -
Example 4 - (run it! index.html) - Specifying SVG dimensions -
Example 5 - (run it! index.html) - Adding (x, y) coordinates -
Example 6 - (run it! index.html) - Adding color -
Example 7 - (run it! index.html) - rgb() color syntax -
Example 8 - (run it! index.html) - Transparency with rgba() -
Example 9 - (run it! index.html) - Hex color codes -
Example 10 - (run it! index.html) - Drawing outlines with stroke -
Example 11 - (run it! index.html) - Controlling stroke width -
Example 12 - (run it! index.html) - Using fill=none -
Example 13 - (run it! index.html) - Drawing a circle -
Example 14 - (run it! index.html) - cx and cy -
Example 15 - (run it! index.html) - stroke and width -
Example 16 - (run it! index.html) - drawing a line -
Example 17 - (run it! index.html) - drawing several lines -
Example 18 - (run it! index.html) - using SVG paths -
Example 19 - (run it! index.html) - drawing several lines with a path -
Example 20 - (run it! index.html) - filling a path -
Example 21 - (run it! index.html) - closing a path -
Example 22 - (run it! index.html) - pseudo scatterplot -
Example 23 - (run it! index.html) - the g element -
Example 24 - (run it! index.html) - pseudo bar chart -
Example 25 - (run it! index.html) - pseudo line chart -
Example 26 - (run it! index.html) - SVG Text -
Example 27 - (run it! index.html) - Styling SVG Text with CSS -
Example 28 - (run it! index.html) - CSS class selector syntax -
Example 29 - (run it! index.html) - multiple SVG text elements -
Example 30 - (run it! index.html) - font fill and stroke -
Example 31 - (run it! index.html) - Using Google Fonts -
Example 32 - (run it! index.html) - Applying CSS to circles -
Example 33 - (run it! index.html) - JavaScript Debugging -
Example 34 - (run it! index.html) - JavaScript Numbers -
Example 35 - (run it! index.html) - JavaScript Strings -
Example 36 - (run it! index.html) - Concatenation -
Example 37 - (run it! index.html) - Concatenation of number strings -
Example 38 - (run it! index.html) - Parsing strings with parseFloat -
Example 39 - (run it! index.html) - Parsing strings with + -
Example 40 - (run it! index.html) - JavaScript Arrays -
Example 41 - (run it! index.html) - JavaScript Objects -
Example 42 - (run it! index.html) - An array of objects -
Example 43 - (run it! index.html) - JavaScript functions -
Example 44 - (run it! index.html) - Functions in variables -
Example 45 - (run it! index.html) - Functional forEach -
Example 46 - (run it! index.html) - Loading CSV data -
Example 47 - (run it! index.html) - Concatenating unparsed strings -
Example 48 - (run it! index.html) - Parsing CSV data -
Example 49 - (run it! index.html) - Parsing CSV data -
Example 50 - (run it! index.html) - D3 linear scale -
Example 51 - (run it! index.html) - D3 method chaining -
Example 52 - (run it! index.html) - D3 getter setter functions -
Example 53 - (run it! index.html) - D3 ordinal scale -
Example 54 - (run it! index.html) - rangePoints -
Example 55 - (run it! index.html) - rangeRoundPoints -
Example 56 - (run it! index.html) - constructing DOM elements with D3 -
Example 57 - (run it! index.html) - D3 method chaining -
Example 58 - (run it! index.html) - The complete D3 pipeline -
Example 59 - (run it! index.html) - Passing the scale as a function -
Example 60 - (run it! index.html) - Splitting data binding and enter -
Example 61 - (run it! index.html) - Enter handles added data only -
Example 62 - (run it! index.html) - Enter does not update data -
Example 63 - (run it! index.html) - The D3 update phase -
Example 64 - (run it! index.html) - Using enter for static properties -
Example 65 - (run it! index.html) - The need for exit -
Example 66 - (run it! index.html) - Exit -
Example 67 - (run it! index.html) - Using setTimeout -
Example 68 - (run it! index.html) - Rendering an array of objects -
Example 69 - (run it! index.html) - Rendering a parsed CSV file -
Example 70 - (run it! index.html) - Functional simplification -
Example 71 - (run it! index.html) - Introducing the Iris data set -
Example 72 - (run it! index.html) - using extent -
Example 73 - (run it! index.html) - basic scatter plot -
Example 74 - (run it! index.html) - inverting the Y range -
Example 75 - (run it! index.html) - isolating configurable variables -
Example 76 - (run it! index.html) - using variables for X and Y columns -
Example 77 - (run it! index.html) - Adding a radius column -
Example 78 - (run it! index.html) - Using CSS to color circles -
Example 79 - (run it! index.html) - Drawing transparent rings -
Example 80 - (run it! index.html) - Adding a color column -
Example 81 - (run it! index.html) - Using fill, tweaking parameters -
Example 82 - (run it! index.html) - Population vs. GDP -
Example 83 - (run it! index.html) - logarithmic scales -
Example 84 - (run it! index.html) - population as linear size -
Example 85 - (run it! index.html) - population as logarithmic size -
Example 86 - (run it! index.html) - population as sqrt size -
Example 87 - (run it! index.html) - population true to size -
Example 88 - (run it! index.html) - sizing the inner visualization -
Example 89 - (run it! index.html) - translating the inner visualization -
Example 90 - (run it! index.html) - sizing taking translation into account -
Example 91 - (run it! index.html) - using variables to define the margin -
Example 92 - (run it! index.html) - using a margin object -
Example 93 - (run it! index.html) - specifying number of people per pixel -
Example 94 - (run it! index.html) - visualizing cities -
Example 95 - (run it! index.html) - tweaking the visualization -
Example 96 - (run it! index.html) - showing density with transparency -
Example 97 - (run it! index.html) - temperature in San Francisco -
Example 98 - (run it! index.html) - using d3.svg.line -
Example 99 - (run it! index.html) - drawing a proper line -
Example 100 - (run it! index.html) - basic bar chart -
Example 101 - (run it! index.html) - bar padding -
Example 102 - (run it! index.html) - adding axes -
Example 103 - (run it! index.html) - customizing axes -
Example 104 - (run it! index.html) - horizontal bars -
Example 105 - (run it! index.html) - axis labels -
Example 106 - (run it! index.html) - axes on a scatter plot -
Example 107 - (run it! index.html) - axes on a line chart
Feel free to use and modify this presentation framework for your own presentations! MIT License.
Also, feel free to present these code examples to your own audiences.
By Curran Kelleher April 2015