Slides and Code Examples

This tutorial covers fundamental D3.js concepts from the ground up, and introduces basic visualizations.

• technologies leveraged by D3
  • HTML
  • SVG
  • CSS
• graphical elements
  • rectangles
  • circles
  • lines
• fundamental D3 concepts
  • selections
  • scales
  • axes
• visualizations
  • bar chart
  • scatter plot
  • line chart

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.

By Curran Kelleher April 2015