Four-Project Series

Interactive Visualization with D3.js you own this product

HTML files and the main HTML elements • basic CSS styles • basic Javascript
skills learned
set up a local environment for D3 development • selection of HTML and SVG elements in the DOM • generate a histogram, a curve, and a density plot • listen to mouse events and build a complex tooltip
Earn a Certificate of Completion with this liveProject series
Anne-Marie Dufour
4 weeks · 7-10 hours per week average · BEGINNER
get all Manning content with a subscription
go to series
includes 4 liveProjects
liveProject $49.99 $69.99 self-paced learning

The D3.js library gives users the power to develop amazing and versatile visualizations, from simple charts to intricate data interfaces. In this series of liveProjects, you’ll tackle the steep learning curve of D3.js by going hands-on to build your own amazing interactive data visualizations. You’ll work with real-world datasets, quickly mastering the building blocks of D3.js that you can easily transfer between tasks. Each liveProject in this series stands alone, or can be completed as part of a comprehensive learning experience.

These projects are designed for learning purposes and are not complete, production-ready applications or solutions.
How to get your FREE
Certificate of Completion
  • Finish all the projects in this liveProject series
  • Take a short online test
  • Answer questions from the liveProject mentor
That's it!

Manning author Anne-Marie Dufour shares what she likes about the Manning liveProject Platform.

here's what's included

Project 1 Digital Infographic

In this liveProject, you’ll use the powerful D3.js data visualization library to build an infographic of the top songs of 2020. You’ll be working with data taken from the MRC Data Year-End Report, and develop three charts that each explore some of the core building blocks of D3.js—selections, appending elements to the DOM, scales and data binding. Finally, you’ll extend your newfound skills to developing a bubble chart from scratch, along with axes and a legend.

Project 2 Data Distribution

In this liveProject, you’ll explore and experiment with the D3.js library’s flexibility as you evolve a simple histogram into an intricate and interactive visualization. You’ll build visualizations to illustrate the gender pay gap in sports, expand them to include individual players, and even add special interactive visual effects.

Project 3 Streamgraph

In this liveProject, you’ll use the D3.js visualization library to create a streamgraph visualization of the ethnicity of the Oscars. This visualization will explore the representation of ethnic minorities at the Academy Awards ceremony throughout its history. Once you’ve constructed your basic streamgraph, you’ll append a composite tooltip to the visualization, play around with transitions, and give consideration to making your graph responsive.

Project 4 Radial Visualization

In this liveProject, you’ll make use of the D3.js library to create a radial visualization of the cohorts of NASA astronauts. Radial visualizations are very popular with users as they evoke calmness and gracefulness, and the eye is naturally drawn to round shapes. This complex project will really test your D3.js skills as you create a visualization that can expertly display diverse information about each astronaut, like the total time spent in space, or background information such as military versus civilian. To complete this stunning visualization, you will need to generate arcs and display labels over a path, use D3 scales to generate a legend, and animate shapes to create a rich interaction flow.

book resources

When you start each of the projects in this series, you'll get full access to the following book for 90 days.

How to get your FREE
Certificate of Completion
  • Finish all the projects in this liveProject series
  • Take a short online test
  • Answer questions from the liveProject mentor
That's it!

choose your plan


only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free product every time you renew
  • choose twelve free products per year
  • exclusive 50% discount on all purchases
  • Interactive Visualization with D3.js project for free

project author

Anne-Marie Dufour
Anne-Marie Dufour has an extended background in mechanical engineering, computational fluid dynamics, and frontend development. This unique skill set has helped her develop a solid understanding of how to use data visualization to apprehend complex phenomena and realities and translate these into modern web applications.


This liveProject is for newcomers to D3.js interested in learning the library, or for users who know the basics and are interested in advancing their skills. To complete all of this series, you will need to be familiar with the following:

  • HTML files and the main HTML elements.
  • Basic CSS styles
  • Basic Javascript
  • Structuring frontend development projects
  • Javascript development (ES6): data structures, arrays and objects manipulation, functions, loops, conditions, etc.

you will learn

In this liveProject, you’ll learn core D3.js skills that will allow you to start creating D3 projects on your own and advance to produce more complex data visualizations.

  • Set up a local environment for D3 development
  • Select and Append HTML and SVG elements to the DOM
  • Import external datasets
  • Bind data to DOM elements
  • Use Scales to calculate the size and position of elements
  • Generate and position Axes
  • Create legends for your data visualizations
  • Bin data to visualize a distribution
  • Use D3 shapes generators (line, curve, area, stack, arc)
  • Use D3’s force layout to position elements within a visualization
  • Combine D3 modules to create unique and rich visualizations
  • Break SVG text upon multiple lines and display labels along a curved path
  • Add special effects with SVG filters
  • Listen to user events: Generate a tooltip and Filter your visualization
  • Transition smoothly between states and chain transitions to animate elements of a visualization
  • Make a responsive visualization
  • Position basic SVG shapes on a radial layout using trigonometry
  • Append external images inside a D3 project
  • Export a D3 visualization from your browser


You choose the schedule and decide how much time to invest as you build your project.
Project roadmap
Each project is divided into several achievable steps.
Get Help
While within the liveProject platform, get help from other participants and our expert mentors.
Compare with others
For each step, compare your deliverable to the solutions by the author and other participants.
Certificate of Completion
Earn a certificate of completion, including a badge to display on your resume, LinkedIn page, and other social media, after you complete this series.
book resources
Get full access to select books for 90 days. Permanent access to excerpts from Manning products are also included, as well as references to other resources.