Skip to main content
100%

D3 in Action Chapter 5 - Example 10

✓ Published0🌍 Public
RRoxIv
Last edited Jul 29, 2018
Created on Jul 28, 2018

This example demonstrates a stacked bar chart built with D3.js (version 3.5.5), visualizing daily ratings for six movies over 140 days. The visualization uses `d3.layout.stack()` to compute the stacking offsets for each movie’s values, then renders the bars as SVG `<rect>` elements. Axes are generated with `d3.svg.axis()`, including gridlines, while categorical colors are assigned via `d3.scale.category10()`. The chart loads data from an external CSV file (`movies.csv`), which contains integer ratings for each movie per day, and maps those values to vertical bar heights and horizontal positions.

AI-generated description

This is the code for Chapter 5, Figure 22 from D3.js in Action showing how to use d3.layout.stack() to create a stacked bar chart.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/b4184089c979aeae28bb'>Ch. 5, Fig. 22 - D3.js in Action</a>

forked from <a href='http://bl.ocks.org/RoxIv/'>RoxIv</a>'s block: <a href='http://bl.ocks.org/RoxIv/15142dc2b2731a1df92ca0783f6f4c76'>Ch. 5, Fig. 22 - D3.js in Action</a>

mit Licensed

Similar vizzes