jerrysong · July 26, 2017 08:09
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <!-- customized js and css -->
    <script src="stock.js"></script>
    <script src="utility.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Demo</title>
 </head>

 <body>
 </body>
diff --git a/main.css b/main.css
 .chart {
    background: #fff;
 }

 .axis {
    stroke-width: 0;
    fill: transparent;
    font-size: large;
    font-weight: bold;
 }

 .tooltip {
    position: absolute;
    text-align: left;
    font-family: sans-serif;
    font-size: 12px;
    width: 400px;
    background-color: white;
    pointer-events: none;
 }

 .tooltip p{
    margin: 3px;
 }

 .tooltip.hidden {
    display: none;
 }

 .tooltip .first-row {
    font-size: large;
    font-weight: bold;
 }
diff --git a/main.js b/main.js
 "use strict";

 $(function() {
    var stockDataPath = "stock_data.csv";
    var monthlyDataPath = "monthly_data.csv";

    var stockVis = new StockVis();
    stockVis.run(stockDataPath, monthlyDataPath);
 });
diff --git a/monthly_data.csv b/monthly_data.csv
diff --git a/stock.js b/stock.js
 "use strict";

 var StockVis = function() {
    /** Define global constants. */
    const SVG_WIDTH = 960;
    const SVG_HEIGHT = 850;
    const MARGIN = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    };
    const ENTIRE_CHART_WIDTH = SVG_WIDTH - MARGIN.left - MARGIN.right;
    const ENTIRE_CHART_HEIGHT = SVG_HEIGHT - MARGIN.top - MARGIN.bottom;
    const STOCK_CHART_WIDTH = ENTIRE_CHART_WIDTH;
    const STOCK_CHART_HEIGHT = 450;
    const BALANCE_CHART_WIDTH = ENTIRE_CHART_WIDTH;
    const BALANCE_CHART_HEIGHT = 200;
    const BALANCE_SHEET_COLOR = "#aecc00";
    const BORDER_STROKE_COLOR = "black";
    const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May",
        "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];

    /** Define global variables. */
    var self = this;
    var parseDate = d3.timeParse("%m/%d/%y");

    /** Define class member fields. */
    self.stockData;
    self.dataLength;
    self.balanceSheetData;
    self.initialStockVolume;
    self.sectors;
    self.baselineSector;
    self.stockLayers;
    self.balanceLayer;
    self.stockStreamArea;
    self.balanceStreamArea;
    self.balanceBars;
    self.stockColorScale;
    self.activeSectors = new Set();
    self.isMouseActive = true;
    self.chart = d3.select("body")
        .append("div")
        .attr("class", "chart")
        .append("svg")
        .attr("width", SVG_WIDTH)
        .attr("height", SVG_HEIGHT)
        .append("g")
        .attr("transform", "translate(" + MARGIN.left + "," + MARGIN.top + ")");
    self.tooltip = d3.select(".chart")
        .append("div")
        .attr("class", "tooltip hidden")
        .style("top", MARGIN.top + "px")
        .style("left", ENTIRE_CHART_WIDTH * 0.7 + "px");
    self.tooltip.append("p")
        .attr("class", "first-row");
    self.tooltip.append("p")
        .attr("class", "second-row");
    self.tooltip.append("p")
        .attr("class", "third-row");
    self.tooltip.append("p")
        .attr("class", "fourth-row");
    self.tooltip.append("p")
        .attr("class", "fifth-row");

    /** The public function to be called in the main js. */
    self.run = function(stockDataPath, monthlyDataPath) {
        buildOnStockData(stockDataPath);
        buildOnBalanceData(monthlyDataPath);
        buildOnInterestDate(monthlyDataPath);
    };

    function buildOnStockData(stockDataPath) {
        d3.csv(stockDataPath,
            function(error, rawData) {
                if (error) throw error;

                self.sectors = rawData.columns.slice(1);
                for (var i in self.sectors) {
                    self.activeSectors.add(self.sectors[i]);
                }
                self.stockColorScale = getStockColorScale(getActiveSectors());
                self.baselineSector = self.sectors[0];
                self.stockData = parseStockData(rawData, self.sectors);
                self.dataLength = self.stockData.length;
                self.initialStockVolume = getValueSum(self.stockData[0]);
                var stack = d3.stack()
                    .keys(self.sectors);
                var stackStockData = stack(self.stockData);
                var stockXScale = getStockXScale(self.stockData, STOCK_CHART_WIDTH);
                var stockYScale = getStockYScale(stackStockData, STOCK_CHART_HEIGHT);
                var areaMaker = getAreaMaker(stockXScale, stockYScale);

                generateStockStreamChart(stackStockData, areaMaker);
                generateTimeAxis(stockXScale);

                var legendObj = {
                    title: "Stock Sectors",
                    data: self.sectors.slice().reverse(),
                    colors: self.stockColorScale,
                    titleX: 10,
                    titleY: 10,
                    rectX: 10,
                    rectY: 20,
                    textX: 40,
                    textY: 30
                };
                var legend = generateLegends(legendObj);
                attachFilters(legend);
            });
    };

    function buildOnBalanceData(balanceDataPath) {
        d3.csv(balanceDataPath,
            function(error, rawData) {
                if (error) throw error;

                self.balanceSheetData = parseBalanceSheetData(rawData);
                var padding = 50;
                var balanceYScale = d3.scaleLinear()
                    .rangeRound([STOCK_CHART_HEIGHT + BALANCE_CHART_HEIGHT, STOCK_CHART_HEIGHT + padding])
                    .domain(d3.extent(self.balanceSheetData, function(d) {
                        return d.value;
                    }));

                generateBalanceStreamChart(balanceYScale);
                generateBalanceBarChart(balanceYScale);

                var legendObj = {
                    title: "Federal Reserve",
                    data: ["Balance Sheet Volume"],
                    colors: BALANCE_SHEET_COLOR,
                    titleX: 10,
                    titleY: STOCK_CHART_HEIGHT + 45,
                    rectX: 10,
                    rectY: STOCK_CHART_HEIGHT + 55,
                    textX: 40,
                    textY: STOCK_CHART_HEIGHT + 65
                };
                generateLegends(legendObj);
            });
    };

    function buildOnInterestDate(interestDataPath) {
        d3.csv(interestDataPath,
            function(error, rawData) {
                if (error) throw error;

                var output = parseInterestData(rawData);
            });
    };

    // This function parse the raw data.
    function parseStockData(input, keys) {
        var output = [];
        var start = 0;
        for (var i = 1; i < input.length; i++) {
            var currMonth = parseDate(input[i].Date).getMonth(),
                priorMonth = parseDate(input[i - 1].Date).getMonth();

            if (currMonth != priorMonth) {
                var num = i - start;
                var obj = {}
                keys.forEach(function(key) {
                    obj[key] = input.slice(start, i).reduce(function(sum, item) {
                        return sum + item[key] / num;
                    }, 0);
                });
                obj.date = parseDate(input[i - 1].Date);
                obj.date = new Date(obj.date.getFullYear(), obj.date.getMonth() + 1, 0);
                output.push(obj);
                start = i;
            }
        }

        var num = input.length - start;
        var obj = {}
        keys.forEach(function(key) {
            obj[key] = input.slice(start, input.length).reduce(function(sum, item) {
                return sum + item[key] / num;
            }, 0);
        });
        obj.date = parseDate(input[input.length - 1].Date);
        obj.date = new Date(obj.date.getFullYear(), obj.date.getMonth() + 1, 0);
        output.push(obj);

        return output;
    };

    function parseBalanceSheetData(input) {
        var output = [];
        for (var i = 0; i < input.length; i++) {
            //if
            var obj = {};
            obj.date = parseDate(input[i].date);
            obj.value = +input[i].balance_sheet;
            output.push(obj);
        }
        return output;
    };

    function parseInterestData(input) {
        var output = [];
        for (var i = 0; i < input.length; i++) {
            if (input[i].category == "'rate'") {
                var obj = {};
                obj.date = parseDate(input[i].date);
                obj.amount = +input[i].amount;
                output.push(obj);
            }
        }
        return output;
    }

    // This function generate the stream chart of the stock sectors.
    function generateStockStreamChart(stackStockData, areaMaker) {
        self.stockLayers = self.chart.append("g")
            .attr("class", "stock-layer")
            .selectAll("path")
            .data(stackStockData)
            .enter().append("path")
            .attr("class", "stock-area")
            .style("fill", function(d) {
                return self.stockColorScale(d.key);
            })
            .attr("d", areaMaker)
            .attr("opacity", 1)
            .on("mouseover", function(selected, i) {
                if (!self.isMouseActive) {
                    return;
                }
                obscureALlExcept(self.stockLayers, i, 250);
            })
            .on("mousemove", function(selected, i) {
                if (!self.isMouseActive) {
                    return;
                }
                var mouseX = d3.mouse(this)[0];
                var invertedX = getInvertedX(mouseX, STOCK_CHART_WIDTH, self.dataLength);

                var title = selected[invertedX].data.date.getFullYear() + " " +
                    MONTHS[selected[invertedX].data.date.getMonth()] + " " + selected.key + " Sector",
                    stockValue = selected[invertedX].data[selected.key],
                    stockValueChange = (stockValue - selected[0].data[selected.key]) / selected[0].data[selected.key],
                    balance = self.balanceSheetData[invertedX].value,
                    balanceChange = (balance - self.balanceSheetData[0].value) / self.balanceSheetData[0].value;
                showAreaBorder(this);
                showTooltip(title, stockValue, stockValueChange, balance, balanceChange);
                obscureALlExcept(self.balanceBars, invertedX, 100, 0);
                obscureAll(self.balanceLayer, 100, 0.4);
            })
            .on("mouseout", function(selected, i) {
                if (!self.isMouseActive) {
                    return;
                }
                obscureAll(self.balanceBars);
                unobscureAll(self.stockLayers, 250);
                unobscureAll(self.balanceLayer);
                hideAreaBorder(this);
                hideTooltip();
            })
            .on("click", function(selected, i) {
                if (!self.isMouseActive) {
                    return;
                }
                if (selected.key != self.baselineSector) {
                    self.baselineSector = selected.key;
                    var stack = getOrderedStack(self.baselineSector, getActiveSectors(), self.sectors.length);
                    var stackStockData = stack(self.stockData);
                    var stockXScale = getStockXScale(self.stockData, STOCK_CHART_WIDTH);
                    var stockYScale = getStockYScale(stackStockData, STOCK_CHART_HEIGHT);
                    var areaMaker = getAreaMaker(stockXScale, stockYScale);
                    updateStockStreamChart(stackStockData, areaMaker);
                }
            });
    };

    function updateStockStreamChart(stackStockData, areaMaker) {
        unobscureAll(self.stockLayers);
        // Disable mouse detection functions until transition is complete.
        self.isMouseActive = false;

        self.stockStreamArea = d3.selectAll(".stock-area")
            .data(stackStockData)
            .classed("hover", false)
            .attr("stroke-width", "0px");

        self.stockStreamArea.exit().remove();

        self.stockStreamArea
            .enter().append("path")
            .attr("class", "stock-area")
            .merge(self.stockStreamArea)
            .style("fill", function(d) {
                return self.stockColorScale(d.key);
            })
            .transition()
            .on("end", function() {
                self.isMouseActive = true;
            })
            .duration(500)
            .ease(d3.easeLinear)
            .attr("d", areaMaker)
            .attr("opacity", 1);
    };

    function generateBalanceStreamChart(balanceYScale) {
        var balanceXScale = d3.scaleTime()
            .rangeRound([0, BALANCE_CHART_WIDTH])
            .domain(d3.extent(self.balanceSheetData, function(d) {
                return d.date;
            }));

        var areaMaker = d3.area()
            .curve(d3.curveCatmullRom)
            .x(function(d, i) {
                return balanceXScale(d.date);
            })
            .y0(function(d) {
                return balanceYScale(0);
            })
            .y1(function(d) {
                return balanceYScale(d.value);
            });

        self.balanceLayer = self.chart.append("g")
            .attr("class", "balance-layer")
            .append("path")
            .datum(self.balanceSheetData)
            .style("fill", function(d) {
                return BALANCE_SHEET_COLOR;
            })
            .attr("d", areaMaker)
            .attr("opacity", 1)
    }

    function generateTimeAxis(stockXScale) {
        self.chart.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + ENTIRE_CHART_HEIGHT + ")")
            .call(d3.axisBottom(stockXScale)
                .ticks(10)
                .tickFormat(d3.timeFormat("%Y")));
    };

    function generateLegends(legendObj) {
        self.chart.append("g")
            .attr("class", "legend")
            .attr("text-anchor", "start")
            .append("g")
            .append("text")
            .attr("x", legendObj.titleX)
            .attr("y", legendObj.titleY)
            .attr("font-family", "Arial Black")
            .attr("font-size", 13)
            .attr("font-weight", "bold")
            .text(legendObj.title);

        var legend = self.chart
            .select(".legend")
            .append("g")
            .attr("font-family", "sans-serif")
            .attr("font-size", 12)
            .selectAll("g")
            .data(legendObj.data)
            .enter().append("g")
            .attr("transform", function(d, i) {
                return "translate(0," + i * 20 + ")";
            });

        legend.append("rect")
            .attr("x", legendObj.rectX)
            .attr("y", legendObj.rectY)
            .attr("width", 19)
            .attr("height", 19)
            .attr("fill", legendObj.colors);

        legend.append("text")
            .attr("x", legendObj.textX)
            .attr("y", legendObj.textY)
            .attr("dy", "0.32em")
            .text(function(d) {
                return d;
            });

        return legend;
    };

    function attachFilters(clickables) {
        clickables.on("click", function(selected, i) {
            if (!self.isMouseActive) {
                return;
            }

            if (self.activeSectors.has(selected) && self.activeSectors.size == 1) {
                return
            } else if (self.activeSectors.has(selected)) {
                self.activeSectors.delete(selected);
                if (selected == self.baselineSector) {
                    self.baselineSector = getActiveSectors()[0];
                    //console.log(selected, getActiveSectors);
                }
            } else {
                self.activeSectors.add(selected);
            }

            var stack = getOrderedStack(self.baselineSector, getActiveSectors(), self.sectors.length);
            var stackStockData = stack(self.stockData);
            var stockXScale = getStockXScale(self.stockData, STOCK_CHART_WIDTH);
            var stockYScale = getStockYScale(stackStockData, STOCK_CHART_HEIGHT);
            var areaMaker = getAreaMaker(stockXScale, stockYScale);
            updateStockStreamChart(stackStockData, areaMaker);
        });
    };

    function generateBalanceBarChart(balanceYScale) {
        var balanceXScale = d3.scaleBand()
            .rangeRound([0, BALANCE_CHART_WIDTH])
            .domain(self.balanceSheetData.map(function(d) {
                return d.date;
            }));

        self.chart.append("g")
            .attr("class", "bar-area")
            .selectAll(".bar")
            .data(self.balanceSheetData)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) {
                return balanceXScale(d.date);
            })
            .attr("y", function(d) {
                return balanceYScale(d.value);
            })
            .attr("width", balanceXScale.bandwidth())
            .attr("height", function(d) {
                return BALANCE_CHART_HEIGHT + STOCK_CHART_HEIGHT + 35 - balanceYScale(d.value);
            })
            .attr("opacity", 0)
            .style("fill", BALANCE_SHEET_COLOR);

        self.balanceBars = self.chart.selectAll(".bar");
        self.balanceBars.on("mouseover", function(selected, i) {
                if (!self.isMouseActive) {
                    return;
                }
                obscureALlExcept(self.balanceBars, i, 250, 0);
                obscureAll(self.balanceLayer, 100, 0.4);
            })
            .on("mousemove", function(selected, i) {
                if (!self.isMouseActive) {
                    return;
                }
                var mouseX = d3.mouse(this)[0];
                var invertedX = getInvertedX(mouseX, STOCK_CHART_WIDTH, self.dataLength);

                var title = self.balanceSheetData[invertedX].date.getFullYear() + " " +
                    MONTHS[self.balanceSheetData[invertedX].date.getMonth()] + "  Entire Market",
                    stockValue = getValueSum(self.stockData[invertedX]),
                    stockValueChange = (stockValue - self.initialStockVolume) / self.initialStockVolume,
                    balance = self.balanceSheetData[invertedX].value,
                    balanceChange = (balance - self.balanceSheetData[0].value) / self.balanceSheetData[0].value;

                showTooltip(title, stockValue, stockValueChange, balance, balanceChange);
            })
            .on("mouseout", function(selected, i) {
                if (!self.isMouseActive) {
                    return;
                }
                unobscureAll(self.balanceBars);
                unobscureAll(self.balanceLayer);
                hideTooltip();
            })
    };

    function getActiveSectors() {
        return Array.from(self.activeSectors);
    }

    function showTooltip(title, stockValue, stockValueChange, balance, balanceChange) {
        self.tooltip.classed("hidden", false);

        var stockValueChangePercentage = Math.round(stockValueChange * 1000) / 10;
        var balanceChangePercentage = Math.round(balanceChange * 1000) / 10;
        self.tooltip.select(".first-row")
            .text(title);
        self.tooltip.select(".second-row")
            .text("Stock Volume: " + parseInt(stockValue));
        self.tooltip.select(".third-row")
            .text("Stock Volume Change Since Start: " + stockValueChangePercentage + "%");
        self.tooltip.select(".fourth-row")
            .text("Balance Sheet Volume: " + balance);
        self.tooltip.select(".fifth-row")
            .text("Balance Sheet Volume Change Since Start: " + balanceChangePercentage + "%");
    }

    function hideTooltip() {
        self.tooltip.classed("hidden", true);
    };

    function showAreaBorder(selectedArea) {
        d3.select(selectedArea)
            .classed("hover", true)
            .attr("stroke", BORDER_STROKE_COLOR)
            .attr("stroke-width", "2px");
    };

    function hideAreaBorder(selectedArea) {
        d3.select(selectedArea)
            .classed("hover", false)
            .attr("stroke-width", "0px")
    };
 };
diff --git a/stock_data.csv b/stock_data.csv
diff --git a/utility.js b/utility.js
 "use strict";

 function getStockXScale(stockData, width) {
    var stockXScale = d3.scaleTime()
        .rangeRound([0, width])
        .domain(d3.extent(stockData, function(d) {
            return d.date;
        }));
    return stockXScale;
 };

 function getStockYScale(stackStockData, height) {
    var stockYScale = d3.scaleLinear()
        .rangeRound([height, 100])
        .domain([0, d3.max(stackStockData, function(sector) {
            return d3.max(sector, function(d) {
                return d[1];
            });
        })]);
    return stockYScale;
 };

 function getStockColorScale(activeSectors) {
    var stockColorScale = d3.scaleOrdinal(d3.schemeCategory10)
        .domain(activeSectors);
    return stockColorScale;
 };

 function getAreaMaker(stockXScale, stockYScale) {
    var areaMaker = d3.area()
        .curve(d3.curveCatmullRom)
        .x(function(d, i) {
            return stockXScale(d.data.date);
        })
        .y0(function(d) {
            return stockYScale(d[0]);
        })
        .y1(function(d) {
            return stockYScale(d[1]);
        });
    return areaMaker;
 };

 function getInvertedX(mouseX, chartWidth, dataLength) {
    var invertedX = parseInt(mouseX / chartWidth * dataLength);
    invertedX = Math.min(invertedX, dataLength - 1);
    return invertedX;
 };

 function getValueSum(hashMap) {
    var sum = 0;
    Object.keys(hashMap).forEach(function(key) {
        if ($.isNumeric(hashMap[key])) {
            sum += hashMap[key];
        }
    });
    return sum;
 };

 function getOrderedStack(firstKey, activeSectors, length) {
    var stack = d3.stack()
        .keys(activeSectors)
        .order(function(series) {
            var order = d3.range(length);
            for (var i = 0; i < length; i++) {
                if (series[i].key == firstKey) {
                    var tmp = order[0];
                    order[0] = i;
                    order[i] = tmp;
                    break;
                }
            }
            return order;
        });
    return stack;
 };

 function obscureALlExcept(obj, i, time = 100, opacity = 0.2) {
    obj.transition()
        .duration(time)
        .attr("opacity", function(d, j) {
            return j != i ? opacity : 1;
        });
 };

 function obscureAll(obj, time = 100, opacity = 0) {
    obj.transition()
        .duration(time)
        .attr("opacity", opacity);
 };

 function unobscureAll(obj, time = 100) {
    obj.transition()
        .duration(time)
        .attr("opacity", "1");
 };
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<!-- customized js and css -->
	<script src="stock.js"></script>
	<script src="utility.js"></script>
	<script src="main.js"></script>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>Demo</title>
	</head>

	<body>
	</body>
	.chart {
	background: #fff;
	}

	.axis {
	stroke-width: 0;
	fill: transparent;
	font-size: large;
	font-weight: bold;
	}

	.tooltip {
	position: absolute;
	text-align: left;
	font-family: sans-serif;
	font-size: 12px;
	width: 400px;
	background-color: white;
	pointer-events: none;
	}

	.tooltip p{
	margin: 3px;
	}

	.tooltip.hidden {
	display: none;
	}

	.tooltip .first-row {
	font-size: large;
	font-weight: bold;
	}
	"use strict";

	$(function() {
	var stockDataPath = "stock_data.csv";
	var monthlyDataPath = "monthly_data.csv";

	var stockVis = new StockVis();
	stockVis.run(stockDataPath, monthlyDataPath);
	});
date	core_inflation	labor_part	u6_unemployment	category	direction	color	amount	info	balance_sheet	bonds	mbs
1/31/07	2.7	66.4	8.4						888608	467864	0
2/28/07	2.7	66.3	8.2						903244	466675	0
3/31/07	2.5	66.2	8						903279	468553	0
4/30/07	2.3	65.9	8.2						901653	471714	0
5/31/07	2.2	66	8.2						905512	474672	0
6/30/07	2.2	66	8.3						899388	474672	0
7/31/07	2.2	66	8.4						901987	474672	0
8/31/07	2.1	65.8	8.4						901862	472142	0
9/30/07	2.1	66	8.4						911422	472142	0
10/31/07	2.2	65.8	8.4						910780	472142	0
11/30/07	2.3	66	8.4						921611	470984	0
12/31/07	2.4	66	8.8						925560	470984	0
1/31/08	2.5	66.2	9.2						916745	470984	0
2/29/08	2.3	66	9						918640	470010	0
3/31/08	2.4	66.1	9.1	'rate'	'down'	red	2.7	Here's some filler for you to test out	921456	470010	0
4/30/08	2.3	65.9	9.2	'rate'	'down'	red	1.8	Here's some filler for you	920457	452909	0
5/31/08	2.3	66.1	9.7						930033	434396	0
6/30/08	2.4	66.1	10.1						926670	412392	0
7/31/08	2.5	66.1	10.5						944941	412392	0
8/31/08	2.5	66.1	10.8						936384	411731	0
9/30/08	2.5	66	11						1186957	411371	0
10/31/08	2.2	66	11.8	'rate'	down'	red	0.9	Here's some filler for you	1924976	411731	0
11/30/08	2	65.9	12.6	'qe'	'up'	green	0.5	Here's some filler for you	2145920	410529	0
12/31/08	1.8	65.8	13.6	'rate'	'down'	red	-0.9	Here's some filler for you	2259356	410491	0
1/31/09	1.7	65.7	14.2						2041904	412914	0
2/28/09	1.8	65.8	15.2						1952216	412914	68529
3/31/09	1.8	65.6	15.8	'qe'	'up'	green	1.5	Here's some filler for you	2103055	412914	236964
4/30/09	1.9	65.7	15.9						2143109	479039	367728
5/31/09	1.8	65.7	16.5						2130071	430902	430902
6/30/09	1.7	65.7	16.5						2052255	581608	467114
7/31/09	1.5	65.5	16.4						2065776	627146	544507
8/31/09	1.4	65.4	16.7						2104575	671822	624264
9/30/09	1.5	65.1	16.7						2191003	707449	689228
10/31/09	1.7	65	17.1						2213202	709649	776025
11/30/09	1.7	65	17.1						2248691	709649	854872
12/31/09	1.8	64.6	17.1						2278896	709649	909575
1/31/10	1.6	64.8	16.7						2293657	708872	973241
2/28/10	1.3	64.9	17	'qe'	'down'	teal	0.5	Here's some filler for you	2328458	708872	1032735
3/31/10	1.1	64.9	17.1						2356901	708872	1073519
4/30/10	0.9	65.2	17.1						2375785	712258	1099763
5/31/10	0.9	64.9	16.6						2382850	712023	1117932
6/30/10	0.9	64.6	16.4						2387303	712023	1128424
7/31/10	0.9	64.6	16.4						2371834	712020	1121831
8/31/10	0.9	64.7	16.5						2353703	717857	1111424
9/30/10	0.8	64.6	16.8						2347291	743219	1086158
10/31/10	0.6	64.4	16.6						2342413	767275	1059445
11/30/10	0.8	64.6	16.9	'qe'	'up'	green	0.5	Here's some filler for you	2377209	823956	1038075
12/31/10	0.8	64.3	16.6						2467544	937566	1001432
1/31/11	1	64.2	16.2						2479266	1021561	975533
2/28/11	1.1	64.1	16						2565280	1122726	958375
3/31/11	1.2	64.2	15.9						2657343	1240411	938111
4/30/11	1.3	64.2	16.1						2731876	13232155	930565
5/31/11	1.5	64.1	15.8						2810802	1417325	922625
6/30/11	1.6	64	16.1	'qe'	'down'	teal	0.5	Here's some filler for you	2903357	1514339	911980
7/31/11	1.8	64	15.9						2913147	1541736	901226
8/31/11	2	64.1	16.1						2902847	1554087	892475
9/30/11	2	64.2	16.4						2898716	1568798	875659
10/31/11	2.1	64.1	15.8						2893323	1575160	858169
11/30/11	2.2	64.1	15.5						2868717	1572353	841828
12/31/11	2.2	64	15.2						2980807	1574925	847756
1/31/12	2.3	63.7	15.2						2965815	1557618	846377
2/29/12	2.2	63.8	15						2977971	1563864	851789
3/31/12	2.3	63.8	14.5						2933321	1571722	845079
4/30/12	2.3	63.7	14.6						2921077	1572232	860985
5/31/12	2.3	63.7	14.7						2895392	1568086	853657
6/30/12	2.2	63.8	14.8						2915062	1570616	862674
7/31/12	2.1	63.7	14.8						2905111	1565823	865384
8/31/12	1.9	63.5	14.6						2864529	1557926	852640
9/30/12	2	63.6	14.8	'qe'	'up'	green	0.5	Here's some filler for you	2857511	1561398	847999
10/31/12	2	63.8	14.4						2890073	1569377	868219
11/30/12	1.9	63.6	14.4						2902146	1560596	893547
12/31/12	1.9	63.7	14.4	'qe'	'up'	green	0.5	Here's some filler for you	2966249	1570986	941054
1/31/13	1.9	63.6	14.5						3050116	1616686	968245
2/28/13	2	63.4	14.4						3138708	1656638	1025649
3/31/13	1.9	63.3	13.8						3248558	1698670	1079379
4/30/13	1.7	63.4	14						3355606	1739263	1136630
5/31/13	1.7	63.4	13.8	'future'		yellow	2	Here's some filler for you	3437196	1787525	1175093
6/30/13	1.6	63.4	14.2						3527966	1827642	1219174
7/31/13	1.7	63.3	13.8						3601572	1866698	1252151
8/31/13	1.8	63.3	13.6						3687139	1917050	1298177
9/30/13	1.7	63.3	13.7						3780631	1956248	1349949
10/31/13	1.7	62.8	13.6						3881436	2010481	1394674
11/30/13	1.7	63	13.1						3967763	2054754	1443747
12/31/13	1.7	62.9	13.1	qe'	'down'	teal	0.5	Here's some filler for you	4071143	2099952	1497105
1/31/14	1.6	62.9	12.7						4144381	2131637	1536375
2/28/14	1.6	62.9	12.6						4203096	2166119	1574316
3/31/14	1.7	63.1	12.6						4272822	2200551	1607329
4/30/14	1.8	62.8	12.3						4332083	2228502	1634315
5/31/14	2	62.8	12.1						4370696	2257287	1653589
6/30/14	1.9	62.8	12						4418280	2281913	1671470
7/31/14	1.9	62.9	12.2						4449791	2305328	1675777
8/31/14	1.7	62.9	12						4461645	2319393	1684285
9/30/14	1.7	62.8	11.8						4502665	2332304	1708147
10/31/14	1.8	62.9	11.5						4535858	2345835	1723502
11/30/14	1.7	62.9	11.4						4537576	2346713	1736861
12/31/14	1.6	62.7	11.2	future'		yellow	2	Here's some filler for you	4555279	2346712	1749822
1/31/15	1.6	62.9	11.3						4551672	2346712	1745524
2/28/15	1.7	62.7	11						4542285	2346711	1750115
3/31/15	1.8	62.7	10.9						4535516	2346710	1741251
4/30/15	1.8	62.8	10.8						4526909	2346709	1729360
5/31/15	1.7	62.9	10.7						4520885	2346643	1733239
6/30/15	1.8	62.6	10.5						4543142	2346642	1749981
7/31/15	1.8	62.6	10.3						4539431	2346641	1743198
8/31/15	1.8	62.6	10.2						4530174	2346641	1745761
9/30/15	1.9	62.4	10						4539952	2346640	1750467
10/31/15	1.9	62.5	9.8						4541689	2346639	1750513
11/30/15	2	62.5	9.9						4534451	2346639	1755338
12/31/15	2.1	62.7	9.9	'rate'	'up'	red	0	Here's some filler for you	4538197	2346639	1753365
1/31/16	2.2	62.7	9.9						4534891	2346639	1750750
2/29/16	2.3	62.9	9.8						4532012	2346671	1758567
3/31/16	2.2	63	9.8						4529065	2344518	1754490
4/30/16	2.1	62.8	9.7						4529485	2342292	1753287
5/31/16	2.2	62.6	9.7						4516057	2342263	1751154
6/30/16	2.2	62.7	9.6						4521510	2339286	1752101
7/31/16	2.2	62.8	9.7						4520006	2342204	1750346
8/31/16	2.3	62.8	9.7						4523510	2342604	1763047
9/30/16	2.2	62.9	9.7						4510555	2341647	1748606
10/31/16	2.1	62.8	9.5						4515412	2340976	1749656
11/30/16	2.1	62.6	9.3						4506728	2340674	1754607
12/31/16	2.2	62.7	9.2	'rate'	'up'	red	0.9	Here's some filler for you	4511369	2339103	1753620
1/31/17	2.3	62.9	9.4						4503849	2342206	1747998
2/28/17	2.2	63	9.2						4508393	2341382	1767220
3/31/17	2	63	8.9	'rate'	'up'	red	1.8	Here's some filler for you	4521570	2340611	1773998
4/30/17	1.9	62.9	8.6						4525009	2339740	1776263
5/31/17	1.7	62.7	8.4	'rate'	'up'	red	2.7	Here's some filler for you	4520311	2339540	1783274
6/30/17	1.7								4516885	2338216	1776569
	"use strict";

	var StockVis = function() {
	/** Define global constants. */
	const SVG_WIDTH = 960;
	const SVG_HEIGHT = 850;
	const MARGIN = {
	top: 20,
	right: 20,
	bottom: 30,
	left: 50
	};
	const ENTIRE_CHART_WIDTH = SVG_WIDTH - MARGIN.left - MARGIN.right;
	const ENTIRE_CHART_HEIGHT = SVG_HEIGHT - MARGIN.top - MARGIN.bottom;
	const STOCK_CHART_WIDTH = ENTIRE_CHART_WIDTH;
	const STOCK_CHART_HEIGHT = 450;
	const BALANCE_CHART_WIDTH = ENTIRE_CHART_WIDTH;
	const BALANCE_CHART_HEIGHT = 200;
	const BALANCE_SHEET_COLOR = "#aecc00";
	const BORDER_STROKE_COLOR = "black";
	const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May",
	"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
	];

	/** Define global variables. */
	var self = this;
	var parseDate = d3.timeParse("%m/%d/%y");

	/** Define class member fields. */
	self.stockData;
	self.dataLength;
	self.balanceSheetData;
	self.initialStockVolume;
	self.sectors;
	self.baselineSector;
	self.stockLayers;
	self.balanceLayer;
	self.stockStreamArea;
	self.balanceStreamArea;
	self.balanceBars;
	self.stockColorScale;
	self.activeSectors = new Set();
	self.isMouseActive = true;
	self.chart = d3.select("body")
	.append("div")
	.attr("class", "chart")
	.append("svg")
	.attr("width", SVG_WIDTH)
	.attr("height", SVG_HEIGHT)
	.append("g")
	.attr("transform", "translate(" + MARGIN.left + "," + MARGIN.top + ")");
	self.tooltip = d3.select(".chart")
	.append("div")
	.attr("class", "tooltip hidden")
	.style("top", MARGIN.top + "px")
	.style("left", ENTIRE_CHART_WIDTH * 0.7 + "px");
	self.tooltip.append("p")
	.attr("class", "first-row");
	self.tooltip.append("p")
	.attr("class", "second-row");
	self.tooltip.append("p")
	.attr("class", "third-row");
	self.tooltip.append("p")
	.attr("class", "fourth-row");
	self.tooltip.append("p")
	.attr("class", "fifth-row");

	/** The public function to be called in the main js. */
	self.run = function(stockDataPath, monthlyDataPath) {
	buildOnStockData(stockDataPath);
	buildOnBalanceData(monthlyDataPath);
	buildOnInterestDate(monthlyDataPath);
	};

	function buildOnStockData(stockDataPath) {
	d3.csv(stockDataPath,
	function(error, rawData) {
	if (error) throw error;

	self.sectors = rawData.columns.slice(1);
	for (var i in self.sectors) {
	self.activeSectors.add(self.sectors[i]);
	}
	self.stockColorScale = getStockColorScale(getActiveSectors());
	self.baselineSector = self.sectors[0];
	self.stockData = parseStockData(rawData, self.sectors);
	self.dataLength = self.stockData.length;
	self.initialStockVolume = getValueSum(self.stockData[0]);
	var stack = d3.stack()
	.keys(self.sectors);
	var stackStockData = stack(self.stockData);
	var stockXScale = getStockXScale(self.stockData, STOCK_CHART_WIDTH);
	var stockYScale = getStockYScale(stackStockData, STOCK_CHART_HEIGHT);
	var areaMaker = getAreaMaker(stockXScale, stockYScale);

	generateStockStreamChart(stackStockData, areaMaker);
	generateTimeAxis(stockXScale);

	var legendObj = {
	title: "Stock Sectors",
	data: self.sectors.slice().reverse(),
	colors: self.stockColorScale,
	titleX: 10,
	titleY: 10,
	rectX: 10,
	rectY: 20,
	textX: 40,
	textY: 30
	};
	var legend = generateLegends(legendObj);
	attachFilters(legend);
	});
	};

	function buildOnBalanceData(balanceDataPath) {
	d3.csv(balanceDataPath,
	function(error, rawData) {
	if (error) throw error;

	self.balanceSheetData = parseBalanceSheetData(rawData);
	var padding = 50;
	var balanceYScale = d3.scaleLinear()
	.rangeRound([STOCK_CHART_HEIGHT + BALANCE_CHART_HEIGHT, STOCK_CHART_HEIGHT + padding])
	.domain(d3.extent(self.balanceSheetData, function(d) {
	return d.value;
	}));

	generateBalanceStreamChart(balanceYScale);
	generateBalanceBarChart(balanceYScale);

	var legendObj = {
	title: "Federal Reserve",
	data: ["Balance Sheet Volume"],
	colors: BALANCE_SHEET_COLOR,
	titleX: 10,
	titleY: STOCK_CHART_HEIGHT + 45,
	rectX: 10,
	rectY: STOCK_CHART_HEIGHT + 55,
	textX: 40,
	textY: STOCK_CHART_HEIGHT + 65
	};
	generateLegends(legendObj);
	});
	};

	function buildOnInterestDate(interestDataPath) {
	d3.csv(interestDataPath,
	function(error, rawData) {
	if (error) throw error;

	var output = parseInterestData(rawData);
	});
	};

	// This function parse the raw data.
	function parseStockData(input, keys) {
	var output = [];
	var start = 0;
	for (var i = 1; i < input.length; i++) {
	var currMonth = parseDate(input[i].Date).getMonth(),
	priorMonth = parseDate(input[i - 1].Date).getMonth();

	if (currMonth != priorMonth) {
	var num = i - start;
	var obj = {}
	keys.forEach(function(key) {
	obj[key] = input.slice(start, i).reduce(function(sum, item) {
	return sum + item[key] / num;
	}, 0);
	});
	obj.date = parseDate(input[i - 1].Date);
	obj.date = new Date(obj.date.getFullYear(), obj.date.getMonth() + 1, 0);
	output.push(obj);
	start = i;
	}
	}

	var num = input.length - start;
	var obj = {}
	keys.forEach(function(key) {
	obj[key] = input.slice(start, input.length).reduce(function(sum, item) {
	return sum + item[key] / num;
	}, 0);
	});
	obj.date = parseDate(input[input.length - 1].Date);
	obj.date = new Date(obj.date.getFullYear(), obj.date.getMonth() + 1, 0);
	output.push(obj);

	return output;
	};

	function parseBalanceSheetData(input) {
	var output = [];
	for (var i = 0; i < input.length; i++) {
	//if
	var obj = {};
	obj.date = parseDate(input[i].date);
	obj.value = +input[i].balance_sheet;
	output.push(obj);
	}
	return output;
	};

	function parseInterestData(input) {
	var output = [];
	for (var i = 0; i < input.length; i++) {
	if (input[i].category == "'rate'") {
	var obj = {};
	obj.date = parseDate(input[i].date);
	obj.amount = +input[i].amount;
	output.push(obj);
	}
	}
	return output;
	}

	// This function generate the stream chart of the stock sectors.
	function generateStockStreamChart(stackStockData, areaMaker) {
	self.stockLayers = self.chart.append("g")
	.attr("class", "stock-layer")
	.selectAll("path")
	.data(stackStockData)
	.enter().append("path")
	.attr("class", "stock-area")
	.style("fill", function(d) {
	return self.stockColorScale(d.key);
	})
	.attr("d", areaMaker)
	.attr("opacity", 1)
	.on("mouseover", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}
	obscureALlExcept(self.stockLayers, i, 250);
	})
	.on("mousemove", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}
	var mouseX = d3.mouse(this)[0];
	var invertedX = getInvertedX(mouseX, STOCK_CHART_WIDTH, self.dataLength);

	var title = selected[invertedX].data.date.getFullYear() + " " +
	MONTHS[selected[invertedX].data.date.getMonth()] + " " + selected.key + " Sector",
	stockValue = selected[invertedX].data[selected.key],
	stockValueChange = (stockValue - selected[0].data[selected.key]) / selected[0].data[selected.key],
	balance = self.balanceSheetData[invertedX].value,
	balanceChange = (balance - self.balanceSheetData[0].value) / self.balanceSheetData[0].value;
	showAreaBorder(this);
	showTooltip(title, stockValue, stockValueChange, balance, balanceChange);
	obscureALlExcept(self.balanceBars, invertedX, 100, 0);
	obscureAll(self.balanceLayer, 100, 0.4);
	})
	.on("mouseout", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}
	obscureAll(self.balanceBars);
	unobscureAll(self.stockLayers, 250);
	unobscureAll(self.balanceLayer);
	hideAreaBorder(this);
	hideTooltip();
	})
	.on("click", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}
	if (selected.key != self.baselineSector) {
	self.baselineSector = selected.key;
	var stack = getOrderedStack(self.baselineSector, getActiveSectors(), self.sectors.length);
	var stackStockData = stack(self.stockData);
	var stockXScale = getStockXScale(self.stockData, STOCK_CHART_WIDTH);
	var stockYScale = getStockYScale(stackStockData, STOCK_CHART_HEIGHT);
	var areaMaker = getAreaMaker(stockXScale, stockYScale);
	updateStockStreamChart(stackStockData, areaMaker);
	}
	});
	};

	function updateStockStreamChart(stackStockData, areaMaker) {
	unobscureAll(self.stockLayers);
	// Disable mouse detection functions until transition is complete.
	self.isMouseActive = false;

	self.stockStreamArea = d3.selectAll(".stock-area")
	.data(stackStockData)
	.classed("hover", false)
	.attr("stroke-width", "0px");

	self.stockStreamArea.exit().remove();

	self.stockStreamArea
	.enter().append("path")
	.attr("class", "stock-area")
	.merge(self.stockStreamArea)
	.style("fill", function(d) {
	return self.stockColorScale(d.key);
	})
	.transition()
	.on("end", function() {
	self.isMouseActive = true;
	})
	.duration(500)
	.ease(d3.easeLinear)
	.attr("d", areaMaker)
	.attr("opacity", 1);
	};

	function generateBalanceStreamChart(balanceYScale) {
	var balanceXScale = d3.scaleTime()
	.rangeRound([0, BALANCE_CHART_WIDTH])
	.domain(d3.extent(self.balanceSheetData, function(d) {
	return d.date;
	}));

	var areaMaker = d3.area()
	.curve(d3.curveCatmullRom)
	.x(function(d, i) {
	return balanceXScale(d.date);
	})
	.y0(function(d) {
	return balanceYScale(0);
	})
	.y1(function(d) {
	return balanceYScale(d.value);
	});

	self.balanceLayer = self.chart.append("g")
	.attr("class", "balance-layer")
	.append("path")
	.datum(self.balanceSheetData)
	.style("fill", function(d) {
	return BALANCE_SHEET_COLOR;
	})
	.attr("d", areaMaker)
	.attr("opacity", 1)
	}

	function generateTimeAxis(stockXScale) {
	self.chart.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + ENTIRE_CHART_HEIGHT + ")")
	.call(d3.axisBottom(stockXScale)
	.ticks(10)
	.tickFormat(d3.timeFormat("%Y")));
	};

	function generateLegends(legendObj) {
	self.chart.append("g")
	.attr("class", "legend")
	.attr("text-anchor", "start")
	.append("g")
	.append("text")
	.attr("x", legendObj.titleX)
	.attr("y", legendObj.titleY)
	.attr("font-family", "Arial Black")
	.attr("font-size", 13)
	.attr("font-weight", "bold")
	.text(legendObj.title);

	var legend = self.chart
	.select(".legend")
	.append("g")
	.attr("font-family", "sans-serif")
	.attr("font-size", 12)
	.selectAll("g")
	.data(legendObj.data)
	.enter().append("g")
	.attr("transform", function(d, i) {
	return "translate(0," + i * 20 + ")";
	});

	legend.append("rect")
	.attr("x", legendObj.rectX)
	.attr("y", legendObj.rectY)
	.attr("width", 19)
	.attr("height", 19)
	.attr("fill", legendObj.colors);

	legend.append("text")
	.attr("x", legendObj.textX)
	.attr("y", legendObj.textY)
	.attr("dy", "0.32em")
	.text(function(d) {
	return d;
	});

	return legend;
	};

	function attachFilters(clickables) {
	clickables.on("click", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}

	if (self.activeSectors.has(selected) && self.activeSectors.size == 1) {
	return
	} else if (self.activeSectors.has(selected)) {
	self.activeSectors.delete(selected);
	if (selected == self.baselineSector) {
	self.baselineSector = getActiveSectors()[0];
	//console.log(selected, getActiveSectors);
	}
	} else {
	self.activeSectors.add(selected);
	}

	var stack = getOrderedStack(self.baselineSector, getActiveSectors(), self.sectors.length);
	var stackStockData = stack(self.stockData);
	var stockXScale = getStockXScale(self.stockData, STOCK_CHART_WIDTH);
	var stockYScale = getStockYScale(stackStockData, STOCK_CHART_HEIGHT);
	var areaMaker = getAreaMaker(stockXScale, stockYScale);
	updateStockStreamChart(stackStockData, areaMaker);
	});
	};

	function generateBalanceBarChart(balanceYScale) {
	var balanceXScale = d3.scaleBand()
	.rangeRound([0, BALANCE_CHART_WIDTH])
	.domain(self.balanceSheetData.map(function(d) {
	return d.date;
	}));

	self.chart.append("g")
	.attr("class", "bar-area")
	.selectAll(".bar")
	.data(self.balanceSheetData)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) {
	return balanceXScale(d.date);
	})
	.attr("y", function(d) {
	return balanceYScale(d.value);
	})
	.attr("width", balanceXScale.bandwidth())
	.attr("height", function(d) {
	return BALANCE_CHART_HEIGHT + STOCK_CHART_HEIGHT + 35 - balanceYScale(d.value);
	})
	.attr("opacity", 0)
	.style("fill", BALANCE_SHEET_COLOR);

	self.balanceBars = self.chart.selectAll(".bar");
	self.balanceBars.on("mouseover", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}
	obscureALlExcept(self.balanceBars, i, 250, 0);
	obscureAll(self.balanceLayer, 100, 0.4);
	})
	.on("mousemove", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}
	var mouseX = d3.mouse(this)[0];
	var invertedX = getInvertedX(mouseX, STOCK_CHART_WIDTH, self.dataLength);

	var title = self.balanceSheetData[invertedX].date.getFullYear() + " " +
	MONTHS[self.balanceSheetData[invertedX].date.getMonth()] + " Entire Market",
	stockValue = getValueSum(self.stockData[invertedX]),
	stockValueChange = (stockValue - self.initialStockVolume) / self.initialStockVolume,
	balance = self.balanceSheetData[invertedX].value,
	balanceChange = (balance - self.balanceSheetData[0].value) / self.balanceSheetData[0].value;

	showTooltip(title, stockValue, stockValueChange, balance, balanceChange);
	})
	.on("mouseout", function(selected, i) {
	if (!self.isMouseActive) {
	return;
	}
	unobscureAll(self.balanceBars);
	unobscureAll(self.balanceLayer);
	hideTooltip();
	})
	};

	function getActiveSectors() {
	return Array.from(self.activeSectors);
	}

	function showTooltip(title, stockValue, stockValueChange, balance, balanceChange) {
	self.tooltip.classed("hidden", false);

	var stockValueChangePercentage = Math.round(stockValueChange * 1000) / 10;
	var balanceChangePercentage = Math.round(balanceChange * 1000) / 10;
	self.tooltip.select(".first-row")
	.text(title);
	self.tooltip.select(".second-row")
	.text("Stock Volume: " + parseInt(stockValue));
	self.tooltip.select(".third-row")
	.text("Stock Volume Change Since Start: " + stockValueChangePercentage + "%");
	self.tooltip.select(".fourth-row")
	.text("Balance Sheet Volume: " + balance);
	self.tooltip.select(".fifth-row")
	.text("Balance Sheet Volume Change Since Start: " + balanceChangePercentage + "%");
	}

	function hideTooltip() {
	self.tooltip.classed("hidden", true);
	};

	function showAreaBorder(selectedArea) {
	d3.select(selectedArea)
	.classed("hover", true)
	.attr("stroke", BORDER_STROKE_COLOR)
	.attr("stroke-width", "2px");
	};

	function hideAreaBorder(selectedArea) {
	d3.select(selectedArea)
	.classed("hover", false)
	.attr("stroke-width", "0px")
	};
	};
	"use strict";

	function getStockXScale(stockData, width) {
	var stockXScale = d3.scaleTime()
	.rangeRound([0, width])
	.domain(d3.extent(stockData, function(d) {
	return d.date;
	}));
	return stockXScale;
	};

	function getStockYScale(stackStockData, height) {
	var stockYScale = d3.scaleLinear()
	.rangeRound([height, 100])
	.domain([0, d3.max(stackStockData, function(sector) {
	return d3.max(sector, function(d) {
	return d[1];
	});
	})]);
	return stockYScale;
	};

	function getStockColorScale(activeSectors) {
	var stockColorScale = d3.scaleOrdinal(d3.schemeCategory10)
	.domain(activeSectors);
	return stockColorScale;
	};

	function getAreaMaker(stockXScale, stockYScale) {
	var areaMaker = d3.area()
	.curve(d3.curveCatmullRom)
	.x(function(d, i) {
	return stockXScale(d.data.date);
	})
	.y0(function(d) {
	return stockYScale(d[0]);
	})
	.y1(function(d) {
	return stockYScale(d[1]);
	});
	return areaMaker;
	};

	function getInvertedX(mouseX, chartWidth, dataLength) {
	var invertedX = parseInt(mouseX / chartWidth * dataLength);
	invertedX = Math.min(invertedX, dataLength - 1);
	return invertedX;
	};

	function getValueSum(hashMap) {
	var sum = 0;
	Object.keys(hashMap).forEach(function(key) {
	if ($.isNumeric(hashMap[key])) {
	sum += hashMap[key];
	}
	});
	return sum;
	};

	function getOrderedStack(firstKey, activeSectors, length) {
	var stack = d3.stack()
	.keys(activeSectors)
	.order(function(series) {
	var order = d3.range(length);
	for (var i = 0; i < length; i++) {
	if (series[i].key == firstKey) {
	var tmp = order[0];
	order[0] = i;
	order[i] = tmp;
	break;
	}
	}
	return order;
	});
	return stack;
	};

	function obscureALlExcept(obj, i, time = 100, opacity = 0.2) {
	obj.transition()
	.duration(time)
	.attr("opacity", function(d, j) {
	return j != i ? opacity : 1;
	});
	};

	function obscureAll(obj, time = 100, opacity = 0) {
	obj.transition()
	.duration(time)
	.attr("opacity", opacity);
	};

	function unobscureAll(obj, time = 100) {
	obj.transition()
	.duration(time)
	.attr("opacity", "1");
	};