Learn how to use the stack parameter on an area chart, and how to add a DC legend.
- [Instructor] We can add another section to our area chart…using stack, so let's do that with tip…because our area chart shows total,…so it's a legitimate, meaningful thing to show the tip…on top of the total.…So the first thing we need to do is…change our cross-filter data…because the HTML structure of our div is absolutely fine.…We can say, total payment plus tip, for good measure there,…and then we could say, var dateGroupTip…equals dateDimension,…so we're using the same dimension that we used for…the original layer of data,…and this is normal in a stack chart,…you'd normally share the dimension…because you share the x-axis, so we say,…dateDimension.group(), or group 0, .reduceSum…and the function then returns d.tip…instead of d.total, and that's because…we have a tip property up here.…
Now we supply the new group into a parameter of .stack,…like so, and we can say, dateGroupTip…and when we do this, in order to distinguish between the two…we make use of an optional second parameter,…so we're going to say this is "total spend"…
- Downloading and setting up DC.js
- Building dashboards
- Making charts: bar, area, pie, bubble, boxplot, and series
- Applying graphical filtering
- Working with dates
- Restyling dashboards
- Using D3 charts in a DC dashboard
- Linking charts together
Skill Level Intermediate
Crossfilter for Data Science Essential Trainingwith Emma Saunders1h 33m Intermediate
D3.js Essential Training for Data Scientistswith Emma Saunders4h 38m Intermediate
Data Visualization Tips and Trickswith Matt Francis2h 14m Intermediate
1. Preparing to Code in DC
2. Individual Charts
3. Making Advanced Charts
4. Building a Dashboard
- 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.