D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
We just published a full course on the freeCodeCamp.org YouTube channel that teaches how to implement various data visualization techniques with D3.js.
Curran Kelleher teaches this course. He is one of the top D3 instructors in the world. He has a Ph.D. in Computer Science, and has taught at universities including MIT. This is the third time Curran has taught this course, and it gets better every time.
Curran originally taught this course in a series of live streams. Now, for the first time, you can watch the entire course in a single video.
In this course, the code is organized in such a way that the rendering logic (e.g. DOM manipulation) is decoupled from the data transformation logic (e.g. transform rows into objects that represent graphical marks). This approach makes it straightforward to adapt the core of the visualization technique to work with various frameworks like React, Vue, Svelte, and others.
Here are the sections covered in this course:
- SVG Fundamentals
- Pseudo Visualizations
- Sol LeWitt in Vanilla JS
- Sol LeWitt in D3
- D3 Selections
- JavaScript Modules & Build Tools
- Productizing a Codebase
- Scatter Plot
- Reusable Charts
- Dynamic Charts
- Charts with Menus
- Quantitative and Categorical
- Closing the Series
Watch the full course below or on the freeCodeCamp.org YouTube channel (20-hour watch).