Time series visualization

Four different time series visualizations: scatterplot, line chart, stackedgraph, and streamgraph. Time series show the price history of the cryptocurrency since 2017.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.visualization-type{
		margin-top:5px;
		margin-left:10px;
	}
	
	.line{
		stroke-linejoin: round;
		stroke-linecap: round;
		stroke-width: 1.5px;
		fill: none;
	}
	
	.text{
		font: 14px sans-serif;
	}
	
</style>
</head>
<body>
	<div>
		<h4 style="display: inline;" class ="visualization-type">Visualization type:</h4>		
		<select id="visualizationType" class ="visualization-type">
			<option value = "scatterplot">Scatterplot</option>
			<option value = "line-chart" selected>Line chart</option>
			<option value = "stackedgraph">Stackedgraph</option>
			<option value = "streamgraph">Streamgraph</option>
		</select>
	</div>
	
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

//line
		var line = d3.line()
		    .x(function(d) {return x(d.date); })
		    .y(function(d) {return y(d.price); });			
				
		var cryptoPrice = [];

//load the data
		d3.csv("data.csv", type, function(error, data){
			if(error) throw error;
			
			cryptoPrice = data.columns.slice(1).map(function(key){
				return {
					key:key,
					values: data.map(function(d) {
				        return {date: d.date, price: d[key]};
				      })
				};
			});
			
			//get keys to stack
			var keys = data.columns.slice(1);
			//domain time dimension
			x.domain(d3.extent(data,function(d){return d.date;})).nice();
			//domain quantitative dimension
			y.domain([
	          d3.min(cryptoPrice, function(c){return d3.min(c.values,function(d){return d.price;});}),
	          d3.max(cryptoPrice, function(c){return d3.max(c.values,function(d){return d.price;});})
			]).nice();
					
			//domain color dimension
			color.domain(keys);
			
			//Join new data with old elements
			g.selectAll("path")
					.data(cryptoPrice, function(d){return d.key;})
				.enter().append("path")
					.attr("class","line")
			   		.attr("d",function(d){ return line(d.values);})
			   		.attr("stroke",function(d){return color(d.key);});
			
			//Enter legend
			g.selectAll("text")
				.data(cryptoPrice, function(d){return d.key;})
				.enter().append("text")
			      .datum(function(d) {return {key: d.key, value: d.values[0]}; })
			      .attr("class","text")
			      .attr("y",function(d){return y(d.value.price)})
			      .attr("x", width + 2)
			      .attr("dy", "0.35em")
			      .text(function(d) {return d.key; });
			
			
 			l.append("g")
			    .attr("class", "axis axis--x")
			    .attr("transform", "translate(0," + height + ")")
			    .call(d3.axisBottom(x));
			
			l.append("g")
			      .attr("class", "axis axis--y")
			      .call(d3.axisLeft(y).ticks(10))
			  .append("text")
			      .attr("transform", "rotate(-90)")
			      .attr("y", 6)
			      .attr("dy", "0.71em")
			      .attr("fill", "#000")
			      .text("Price, $");
			 
						
			//Update Visualization layout			
			d3.select("#visualizationType").on("change",function(){
				
				 cryptoPrice.forEach(function(d,i) {
					 g.selectAll("#scatter-"+i).data([]).exit().remove();
				 }); 
				
				 d3.select(".axis--y").style("display","inline");
				 
				switch(this.value){
					case "line-chart":
						//update the Y domain
						y.domain([
				          d3.min(cryptoPrice, function(c){return d3.min(c.values,function(d){return d.price;});}),
				          d3.max(cryptoPrice, function(c){return d3.max(c.values,function(d){return d.price;});})
						]).nice();
						d3.select(".axis--y").transition().call(d3.axisLeft(y));
						
						//Join data
						var cryptoLine = g.selectAll("path")
											.data(cryptoPrice, function(d){return d.key;});
						
						//Update
						cryptoLine.attr("class","line")
									.style("fill-opacity", 1e-6)
								.transition()
								.duration(850)
									.style("fill-opacity", 1)
									.attr("d",function(d){return line(d.values);})
						
						//Enter
						cryptoLine.enter().append("path")
							.transition()
							.duration(850)
								.attr("class","line")
								.attr("d",function(d){return line(d.values);})
								.attr("stroke",function(d){return color(d.key);});
						
						//Exit
						cryptoLine.exit().remove();
						
						//update legend position
						g.selectAll("text")
							.data(cryptoPrice)
							.datum(function(d) {return {key: d.key, value: d.values[0]}; })
							.transition()
								.duration(850)
								.attr("y", function(d) {return y(d.value.price); })
						break;
						
						
					case "scatterplot":
						//update the Y domain
						y.domain([
				          d3.min(cryptoPrice, function(c){return d3.min(c.values,function(d){return d.price;});}),
				          d3.max(cryptoPrice, function(c){return d3.max(c.values,function(d){return d.price;});})
						]).nice();
						d3.select(".axis--y").transition().call(d3.axisLeft(y));
						
						//remove the line or layer path
						g.selectAll("path").data([]).exit().remove();
						
						// add the scatterplot value
						cryptoPrice.forEach(function(d,i) {
							g.append("g")
							 	.attr("id",function(d){return "scatter-"+i})
							 	.selectAll("dot")
							 	.data(d.values)
							 	.enter().append("circle")
							 	.attr("class", "dot")
					            .attr("r", 2)
					            .attr("cx", function (d) {return x(d.date);})
					            .attr("cy", function (d) {return y(d.price);})
					            .style("fill", function(d) {return color(cryptoPrice[i].key);});
						 });
						
						//update legend position
						g.selectAll("text")
							.data(cryptoPrice)
							.datum(function(d) {return {key: d.key, value: d.values[0]}; })
							.transition()
								.duration(850)
								.attr("y", function(d) {return y(d.value.price); })
						
						break;
						
					case "stackedgraph":
						stack.offset(d3.stackOffsetNone);
						var dataStacked = stack.keys(keys)(data);

//update the Y domain
						y.domain([0,d3.max(data,function(d){return d.total;})]).nice();
						d3.select(".axis--y").transition().call(d3.axisLeft(y));
						
						//Join data
						var cryptoLayer = g.selectAll("path")
											.data(dataStacked, function(d){return d.key;});
						
						//Update
						cryptoLayer.attr("class","layer")
									.style("fill-opacity", 1e-6)
								.transition()
								.duration(850)
									.attr("d",area)
									.style("fill-opacity", 1)
									.attr("fill",function(d){return color(d.key);})
									.attr("stroke",function(d){return color(d.key);});
						
						//Enter
						cryptoLayer.enter().append("path")
							.transition()
							.duration(850)
								.attr("class","layer")
								.attr("d",area)
								.attr("fill",function(d){return color(d.key);})
								.attr("stroke",function(d){return color(d.key);});
						
						//Exit
						cryptoLayer.exit().remove();
						
						//update the legends position
						g.selectAll("text")
						 		.data(dataStacked)
								.datum(function(d) {return {key: d.key, value: (d[0][0] + d[0][1])/2}; })
							.transition()
							.duration(850)
								.attr("y", function(d) {return y(d.value); })
								.attr("x", width + 2)
								.attr("dy", "0.35em");
						 
						break;
				
				
				case "streamgraph":
					stack.offset(d3.stackOffsetWiggle);
					var dataStacked = stack.keys(keys)(data);
					
					//update the Y domain
					y.domain([
					          d3.min(dataStacked, function(c){return d3.min(c, function(d) { return d[0]; });}), 
					          d3.max(dataStacked, function(c){return d3.max(c, function(d) { return d[1]; });})
					]).nice();
					
					d3.select(".axis--y").style("display","none");
					
					//Join data
					var cryptoLayer = g.selectAll("path")
										.data(dataStacked, function(d){return d.key;});
					
					//Update
					cryptoLayer.attr("class","layer")
								.style("fill-opacity", 1e-6)
							.transition()
							.duration(850)
								.attr("d",area)
								.style("fill-opacity", 1)
								.attr("fill",function(d){return color(d.key);})
								.attr("stroke",function(d){return color(d.key);});
					
					//Enter
					cryptoLayer.enter().append("path")
						.transition()
						.duration(850)
							.attr("class","layer")
							.attr("d",area)
							.attr("fill",function(d){return color(d.key);})
							.attr("stroke",function(d){return color(d.key);});
					
					//Exit
					cryptoLayer.exit().remove();
					
					//update the legends position
					g.selectAll("text")
					 		.data(dataStacked)
							.datum(function(d) {return {key: d.key, value: (d[0][0] + d[0][1])/2}; })
						.transition()
						.duration(850)
							.attr("y", function(d) {return y(d.value); })
							.attr("x", width + 2)
							.attr("dy", "0.35em");
					 
					break;
				}
			
			});
		})
	
		function type(d,i,columns){
			d.date = parseTime(d.date);	
			for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
			  d.total = t;
			  return d;
		}
		
	</script>

</body>

</html>

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