css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              	<body>
  <h4>Catalogue Statistics</h4>
    <p>Producing seperate charts with D3 that combine into a single chart.</p>
	  <div id="chart_buttons"></div>
	  <div id="chart" style="width:95%;"></div>
</body>
            
          
!
            
              		.chart {
			margin-left: 2px;
			margin-bottom: 10px;
		}
		.label {
			font-size: 10px;
			font-family: "Times New Roman";
		}
		.chart-title {
			margin-left:0px;
			margin-bottom:5px;
			margin-top:10px;
			font-size:14px;
			font-weight: bold;
		}
		.chart rect {
			stroke-width:0;
			stroke: white;
		}
		
		.bar.creator { fill: #2E527E; }
		.bar.recipient { fill: #5A7CA5; }
		.bar.mentioned { fill: #A7BFD6; }
		
		.bar.creator.unknown { fill: #7E7E7E; }
		.bar.recipient.unknown  { fill: #A5A5A5; }
		.bar.mentioned.unknown { fill: #D6D6D6; }
		
		.bar:hover { fill: #820C00; }
		.bar.creator.unknown:hover { fill: #8E8E8E; }
		.bar.recipient.unknown:hover { fill: #B5B5B5; }
		.bar.mentioned.unknown:hover { fill: #E6E6E6; }
		
		.buttons {
			display: inline-block;
			margin-left: 20px;
			margin-bottom: 10px;
		}
		button {
			margin: 2px 0; 
			padding: 5px;
			background-color:#2c5171;
			border:none;
			color:#fff !important;	
			
			-webkit-box-shadow: 2px 2px 1px #ccc;
			-moz-box-shadow: 2px 2px 1px #ccc;
			-o-box-shadow: 2px 2px 1px #ccc;
			box-shadow: 2px 2px 1px #ccc;
			
			font: normal 100% "coustard", serif;
			
			border-right: white 1px solid;
		}
		
		.buttons button:first-child {
			-webkit-border-radius: 7px 0 0 7px
			-moz-border-radius: 7px 0 0 7px;
			-o-border-radius: 7px 0 0 7px;
			border-radius: 7px 0 0 7px;
		}
		
		.buttons button:last-child {
			-webkit-border-radius: 0 7px 7px 0;
			-moz-border-radius: 0 7px 7px 0;
			-o-border-radius: 0 7px 7px 0;
			border-radius: 0 7px 7px 0;
			border-right: none;
		}
		
		button.highlight {
			background-color: #820C00;
			
			-webkit-box-shadow: inset 2px 2px 1px #777;
			-moz-box-shadow: inset 2px 2px 1px #777;
			-o-box-shadow: inset 2px 2px 1px #777;
			box-shadow: inset 2px 2px 1px #777;
			padding: 6px 4px 4px 6px;
		}
		button:hover {
			background-color:#4c7191;
		}
		button.highlight:hover {
			background-color:#820C00;
		}
		
		button#hide_unknown {
			display: inline-block;
			margin-left: 20px;
		}
		button#show_unknown {
			display: inline-block;
			margin-right: 20px;
		}
		
		.axis path,
		.axis line {
			fill: none;
			stroke: black;
			shape-rendering: crispEdges;
		}
		.axis text {
			font-family: sans-serif;
			font-size: 11px;
		}
		.guideline { 
			stroke: #444;
			stroke-width: 0.1;
		}
            
          
!
            
              		var person_data = {9999: {'mentioned': 0, 'recipient': 193, 'creator': 167}, 1690: {'mentioned': 0, 'recipient': 1, 'creator': 0}, 1691: {'mentioned': 0, 'recipient': 2, 'creator': 0}, 1692: {'mentioned': 5, 'recipient': 0, 'creator': 0}, 1693: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1694: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1695: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1696: {'mentioned': 5, 'recipient': 0, 'creator': 0}, 1697: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1698: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1699: {'mentioned': 3, 'recipient': 1, 'creator': 0}, 1700: {'mentioned': 0, 'recipient': 3, 'creator': 2}, 1701: {'mentioned': 0, 'recipient': 4, 'creator': 0}, 1702: {'mentioned': 0, 'recipient': 12, 'creator': 1}, 1703: {'mentioned': 0, 'recipient': 25, 'creator': 3}, 1704: {'mentioned': 0, 'recipient': 37, 'creator': 21}, 1705: {'mentioned': 0, 'recipient': 49, 'creator': 20}, 1706: {'mentioned': 0, 'recipient': 80, 'creator': 33}, 1707: {'mentioned': 0, 'recipient': 81, 'creator': 43}, 1708: {'mentioned': 0, 'recipient': 116, 'creator': 58}, 1709: {'mentioned': 0, 'recipient': 113, 'creator': 54}, 1710: {'mentioned': 0, 'recipient': 91, 'creator': 35}, 1711: {'mentioned': 0, 'recipient': 146, 'creator': 58}, 1712: {'mentioned': 0, 'recipient': 110, 'creator': 79}, 1713: {'mentioned': 0, 'recipient': 110, 'creator': 20}, 1714: {'mentioned': 0, 'recipient': 113, 'creator': 4}, 1715: {'mentioned': 0, 'recipient': 187, 'creator': 27}, 1716: {'mentioned': 0, 'recipient': 196, 'creator': 76}, 1717: {'mentioned': 0, 'recipient': 122, 'creator': 96}, 1718: {'mentioned': 0, 'recipient': 152, 'creator': 65}, 1719: {'mentioned': 0, 'recipient': 151, 'creator': 77}, 1720: {'mentioned': 0, 'recipient': 189, 'creator': 42}, 1721: {'mentioned': 0, 'recipient': 122, 'creator': 16}, 1722: {'mentioned': 0, 'recipient': 152, 'creator': 30}, 1723: {'mentioned': 0, 'recipient': 115, 'creator': 24}, 1724: {'mentioned': 10, 'recipient': 102, 'creator': 49}, 1725: {'mentioned': 0, 'recipient': 115, 'creator': 40}, 1726: {'mentioned': 0, 'recipient': 88, 'creator': 33}, 1727: {'mentioned': 0, 'recipient': 134, 'creator': 61}, 1728: {'mentioned': 0, 'recipient': 75, 'creator': 56}, 1729: {'mentioned': 0, 'recipient': 153, 'creator': 58}, 1730: {'mentioned': 0, 'recipient': 114, 'creator': 29}, 1731: {'mentioned': 0, 'recipient': 126, 'creator': 32}, 1732: {'mentioned': 0, 'recipient': 109, 'creator': 39}, 1733: {'mentioned': 0, 'recipient': 97, 'creator': 32}, 1734: {'mentioned': 0, 'recipient': 92, 'creator': 29}, 1735: {'mentioned': 0, 'recipient': 37, 'creator': 13}};

		var unknownYear = "9999",
			unknownYearText = "?",
			showUnknown = false;
		
		var all_charts = ['creator','recipient','mentioned'],
			all_chart_titles = ['Letters written','Addressee of letters','Mentioned in'];
		
		var have = { creator : false , 
				recipient: false, 
				mentioned: false, 
				unknown : false };	
					
		// Switch old data format to new data format.
		// TODO: do this in Pylons template
		var person_data_keys = Object.keys(person_data);
		var person_data_without_unknown = [], year;
		
		for( var  i=0;i<person_data_keys.length;i++) {
			year = person_data_keys[i]
			if( year != unknownYear ) {
				counts = person_data[year];
				person_data_without_unknown.push( {
					'year' : year, 
					'mentioned' : counts.mentioned,
					'recipient' : counts.recipient,
					'creator' : counts.creator
				} );
			}
		}
		
		var person_data_with_unknown = person_data_without_unknown.slice(); // Shallow clone!
		
		if( unknownYear in person_data ) {
			counts = person_data[unknownYear];
			person_data_with_unknown.push( {
				'year' : unknownYear,
				'mentioned' : counts.mentioned,
				'recipient' : counts.recipient,
				'creator' : counts.creator
			
			}); // Add here to ensure it's at the end of the array.
			
			have.unknown = true;
		}
	
	// Check we have data for each graph
	for( var i=0; i<all_charts.length; i++ ) {
	
		var c = all_charts[i];
		for( var j = 0; j < person_data_with_unknown.length ; j++ ) {
			if( person_data_with_unknown[j][c] != 0 ) {
				have[c] = true;
				break;
			}
		}
	}
	
	// Specify the charts we have
	var charts = [], chart_titles = [];
	for( i=0;i < all_charts.length; i++ ) {
		if( have[all_charts[i]] ) {
			charts.push( all_charts[i] );
			chart_titles.push( all_chart_titles[i] );
		}
	}
	

	var  svg_height_base = 100,
		 svg_chart_gap = 50,
			label_space_bottom = 20,
			label_space_top = 20,
			label_space_left = 35,
			label_space_right = 15,
			label_offset = 6
			;
		
	var svg_width = d3.select( "#chart" ).style( "width" );
	svg_width = svg_width.substring( 0, svg_width.length - 2 );
	
	var chart_width = svg_width - label_space_left - label_space_right;
		
	//
	// Create the Chart
	//
	
	// Get height
	var svg_height = svg_height_base * charts.length + svg_chart_gap * ( charts.length-1 );
		
	var svgChart = d3.select( '#chart' )
				.append("svg")
				.attr("class", "chart single" )
				.attr("width", svg_width )
				.attr("height", svg_height )
				;
	
	var bars_are = "seperate"; // could be : "stacked" , "split"
	
	var axes = [];
	
	function getMax( person_data, includeUnknown ) {
	
		return d3.max( person_data, function( d ) {
			if ( !includeUnknown && d.year == unknownYear ) {
				return 0;
			}
			
			if( bars_are == "stacked" ) {
				return d.creator + d.recipient + d.mentioned;
			}
			
			return d3.max( [d.creator, d.recipient, d.mentioned ] );	
		} );

	}
	
	function getXScaleDomain( showUnknown) {
		var xDomain = [];
		for( var j=0;j<person_data_length;j++) {
			var year = person_data[j].year;
			
			if ( showUnknown || year != unknownYear ) {
				if( year == unknownYear )
					xDomain.push( unknownYearText );
				else
					xDomain.push( year );
			}
		}
		
		return xDomain;
	}
	
	function getXAxisTicks( xScaleDomain, chart_width ) {
		// Work out what years to display given space.
		var xAxisTicksDomain = xScaleDomain;
		var xAxisTicks = [];
		var widthBar = chart_width / xAxisTicksDomain.length;
		var ticks_every = 10;
		
		if( widthBar > 40 )
			ticks_every = 1;
		else if( widthBar > 20 )
			ticks_every = 3;
		else if( widthBar > 10 )
			ticks_every = 5;
		
		for( var j=0;j<xAxisTicksDomain.length;j++) {
			var val = xAxisTicksDomain[j];
			if( j % ticks_every == 0 || val == unknownYearText ) {
				xAxisTicks.push(val);
			}
		}
		
		return xAxisTicks;
	}
	
	function getYAxisTickNumber( max_value, bars_are ) {
		// Vertical lines
		var y_ticks = 3;
		if( max_value < y_ticks ) {
			y_ticks = max_value;
		}
		else if( bars_are != 'seperate' && max_value >= y_ticks * 3) {
			y_ticks *= 3;
		}
		return y_ticks;
	}
	
	function getChart( number ) {
		if( number < charts.length ) {
			return charts[number];
		}
		return "";
	}
	
	if( showUnknown ) {
		person_data = person_data_with_unknown;
	} else {
		person_data = person_data_without_unknown;
	}
	
	var max_value = getMax( person_data, showUnknown );
	
	// Make an empty copy
	var person_data_dummy = [];
	for( var  i=0; i<person_data.length; i++) {
		person_data_dummy.push( {
				'year' : person_data[i].year, 'mentioned' : 0, 'recipient' : 0, 'creator' : 0
		} );
	}
	
	person_data = person_data_dummy;	
	person_data_length = person_data.length;
	
	var beginning = true;
	
	for( var i=0; i<charts.length; i++ ) {
	
		var chart = charts[i];
		if( have[chart] ) {
			
			var chart_height = svg_height_base - label_space_top - label_space_bottom;
			var chart_x = label_space_left,
				chart_y = ( i * (svg_height_base + svg_chart_gap) ) + label_space_top;
				
				
			// Draw title
			svgChart.append("text")
				.classed( "chart-title", 1 )
				.classed( chart, 1 )
				.attr("x",chart_x + 5 )
				.attr("y",chart_y - 5 )
				.text(chart_titles[i])
				;
				
			//
			// Create Y scale
			//
			var yScale = d3.scale.linear();
			
			var stretchLowerYScale = false;
			//stretchLowerYScale = ( (max_value / 4) > 10 );		
			//if( stretchLowerYScale )
			//	yScale.domain( [0,10,max_value] ).range( [chart_height,chart_height - chart_height/4,0] ); // enhance values between 1 and 10 so we can see them easier.
			//else
			yScale.domain( [0,max_value] ).rangeRound( [chart_height,0] );
			
			//
			// Create Xscale
			//
			var xScaleDomain = getXScaleDomain( showUnknown );
			var xScale = d3.scale.ordinal()
				.domain( xScaleDomain )
				.rangeRoundBands([0, chart_width], 0.2 )
				;
				
			var y_ticks = getYAxisTickNumber( max_value, bars_are );
			
			var yTickMarks = yScale.ticks(y_ticks);
			//if( stretchLowerYScale ) {
			//	yTickMarks.push(10);
			//}
			svgChart.append( "svg:g" ).classed("guidelines", 1 ).selectAll( "line.guideline." + chart )
				.data( yTickMarks, function(d,j) { return (d==0) ? 0 : j + "-" + chart; }  )
				.enter().append("line")
					.classed( "guideline", 1 )
					.classed( chart, 1 )
					.attr("x1", chart_x )
					.attr("x2", chart_x + chart_width )
					.attr("y1", function(d) { return chart_y + yScale(d); })
					.attr("y2", function(d) { return chart_y + yScale(d); })
					;
			
			//
			// Axes
			//
			var xAxisTicks = getXAxisTicks( xScale.domain(), chart_width );
			var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom")
				.tickValues( xAxisTicks )
				;
			
			var yAxis = d3.svg.axis()
				.scale( yScale )
				.orient( "left" )
				.tickFormat( d3.format("f") )
				.ticks( y_ticks )
				.tickSize( 4,2,0 );
				;
				
			if( bars_are != 'seperate' ) {
				yAxis.tickSubdivide( 4 );
			}
			else {
				yAxis.tickSubdivide( 0 )
			}
			
			axes[chart] = {
				x: xAxis,
				y: yAxis
			};
			
			svgChart.append( "svg:g" )
				.classed( "xaxis", 1 ).classed( "axis", 1 ).classed("label", 1 ).classed( chart, 1 )
				.attr( "transform", "translate(" + chart_x + "," + (chart_y + chart_height) + ")" )
				.call( xAxis )
				;
				
			svgChart.append( "svg:g" )
				.classed( "yaxis",1 ).classed( "axis", 1 ).classed( "label", 1 ).classed( chart, 1 )
				.attr( "transform", "translate(" + chart_x + "," + chart_y + ")" )
				.call( yAxis )
				;
			
			}
		}
	
	function updateCharts( duration, delay ) {
		
		person_data = ( showUnknown ) ? person_data_with_unknown : person_data_without_unknown;			
		person_data_length = person_data.length;
		
		max_value = getMax( person_data, showUnknown, chart );
				
		var chart_height = svg_height_base - label_space_top - label_space_bottom;
		var chart_x = label_space_left;
		
		if( bars_are == "stacked" || bars_are == "split" ) {
			chart_height = svg_height - label_space_top - label_space_bottom;
		}
					
		//
		// Update Y scale
		//
		//stretchLowerYScale = ( (max_value / 4) > 10 );
		//if( stretchLowerYScale )
		//	yScale.domain( [0,10,max_value] ).range( [chart_height,chart_height - chart_height/4,0] ); // enhance values between 1 and 10 so we can see them easier.
		//else
		yScale.domain( [0,max_value] ).range( [chart_height,0] );
		
		
		//
		// Update Xscale
		//
		var xScaleDomain = getXScaleDomain( showUnknown );
		xScale.domain( xScaleDomain );
		
		//
		// Axes
		//
		
		// Work out what years to display given space.
		var xAxisTicks = getXAxisTicks( xScale.domain(), chart_width );
		
		var y_ticks = getYAxisTickNumber( max_value, bars_are )
		
		// Update axes.
		for( j = 0; j < charts.length; j++ ) {
			var chart = charts[j];
			var xAxis = axes[chart].x;
			var yAxis = axes[chart].y;
		
			xAxis.scale(xScale)
				.tickValues( xAxisTicks )
				;
			
			yAxis.scale(yScale)
				.ticks(y_ticks)
				;
			
			if( bars_are != 'seperate' ) {
				yAxis.tickSubdivide(4);
			}
			else {
				yAxis.tickSubdivide(0)
			}
			
			svgChart.select( ".xaxis." + chart )
				.transition().duration( duration )
				.call(xAxis)
				;
					
			svgChart.select( ".yaxis." + chart )
				.transition().duration( duration )
				.call(yAxis)
				;
		}
		
		// Vertical lines
		var yTickMarks = yScale.ticks(y_ticks);
		//if( stretchLowerYScale ) {
		//	yTickMarks.push(10);
		//}
	
		var guidelines = svgChart.select( "g.guidelines" ).selectAll( "line.guideline." + getChart( 0 ) )
			.data( yTickMarks , function(d,i) { return (d==0) ? 0 : i + "-" + getChart( 0 ); } );
			
		guidelines.enter().append( "line" )
				.classed("guideline", 1 )
				.classed( getChart( 0 ), 1 )
				.attr("x1", chart_x)
				.attr("x2", chart_x + chart_width )
				.attr("y1", chart_y )
				.attr("y2", chart_y )
				;
				
		guidelines.exit().remove();
		
		guidelines
			.transition().duration( duration )
			.attr( "y1", function(d) { return label_space_top + yScale(d); } )
			.attr( "y2", function(d) { return label_space_top + yScale(d); } )
			;
		
		function fade( item, fade_in ) {
			if( fade_in ) {
				svgChart.selectAll( item ).transition().duration( duration/2 ).delay( 3*duration/2).style( 'opacity','1' );
			} else {
				svgChart.selectAll( item ).transition().duration( 3*duration/2 ).style( 'opacity', '0' );
			}
		}
			
		if( bars_are == "stacked" || bars_are == "split" ) {
			for ( i = 0; i < charts.length-1; i++ ) { // first ones
				fade( ".xaxis." + charts[i], false );
			}
			
			for ( i = 1; i < charts.length; i++ ) { // last ones
				fade( ".yaxis." + charts[i] , false );
				fade( ".guideline." + charts[i], false );
				fade( ".chart-title." + charts[i], false );
			}
			
			var title = "";
			if( charts.length == 3 )
				title = chart_titles[0] + ", " + chart_titles[1] + " and " + chart_titles[2];
			else if ( charts.length == 2 )
				title = chart_titles[0] + " and " + chart_titles[1];
			else if ( charts.length == 1 )
				title = chart_titles[0];
			
			svgChart.select( ".chart-title." + getChart( 0 ) )
				.text( title )
			
		}
		if( bars_are == "seperate" ) {
			
			for ( i = 0; i < charts.length-1; i++ ) {
				fade( ".xaxis." + charts[i], true );
			}
			
			for ( i = 1; i < charts.length; i++ ) {
				fade( ".yaxis." + charts[i] , true );
				fade( ".guideline." + charts[i], true );
				fade( ".chart-title." + charts[i], true );
			}
			
			if( charts.length > 0 ) {
				svgChart.select( ".chart-title." + getChart( 0 ) )
					.text( chart_titles[0] )
			}
		}
		
		for( var i=0; i<charts.length; i++ ) {
		
			var chart = charts[i];
			if( have[chart] ) {
			
				var chart_y = ( i * (svg_height_base + svg_chart_gap) ) + label_space_top;
				if( bars_are == "stacked" || bars_are == "split" ) {
					chart_y = label_space_top;
				}
				
				//
				// Bars
				//
				var bars = svgChart.selectAll("rect." + chart ).data(person_data, function(d) { 
					return d.year + "-" + chart; 
				});
				
				// Create any new bars
				bars.enter().append("rect")
					.classed( "bar" , 1 )
					.classed( chart , 1 )
					.attr("x", chart_x + chart_width + 2 ) // hide off right
					.attr("y", chart_y + chart_height )
					.attr("width", xScale.rangeBand() )
					.attr("height", 0 )
					.classed( "unknown", function (d) { return d.year == unknownYear; } )
					;
				
				// Remove unwanted bars
				bars.exit()
					.transition().duration( duration )
					.attr("x", chart_x + chart_width + 2 ) // hide off right
					.remove()
					;
				
				bars.append("title")
						.text(function(d) {
							var year = (d.year != unknownYear) ? d.year : "Years unknown" ;
							return year + ": " + d[chart] + " " + chart_titles[i];
						})
					;

				if( beginning ) {
					// when first open we don't want things to move in from right.
					bars.attr("x", function( d, i ) { return chart_x + xScale(i); });
				}
				
				// Update all bars
				bars.transition().duration( duration ).delay( delay )
					.attr("x", function( d, i ) {
						var offset = 0;
						if( bars_are == "split" ) {
							if( chart == getChart( 1 ) )
								offset = xScale.rangeBand() / charts.length;
							else if( chart == getChart( 2 ) )
								offset = xScale.rangeBand() * 2 / charts.length ;
						}
								
						return chart_x + xScale(i) + offset;
					} )
					.attr("y", function( d ) {
						var value = d[chart]
						
						if( bars_are == "stacked" ) {
							if( chart == getChart( 0 ) ) {
								for( j=1;j<charts.length;j++) {
									value += d[charts[j]];
                }
              }
							else if( chart == getChart( 1 ) ) {
								for( j=2;j<charts.length;j++) {
									value += d[charts[j]];
                }
              }
						}
						
						return chart_y + yScale(value); 
					} )
					.attr("width", function() {
						if( bars_are == "split" )
							return xScale.rangeBand() / charts.length;
						
						return xScale.rangeBand();
					})
					.attr("height", function(d) {
						return chart_height - yScale(d[chart]); 
					} )
					;
				
				}
									
			}
			
			beginning = false;
		}

	
	function hide( selectors, hide ) {
		for( var i=0;i<selectors.length;i++) {
			d3.select(selectors[i]).style("display", (hide) ? "none" : "inline-block" );
		}
	}
	
	function highlight( selectors, highlight ) {
		for( var i=0;i<selectors.length;i++) {
			d3.select(selectors[i]).classed( "highlight", highlight );
		}
	}
	
	function unknownShow( show ) {
		if( show ) {
			highlight( ["#show_unknown"],true );
			highlight( ["#hide_unknown"],false );
			
			showUnknown = true;
			
		} else {
			highlight( ["#hide_unknown"],true );
			highlight( ["#show_unknown"],false );
			
			showUnknown = false;
		}
		
		updateCharts( 1000, function (d,i) {
				return (person_data_length - i - 1) * (1200 / person_data_length);
			} );
	}
	
	function switchBars( bars_should_be ) {
		bars_are = bars_should_be;
		
		if( bars_are == "seperate" ) {
			highlight( ["#bars_seperate"],true );
			highlight( ["#bars_stacked","#bars_split"], false );
		}
		else if( bars_are == "stacked" ) {
			highlight( ["#bars_stacked"],true );
			highlight( ["#bars_seperate","#bars_split"],false );
		}
		else { // ( bars_are == "split" )
			highlight( ["#bars_split"],true );
			highlight( ["#bars_seperate","#bars_stacked"],false );
		}
		
		updateCharts( 1000, function (d,i) {
				return (person_data_length - i - 1) * (1200 / person_data_length);
		} );
	}
		
	if( charts.length > 0 ) {
		var buttons = "";
		
		if( have.unknown ) {
			buttons += '<div class="buttons">';
			buttons += '<button id="hide_unknown" class="highlight" onclick="unknownShow(false);">Hide unknown</button>';
			buttons += '<button id="show_unknown"  onclick="unknownShow(true);">Show unknown</button>';
			buttons += '</div>';
		}
		
		if( charts.length > 1 ) {
			buttons += '<div class="buttons">';
			buttons += '<button class="highlight" id="bars_seperate" onclick="switchBars(\'seperate\');">Seperate charts</button>';
			buttons += '<button id="bars_stacked" onclick="switchBars(\'stacked\');">Stack bars</button>';
			buttons += '<button id="bars_split" onclick="switchBars(\'split\');">Split bars</button>';
			buttons += '</div>';
		}
		
		if( buttons != "" ) {
			d3.select('#chart_buttons').html(buttons);
		}
		
		updateCharts( 500, function (d,i) {
				return i * (1200/person_data_length);
			} ) ;
	}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console