Stocks - Grouped to stacked bars

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 10px;
  top: 10px;
}

label {
  display: block;
}

</style>
<body>
<form>
  <label><input type="radio" name="mode" value="grouped"> Grouped</label>
  <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
</form>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select('svg'),
	margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var x0 = d3.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.1);

var x1 = d3.scaleBand()

var color = d3.scaleOrdinal(d3.schemeCategory10);

d3.csv("stocks.csv", function(dataset) {
	data = dataset

var pricesByDate = d3.nest()
		.key(function(d){ return d.date })
		.entries(data)

var keys = pricesByDate[0].values.map(function(d){ return d.symbol; });

var stack = d3.stack().keys(keys)

var rectGroup = g.append('g')
		.selectAll('g')
		.data(stack(clean_data))
		.enter().append('g')
			.attr('fill', function(d){ return color(d.key) });

d3.selectAll('input')
		.on('change', changed);

function changed(){
		if (this.value === 'grouped') groupedBars();
		else stackedBars();
	}

// Legende

var legendRectSize = 18;
	var legendSpacing = 4;

var legend = svg.selectAll('.legend')
		.data(keys)
	  	.enter()
	  	.append('g')
	  	.attr('class', 'legend')
	  	.attr('transform', function(d, i){
	
			var horizontal_offset = 2 * legendRectSize ;
			var vertical_offset = (i+1)  * (legendRectSize + legendSpacing) - (legendRectSize + legendSpacing);
			return 'translate(' + horizontal_offset + ', ' + (vertical_offset + 100) + ')';
	  	});

legend.append('rect')
	    .attr('width', legendRectSize)
	    .attr('height', legendRectSize)
	    .style('fill', color)
	    .style('stroke', color);

legend.append('text')
	    .attr('x', legendRectSize + legendSpacing)
	    .attr('y', legendRectSize - legendSpacing)
	    .text(function(d) { return d; });

});
</script>

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