Dynamic Stacked Bar Chart using d3.js

<html>
	<head>
		<title>Dynamic Stacked Bar Chart using d3.js</title>
		<script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
		<style>
			rect.a {
				fill: green;
			}
			rect.b {
				fill: orange;
			}
			rect.c {
				fill: red;
			}

</style>

</head>
	<body>

// capture the height/width defined in the div so we only have it defined in one place
	var chartHeight = parseInt(document.getElementById('graph').style.height);
	var chartWidth = parseInt(document.getElementById('graph').style.width);

// TODO we need a ceiling value
	var ceiling = 200;
	// Y scale will fit values from 0-10 within pixels 0 - height
	var y = d3.scale.linear().domain([0, ceiling]).range([0, chartHeight]);

/**
	* Create an empty shell of a chart that bars can be added to
	*/
	function displayStackedChart(chartId) {
		// create an SVG element inside the div that fills 100% of the div
		var vis = d3.select("#" + chartId).append("svg:svg").attr("width", "100%").attr("height", "100%")
		// transform down to simulate making the origin bottom-left instead of top-left
		// we will then need to always make Y values negative
		.append("g").attr("class","barChart").attr("transform", "translate(0, " + chartHeight + ")"); 
	}

/* the property names on the data objects that we'll get data from */
	var propertyNames = ["a", "b", "c"];

/**
	* Add or update a bar of data in the given chart
	*
	* The data object expects to have an 'id' property to identify itself (id == a single bar)
	* and have object properties with numerical values for each property in the 'propertyNames' array.
	*/
	function addData(chartId, data) {

// if data already exists for this data ID, update it instead of adding it
		var existingBarNode = document.querySelectorAll("#" + chartId + "_" + data.id);
		if(existingBarNode.length > 0) {
			var existingBar = d3.select(existingBarNode.item());
			// reset the decay since we received an update
			existingBar.transition().duration(100)
				.attr("style", "opacity:1.0");
			// update the data on each data point defined by 'propertyNames'
			for(index in propertyNames) {
				existingBar.select("rect." + propertyNames[index])
					.transition().ease("linear").duration(300)
					.attr("y", barY(data, propertyNames[index])) 
					.attr("height", barHeight(data, propertyNames[index])); 
			}
		} else {
			// it's new data so add a bar
			var barDimensions = updateBarWidthsAndPlacement(chartId);

// select the chart and add the new bar
			var barGroup = d3.select("#" + chartId).selectAll("g.barChart")
				.append("g")
					.attr("class", "bar")
					.attr("id", chartId + "_" + data.id)
					.attr("style", "opacity:1.0");

// now add each data point to the stack of this bar
			for(index in propertyNames) {
				barGroup.append("rect")
					.attr("class", propertyNames[index])
				    .attr("width", (barDimensions.barWidth-1)) 
				    .attr("x", function () { return (barDimensions.numBars-1) * barDimensions.barWidth;})
				    .attr("y", barY(data, propertyNames[index])) 
				    .attr("height", barHeight(data, propertyNames[index])); 
			}

// setup an interval timer for this bar that will decay the coloring
			barGroup.styleInterval = setInterval(function() {
					var theBar = document.getElementById(chartId + "_" + data.id);
					if(theBar == undefined) {
						clearInterval(barGroup.styleInterval);
					} else {
						if(theBar.style.opacity > 0.2) {
							theBar.style.opacity = theBar.style.opacity - 0.05;	
						}
					}
				}, 1000);
						//console.log("set interval: " + barGroup.styleInterval);
		}
	}

/**
	* Remove a bar of data in the given chart
	*
	* The data object expects to have an 'id' property to identify itself (id == a single bar)
	* and have object properties with numerical values for each property in the 'propertyNames' array.
	*/
	function removeData(chartId, barId) {
		var existingBarNode = document.querySelectorAll("#" + chartId + "_" + barId);
		if(existingBarNode.length > 0) {
			// bar exists so we'll remove it
			var barGroup = d3.select(existingBarNode.item());
			barGroup
				.transition().duration(200)
				.remove();
		}
	}

/**
	* Update the bar widths and x positions based on the number of bars.
	* @returns {barWidth: X, numBars:Y}
	*/
	function updateBarWidthsAndPlacement(chartId) {
		/**
		* Since we dynamically add/remove bars we can't use data indexes but must determine how
		* many bars we have already in the graph to calculate x-axis placement
		*/
		var numBars = document.querySelectorAll("#" + chartId + " g.bar").length + 1;

// determine what the width of all bars should be
		var barWidth = chartWidth/numBars;
		if(barWidth > 50) {
			barWidth=50;
		}

// reset the width and x position of each bar to fit
		var barNodes = document.querySelectorAll(("#" + chartId + " g.barChart g.bar"));
		for(var i=0; i < barNodes.length; i++) {
			d3.select(barNodes.item(i)).selectAll("rect")
				//.transition().duration(10) // animation makes the display choppy, so leaving it out
				.attr("x", i * barWidth)
				.attr("width", (barWidth-1));
		}

return {"barWidth":barWidth, "numBars":numBars};
	}

/*
	* Function to calculate the Y position of a bar
	*/
	function barY(data, propertyOfDataToDisplay) {
		/*
		* Determine the baseline by summing the previous values in the data array.
		* There may be a cleaner way of doing this with d3.layout.stack() but it
		* wasn't obvious how to do so while playing with it.
		*/
		var baseline = 0;
		for(var j=0; j < index; j++) {
			baseline = baseline + data[propertyNames[j]];
		}
		// make the y value negative 'height' instead of 0 due to origin moved to bottom-left
		return -y(baseline + data[propertyOfDataToDisplay]);
	}

/*
	* Function to calculate height of a bar
	*/
	function barHeight(data, propertyOfDataToDisplay) {
		return data[propertyOfDataToDisplay];
	}

// used to populate random data for testing
	function randomInt(magnitude) {
		return Math.floor(Math.random()*magnitude);
	}

/* initialize the chart without any data */
	displayStackedChart("graph");

/* kick off a continual interval timer to simulate the ongoing addition and update of data */
	setInterval(function() {
			addData("graph", {"id":"v"+randomInt(150), "a":(randomInt(50)+100), "b":randomInt(50), "c":randomInt(40)});
		}, 20);

/* kick off a continual interval timer to simulate the occasional removal of data */
	setInterval(function() {
		// we want removals to be somewhat bursty, so we'll randomize how many we remove
		var numToRemove = randomInt(20);
		for(var r=0; r<numToRemove; r++) {
			removeData("graph", "v"+randomInt(150));
		}
		}, 5000);

</script>

</body>
</html>

Modified http://mbostock.github.com/d3/d3.v2.js to a secure url

https://mbostock.github.com/d3/d3.v2.js