Interactive Stacked Chart

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>US Higher Education: Research Expenditure</title>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">
    body {
        margin: 50px;
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
    }
    
    h1 {
        font-size: 24px;
        margin: 0;
    }
    
    p {
        font-size: 14px;
        margin: 10px 0 0 0;
    }
    
    svg {
        background-color: white;
    }
    
    .area-all:hover {
        fill: maroon;
    }
    
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    
    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
    </style>
</head>

<body>
    <h1>Research Expenditure in US Higher Education by Source of Fund</h1>
    <p>The chart below shows total research expenditure by US universities since 2000, broken down by source of fund.</p>
    <p>Source: <a href="https://www.nsf.gov/statistics/herd/">Higher Education Research and Development (HERD) Survey</a></p>
    <br>
    <p>Double-click to see change in a specific source of fund.</p>
    <p>Million USD</p>
    <div id="source">
        <h4></h4> </div>
    <script type="text/javascript">
    //Set up stack method
    var stack = d3.layout.stack()
        .values(function(d) {
            return d.dollars;
        })
        .order("reverse");

//Width, height, padding
    var w = 800;
    var h = 400;
    var padding = [20, 10, 40, 100]; //Top, right, bottom, left

//Set up date format function (years)
    var dateFormat = d3.time.format("%Y");

//Set up scales
    var xScale = d3.time.scale()
        .range([padding[3], w - padding[1] - padding[3]]);

var yScale = d3.scale.linear()
        .range([padding[0], h - padding[2]]);

//Configure axis generators
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(15)
        .tickFormat(function(d) {
            return dateFormat(d);
        });

var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5);

//Configure area generator
    var area = d3.svg.area()
        .x(function(d) {
            return xScale(dateFormat.parse(d.x));
        })
        .y0(function(d) {
            return yScale(d.y0); //Updated
        })
        .y1(function(d) {
            return yScale(d.y0 + d.y); //Updated
        });

//Easy colors accessible via a 10-step ordinal scale
    var color = d3.scale.category20b();

//Create the empty SVG image
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

//Load data
    d3.csv("research-fund-source.csv", function(data) {

//New array with all the years, for referencing later
        var years = ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"];

//Create a new, empty array to hold our restructured dataset
        var dataset = [];

//Loop once for each row in data
        for (var i = 0; i < data.length; i++) {

dataset[i] = {
                source: data[i].Source,
                dollars: []
            };

//Loop through all the years
            for (var j = 0; j < years.length; j++) {

//Default value, used in case no value is present
                var amount = null;

// If value is not empty
                if (data[i][years[j]]) {
                    amount = +data[i][years[j]];
                }

dataset[i].dollars.push({
                    x: years[j],
                    y: amount
                });
            }
        }

stack(dataset);

xScale.domain([
            d3.min(years, function(d) {
                return dateFormat.parse(d);
            }),
            d3.max(years, function(d) {
                return dateFormat.parse(d);
            })
        ]);

var totals = [];

for (i = 0; i < years.length; i++) {
            totals[i] = 0;
            for (j = 0; j < dataset.length; j++) {
                totals[i] += dataset[j].dollars[i].y;
            }
        }

yScale.domain([d3.max(totals), 0]);

// flag to check if all stacked area is currently shown
        var allShown = 1;

d3.select("#source h4")
            .text("All sources")

function showArea(d) {

svg.selectAll(".area-all")
                .attr("opacity", 0);

svg.selectAll(".area")
                .classed("area", false);

d3.select("#source h4")
                .text(d.source)

svg.selectAll(".area")
                .data([d])
                .enter()
                .append("path")
                .attr("class", "area")
                .attr("d", function(d) {
                    for (var i = d.dollars.length - 1; i >= 0; i--) {
                        d.dollars[i].y0 = 0;
                    };
                    return area(d.dollars);
                })
                .attr("stroke", "none")
                .attr("opacity", 1)
                .attr("fill", "maroon")
                .on("dblclick", showAreaAll);

}

function showAreaAll() {
            allShown = 1;
            d3.select("#source h4")
                .text("All sources")

svg.selectAll(".area")
                .transition()
                .attr("opacity", 0)

svg.selectAll(".area")
                .remove()

svg.selectAll(".area-all")
                .transition()
                .attr("opacity", 1)
        }

paths.append("title")
            .text(function(d) {
                return d.source;
            });

//Create axes
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (h - padding[2]) + ")")
            .call(xAxis);

svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + padding[3] + ",0)")
            .call(yAxis);
    });
    </script>
</body>

</html>

https://d3js.org/d3.v3.min.js