From the course: D3.js Essential Training for Data Scientists
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Drawing a stack area chart - D3.js Tutorial
From the course: D3.js Essential Training for Data Scientists
Drawing a stack area chart
- [Instructor] In the last section we manipulated our data with d3.map and d3.stack. Now we're going to make a stack area chart out of our data. First, let's add some axes. Until now we've declared a variable x axis and called it while appending a group. D3 then kindly adds all the elements we need into that group. Well, in d3 version four we don't need to declare the axis generator separately. We can integrate the two lines of code, so let's do that now. chartGroup.append group, and we can give it a class of x axis, and we're going to want to transform it and shift it down by height. So transform, translate, naught height. And let's pop that on a new line, make it a bit easier to read. And then we call d3.axisBottom. And we're using the x scale. And if we check our browser, there we have an x scale. Now we're gonna do the same to add the y axis. chartGroup.append g. And we'll give it a class of y axis. And we don't need to transform, translate this one, so we can just call it d3…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.