The area chart uses a svg gradient fill to have different colours for the negative and positive values. The line and area charts are clipped by a rect which shrinks with each step in the story.
Also, it was fiddly to get the cumulative bar chart to animate nicely when it moves from negative to positive values - ie need to identify if the previous value was negative and the next is positive, and if so, do a two part transition - firstly, move the X to 0 and shrink the width to 0; and then hold the X at 0 and increase the width.
xxxxxxxxxx
<meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="siu.css">
<link rel="stylesheet" type="text/css" href="siu-manifesto.css">
</head>
<body>
<h1>Area chart with negative values, and highlighting text</h1>
<section>
<div class = "side-text" >
<h2>Heading 2</h2>
<p id = "story-step-0">Sample text</p>
<p id = "story-step-10">Sample text</p>
<p id = "story-step-14">Sample text</p>
<p id = "story-step-16">Sample text</p>
<p id = "story-step-30">Sample text</p>
<p id = "story-step-34">Sample text</p>
<p id = "story-step-39">Sample text</p>
<p id = "story-step-51">Sample text</p>
<p id = "story-step-53">Sample text</p>
<p id = "story-step-alternative-12">Sample text</p>
<p id = "story-step-alternative-17">Sample text</p>
<p id = "story-step-alternative-22">Sample text</p>
<p id = "story-step-alternative-28">Sample text</p>
<p id = "story-step-alternative-53">Sample text</p>
<p id = "story-step-conclusion">Sample text</p>
</div>
<div class = "side-charts">
<br>
<h2 class = "chart-title">Area chart</h2>
<button id="step-button" onclick="changeCharts()" >Next Step</button>
<div class = "chart", id="line-chart"></div>
<p class = "chart-title">Cumulative chart</p>
<div class = "chart", id="bar-chart"></div>
</div>
</section>
<script src="d3.js"></script>
<script src="siu-helper-functions.js"></script>
<script src="example.js"></script>
</body>