Animating Swarm Charts With Javascript and D3

3 ratings

A master class in using JavaScript with the D3 data visualization library. Learn to bend a force simulation to your will and create fluid and captivating animations that will make your data visualizations stand out.

In this video lesson we'll recreate a financial data visualization that's been featured on the front page of Reddit with over 50,000 upvotes. We'll cover the following in a series of 4 videos (approx. 1 hour and 50 minutes):

D3 Basics

  • Intro to SVG graphics
  • Setting up scales
  • Drawing axes and gridlines

Joining Data and Chart Elements

  • Join an array of stock market data to chart elements
  • Set attributes based on data properties
  • Learn about SVG groups and transforms.

Force Simulations and Animation

  • Learn how to specify dynamic force simulations
  • Animate your chart on every tick of the simulation
  • Iterate through discrete time series data with fluid movements in between

Finishing Touches

  • We'll add a dynamic header and legend
  • I'll share some closing thoughts and guide you towards what to learn next.

To follow this course you should have a general understanding of coding in JavaScript (mainly how functions, variables, and loops work) and some web development basics (know what html, css, and json files are). It would also help to have a little knowledge of what SVG graphics are and what the D3 library can do. This is an intermediate lesson that will advance your knowledge of D3, but will only focus on a subset of key features.

I want this!
Watch link provided after purchase

Set of 4 videos plus code.


(3 ratings)
5 stars
4 stars
3 stars
2 stars
1 star

Animating Swarm Charts With Javascript and D3

3 ratings
I want this!