From the course: D3.js Essential Training

Explaining D3 - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Explaining D3

“

- [Instructor] Do you ever wonder how the most interactive responsive charts on the web are built? In this video, you'll discover what D3JS is, how it works, and why it's such a powerful tool for creating dynamic data-driven visuals. Let's take a moment to talk about what D3 actually is and why it's worth your time. D3 stands for data-driven documents. It's a JavaScript library that lets you bind data to elements on a webpage. These elements are usually SVG shapes, like circles, rectangles, and lines. The data binding tells the browser that one shape is linked to one data item. As the data change, so do the shapes. This keeps your data and visuals in sync through all kinds of changes, filtering, zooming, drill down and updates to the data. You are already familiar with HTML, CSS, and maybe a bit of JavaScript. D3 builds on that foundation, but instead of hard coding visuals, with D3, you let the data drive the structure and appearance. D3 also has a lot of prebuilt layouts, which help generate coordinates for the shapes on the page. It has handlers for importing different data types and prebuilt animations for making your charts slick. But the main benefit is keeping data and elements in step. Even hierarchical data can be matched level by level with different layers of shapes. You've probably seen D3 in action without even realizing it. It underpins Power BI, Plotly, Nivo, Vega, and many more. It's powerful and foundational. That said, it has a learning curve. It's quite different from libraries like ChartJS or Google Charts, which give you ready-made templates. If you want full control over the look, feel, and behavior of your visualizations, especially if you're working on the web, D3 is unmatched, and that's what this course is here to teach. Not just how to copy paste D3 code, but how to think in D3. So let's get started.

Contents