D3 Brush and Linking

This is a step by step example on how to do brush and linking on d3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>D3 Brush and Linking tutorial</title>

<link
			rel="stylesheet"
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
			integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
			crossorigin="anonymous"
		/>

<link
			rel="stylesheet"
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
			integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
			crossorigin="anonymous"
		/>

<div class="col-xs-12 col-md-4">
					<h2>Car Types</h2>
					<div class="barChart" id="carTypes"></div>
				</div>

<div class="col-xs-12 col-md-8">
					<h2>Gates</h2>
					<div class="barChart" id="gates"></div>
				</div>
			</div>
		</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
		<script src="https://d3js.org/d3.v4.min.js"></script>

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js

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