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

Drawing a stack area chart - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

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…

Contents