Ledragon/app.js

## app.js
(function () {
    var width = 800;
    var height = 450;
    var histogram = new app.histogram('histogram', width, height);
    var map = new app.map('map', width, height, 'https://cdn.rawgit.com/Ledragon/MakeOverMonday22/master/data/world.json');
    var perYear = new app.viewPerYearOfBirth('perYear', width, height);
    var perIndustry = new app.womenPerIndustry('other', width, height);
    var brush = new app.brush('brush', 1606, 50);
    d3.csv('https://cdn.rawgit.com/Ledragon/MakeOverMonday22/master/data/History%20of%20Famous%20People.csv', function (error, data) {
        if (error) {
            console.error(error);
        } else {
            brush.update(data);
            var filtered = data;//.filter(d => +d.Birthyear > 1500);
            refresh(filtered);
            brush.dispatch().on('brushed', extent => {
                var filtered = data.filter(function (d) {
                    return +d.Birthyear >= extent[0] && +d.Birthyear <= extent[1];
                }); //.filter(d => +d.Birthyear > 1500);
                refresh(filtered);
            })
        }
    });

    function refresh(data) {
        histogram.update(data);
        map.update(data);
        perIndustry.update(data);
        perYear.update(data);
    }
} ());

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Make Over monday 22</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>

<body>
    <!--<svg width="800" height="600" id="container" style="border:1px black solid">

    </svg>-->
    <svg width="800" height="600" id="histogram" style="border:1px black solid">

    </svg>
    <svg width="800" height="600" id="map" style="border:1px black solid">

    </svg>
    </svg>
    <svg width="800" height="600" id="other" style="border:1px black solid">

    </svg>
    <svg width="800" height="600" id="perYear" style="border:1px black solid">

    </svg>
    <svg width="800" height="600" id="brush" style="border:1px black solid">

        </svg>
    <script src="https://cdn.rawgit.com/Ledragon/MakeOverMonday22/c62c822e894a505dfd4a718aa7cd738778a4d0f0/dist/charts.js"></script>
    <script src="app.js">    </script>
</body>

</html>

## styles.css
body{
    /*font-family: 'Raleway', sans-serif;*/
    font-family: 'Karla', sans-serif;
}

.axis .tick text{
    font-size:.8em;
}
.tick line{
    stroke:darkgray;
}
.domain{
    fill:transparent;
    stroke:darkgray;
}
.title{
    text-anchor: middle;
    font-size: 1.2em;
}
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
	(function () {
	var width = 800;
	var height = 450;
	var histogram = new app.histogram('histogram', width, height);
	var map = new app.map('map', width, height, 'https://cdn.rawgit.com/Ledragon/MakeOverMonday22/master/data/world.json');
	var perYear = new app.viewPerYearOfBirth('perYear', width, height);
	var perIndustry = new app.womenPerIndustry('other', width, height);
	var brush = new app.brush('brush', 1606, 50);
	d3.csv('https://cdn.rawgit.com/Ledragon/MakeOverMonday22/master/data/History%20of%20Famous%20People.csv', function (error, data) {
	if (error) {
	console.error(error);
	} else {
	brush.update(data);
	var filtered = data;//.filter(d => +d.Birthyear > 1500);
	refresh(filtered);
	brush.dispatch().on('brushed', extent => {
	var filtered = data.filter(function (d) {
	return +d.Birthyear >= extent[0] && +d.Birthyear <= extent[1];
	}); //.filter(d => +d.Birthyear > 1500);
	refresh(filtered);
	})
	}
	});

	function refresh(data) {
	histogram.update(data);
	map.update(data);
	perIndustry.update(data);
	perYear.update(data);
	}
	} ());
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Make Over monday 22</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<link rel="stylesheet" href="styles.css">
	<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
	</head>
	<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>

	<body>
	<!--<svg width="800" height="600" id="container" style="border:1px black solid">

	</svg>-->
	<svg width="800" height="600" id="histogram" style="border:1px black solid">

	</svg>
	<svg width="800" height="600" id="map" style="border:1px black solid">

	</svg>
	</svg>
	<svg width="800" height="600" id="other" style="border:1px black solid">

	</svg>
	<svg width="800" height="600" id="perYear" style="border:1px black solid">

	</svg>
	<svg width="800" height="600" id="brush" style="border:1px black solid">

	</svg>
	<script src="https://cdn.rawgit.com/Ledragon/MakeOverMonday22/c62c822e894a505dfd4a718aa7cd738778a4d0f0/dist/charts.js"></script>
	<script src="app.js"> </script>
	</body>

	</html>
	body{
	/font-family: 'Raleway', sans-serif;/
	font-family: 'Karla', sans-serif;
	}

	.axis .tick text{
	font-size:.8em;
	}
	.tick line{
	stroke:darkgray;
	}
	.domain{
	fill:transparent;
	stroke:darkgray;
	}
	.title{
	text-anchor: middle;
	font-size: 1.2em;
	}
	.brush .extent {
	stroke: #fff;
	fill-opacity: .125;
	shape-rendering: crispEdges;
	}