This video discusses combining map with stack to make 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 axisLeft.…And this one uses the y scale.…
- Making a simple bar chart with D3
- Understanding SVG graphics
- Drawing basic shapes
- Adding text
- Using generators and the path element
- Creating a scale and axes
- Importing data into D3
- Creating trees and Voronoi tessellations
- Preparing your data for advanced graphics
- Adding interactivity and transitions
- Choosing the right graphic
- Finding D3.js plugins
Skill Level Intermediate
Data Visualization for Data Analystswith Bill Shander1h 31m Beginner
2. Making a Simple Bar Chart with D3
3. Basic Shapes, Courtesy of SVG
4. Advanced Shapes, with D3 and Path
5. Scales and Axes
6. Importing Data into D3
7. Additional Graphics with D3 Layout
8. Preparing Your Data for Advanced Graphics
10. Picking the Right Graphic
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.