Skip to main content
100%

D3 in Action Chapter 5 - Example 10

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

This example shows a stacked bar chart representing six movies’ daily ratings over a 140-day period. The chart uses the `d3.layout.stack()` API to compute stacked values for each movie, then renders them as colored rectangles within an SVG. Data is loaded from a CSV file via `d3.csv`, and axes are drawn using `d3.svg.axis()` with linear scales. The visualization uses a categorical color scale (`d3.scale.category10`) to distinguish each movie.

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>

forked from <a href='http://bl.ocks.org/RoxIv/'>RoxIv</a>'s block: <a href='http://bl.ocks.org/RoxIv/bb1316be93836db31c2d2ebb0031d1ea'>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/4d96d22b4a82b5ff50466d20aa893b44'>Ch. 5, Fig. 22 - D3.js in Action</a>

mit Licensed

Similar vizzes