x

Confirm Download

Simultaneous file downloading works best in FireFox, Chrome, and Safari browsers. Please keep this window open until all downloads are complete. Some customers prefer using file download managers for Chrome or Firefox to better manage large and multiple file downloads.

Cancel Download

Intermediate D3.js

      • Welcome to the Course  (Free)

        We kick off the course by introducing what we'll cover, what you should already know before getting started, and how to get the most out of this course.
      • 00:02:57

      • Setting Up  (Free)

        We walk through downloading the code examples, and get you set up with a code editor and browser, as well as (optionally) a local web server.
      • 00:08:40

      • Bar Chart Recap  (Free)

        To refresh your memory, we briefly summarize the basics of D3 by stepping through how to simple bar chart.
      • 00:09:50

      • Highlights & Transitions

        Starting with that generic bar chart, we apply CSS to refine the visual styling, and apply loading transitions for a more professional, polished feel.
      • 00:19:02

      • Adding Interactivity: Highlighting

        We make our chart interactive, highlighting elements on mouseover, and we discuss when you might want to do this using CSS versus JavaScript.
      • 00:09:11

      • Adding Interactivity: Tooltips

        By adding tooltips, we make our chart more explorable. We explore three different ways to achieve tooltips - from dead-simple to complex and customizable.
      • 00:22:10

      • Adding Interactivity: Sorting

        Finally, we enable different views into the data by enabling users to sort the bars by different criteria. We earn bonus points by getting a bit fancy with super-smooth transitions.
      • 00:06:07

      • Linked Charts

        Sometimes you need two different views of the same data, side-by-side. We walk through a demonstration of how to accomplish linked charts, in which interactivity triggers highlighting of related elements in both charts.
      • 00:15:42

      • Page Integration

        Because your visualization won't exist in a vacuum, it needs to be integrated with the rest of the HTML page! We discuss several considerations here, and address approaches for creating and controlling multiple charts on the same page.
      • 00:10:09

      • Introduction to "Data Layouts"

        D3's layouts are powerful tools for parsing your data into just the right format. We introduce the concept of a data layout, and explore some examples.
      • 00:01:57

      • Pie Layout

        The pie layout is used to calculate angles and proportions relative to a larger whole. We look at how this layout can be used to generate pie and ring charts.
      • 00:09:26

      • Stack Layout

        The stack layout is used to calculate baselines for each value in a sequence, from which we can create stacked bar and area charts.
      • 00:21:32

      • Force Layout

        The force layout is used to connect nodes with edges, and then let physics sort out the positioning of elements.
      • 00:07:41

      • Introduction to Maps

        Geographic maps are complex visualizations of data. We introduce D3's powerful approach to maps.
      • 00:06:35

      • Maps: Data

        Starting from nothing, we must first acquire the raw geodata data needed for our maps. We walk though how to get shapefiles, and then simplify and convert them to GeoJSON. We also look at a couple alternative methods.
      • 00:13:27

      • Maps: Rendering

        Loading the GeoJSON data into the browser with D3, we choose and configure a projection for our map, and then let D3 do the hard work of rendering that geodata as SVG paths.
      • 00:12:07

      • Placing Data on Maps

        With our map shapes in place, we can now link data to the map, such as to create a choropleth map, in which each shape is colored in relationship to a different data value.
      • 00:09:02

      • Adding Points to the Map

        Sometimes you need another layer on top of your base map. We take some new data and represent it as points on top of the geographic map.
      • 00:08:57

      • Adding Interactivity

        Finally, we make our map interactive by adding the ability to zoom and pan. We cover how to create view "presets" and even add map-based tooltips!
      • 00:21:28

      • Conclusion

        Wrapping up, we offer resources for further exploration and learning, plus a couple more projects for lasting inspiration.
      • 00:02:07

Intermediate D3.js

  • Publisher: O'Reilly Media
  • Released: August 2015
  • Run time: 3 hours 38 minutes

Bolster your skills for creating beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. Ideal for web designers and developers with some D3 experience, this video course shows you how to work with charts, data layouts, and maps through several code examples. It’s the perfect follow-up to Scott Murray’s entry-level video, An Introduction to d3.js: From Scattered to Scatterplot.

  • Energize your charts with interactive and linked elements, and integrate them into a full web page
  • Work with pie layouts for pie and ring charts, and stack layouts for stacked bar, single area, and stacked area charts
  • Delve into simple and complex examples of force layouts
  • Render maps by using d3.geo with paths and projections
  • Create maps with interactivity (zoom, pan, and click) and data points
  • Scott Murray, an Assistant Professor of Design at the University of San Francisco, writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. A contributor to the Processing programming language, Scott is the author of Interactive Data Visualization for the Web, Second Edition.