vidyakesavan/diversity_data_2016_v2.csv

## diversity_data_2016_v2.csv

          
            company
            gender
            American_Indian_Alaskan_Native
            Asian
            Black_or_African_American
            Latino
            Native_Hawaiian_or_Pacific_Islander
            Two_or_more_races
            White
            Total

            
              1
              23andMe
              Female
              0.3
              13.1
              1
              3.7
              0.3
              3.4
              28.3
              50

            
              2
              23andMe
              Male
              0.3
              10.4
              0.7
              2.7
              0
              1.3
              34.3
              50

            
              3
              Adobe
              Female
              0.1
              10.1
              0.5
              2.3
              0.1
              0.4
              18.7
              32

            
              4
              Adobe
              Male
              0.1
              15.7
              1.1
              2.4
              0.3
              0.6
              47.7
              68

            
              5
              Airbnb
              Female
              0.1
              11.7
              1.3
              3.5
              0.1
              1.2
              24.9
              43

            
              6
              Airbnb
              Male
              0.1
              18.7
              1.6
              2.9
              0.3
              1.8
              31.7
              57

            
              7
              Apple
              Female
              0.1
              5.9
              3.8
              4.1
              0.1
              0.9
              15.8
              31

            
              8
              Apple
              Male
              0.2
              13.6
              5.3
              8.2
              0.3
              1.3
              40.3
              69

            
              9
              Cisco
              Female
              0
              10
              1.2
              1.7
              0
              0.3
              12.9
              26

            
              10
              Cisco
              Male
              0.2
              25.9
              2.2
              3.4
              0.1
              0.6
              41.3
              74

            
              11
              eBay
              Female
              0.1
              12.5
              1
              2
              0.3
              0.4
              19.6
              36

            
              12
              eBay
              Male
              0.1
              26.8
              1.1
              2.3
              0.2
              0.4
              33.1
              64

            
              13
              Facebook
              Female
              0.1
              12.5
              1
              1.9
              0.2
              1
              15.1
              32

            
              14
              Facebook
              Male
              0.1
              25.9
              1.4
              2.6
              0.1
              1.7
              36.6
              68

            
              15
              Google
              Female
              0
              10.8
              1
              1.7
              0.1
              0.7
              14.9
              29

            
              16
              Google
              Male
              0.1
              22.7
              1.4
              3.5
              0.1
              1.1
              42
              71

            
              17
              HP Inc.
              Female
              0.1
              4.4
              1.4
              2.6
              0.1
              0.4
              22
              31

            
              18
              HP Inc.
              Male
              0.3
              7.9
              2.5
              5.3
              0.1
              1
              51.9
              69

            
              19
              HPE
              Female
              0.2
              4
              3.4
              1.9
              0.1
              0.4
              23.2
              33

            
              20
              HPE
              Male
              0.2
              8.8
              3.8
              3.8
              0.1
              0.7
              49.5
              67

            
              21
              Intel
              Female
              0.2
              10.9
              1
              2.1
              0.4
              0.4
              11
              26

            
              22
              Intel
              Male
              0.4
              25
              2.9
              6
              0.1
              0.9
              38.7
              74

            
              23
              Intuit
              Female
              0.5
              12.3
              2.2
              3.7
              0.2
              1.2
              23
              43

            
              24
              Intuit
              Male
              0.4
              17.6
              1.8
              4.7
              0.2
              1
              31.2
              57

            
              25
              LinkedIn
              Female
              0.1
              13
              1.1
              2.2
              0
              0.9
              22.9
              40

            
              26
              LinkedIn
              Male
              0.1
              23.7
              1.5
              2.5
              0.1
              1.2
              30.6
              60

            
              27
              Lyft
              Female
              0.3
              6.3
              3.8
              3.1
              0.1
              1.4
              27.6
              43

            
              28
              Lyft
              Male
              0.3
              12.1
              2.9
              3.9
              0.2
              1.5
              36.5
              57

            
              29
              MobileIron
              Female
              0
              16.6
              0.8
              1.6
              0.4
              0.6
              10.9
              31

            
              30
              MobileIron
              Male
              0.2
              21.1
              1
              4.2
              0
              1.2
              41.5
              69

            
              31
              Nvidia
              Female
              0.1
              11.1
              0.3
              0.8
              0.1
              0
              4.8
              17

            
              32
              Nvidia
              Male
              0.1
              41
              0.7
              2.5
              0.2
              0.3
              38.1
              83

            
              33
              Pinterest
              Female
              0.2
              14.6
              0.8
              1.7
              0
              1.6
              24.2
              43

            
              34
              Pinterest
              Male
              0.2
              25
              1.3
              2
              0
              2.3
              26.1
              57

            
              35
              Salesforce
              Female
              0
              8.1
              0.8
              1.4
              0.1
              0.9
              20.5
              32

            
              36
              Salesforce
              Male
              0.1
              16.2
              1.5
              2.6
              0.2
              1.5
              46
              68

            
              37
              Square
              Female
              0.1
              9.2
              2
              2.6
              0.2
              1.5
              19
              35

            
              38
              Square
              Male
              0.2
              15.2
              2.9
              3.3
              0.1
              2.5
              41.2
              65

            
              39
              Twitter
              Female
              0.2
              10.9
              0.9
              1.8
              0.2
              1.1
              20.3
              35

            
              40
              Twitter
              Male
              0.1
              20.6
              1.6
              2.7
              0.2
              1.1
              38.3
              65

            
              41
              Uber
              Female
              0.1
              8.8
              2.5
              1.8
              0.1
              1.2
              15.1
              30

            
              42
              Uber
              Male
              0.1
              24.9
              2.3
              3
              0.2
              1.9
              38.1
              70

            
              43
              View
              Female
              0
              6.5
              1.3
              0.4
              0
              0.2
              8.5
              17

            
              44
              View
              Male
              0.4
              14.1
              14.1
              3.9
              0.2
              2.2
              48
              83

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		body{
			font:10px Helvetica,Arial,sans-serif;
		}
		a{
			color: #821122;
		}
		#header{
			border-bottom: 1px solid #ccc;
			margin: 20px 26px 20px 20px;
		}
		#header h1{
			font-size: 2.4em;
			font-family: Georgia, Palatino, serif;
			line-height: 1.4em;
		}
		#header p{
			font-size: 1.3em;
			font-family: Georgia, Palatino, serif;
			font-height: normal;
		}
		#explain{
			margin: 0 0 0 20px;
		}

		#explain h3{
			font-size: 1.5em;
			margin: 0 0 0.5em 0;
			padding: 0;
		}
		#explain p{
			font-size: 1.2em;
			line-height: 1.4em;
			color: #717171;
			margin-top: 0;

		}
		#filters{
			margin: 0 24px 10px 16px;
			float:right;
		}
		#filters table{
			border-collapse: collapse;
			border-top: 1px solid #ccc;
		}
		#filters table td{
			padding: 0; margin: 0;
		}

		#filters a{
			display:block;
			padding: 2px 4px;
			font-size: 1.1em;
			color: #808B96;
			background: #EBF5FB;
			cursor: pointer;
			border-left: 1px solid #CCCCCC;
			border-bottom: 1px solid #CCCCCC;
			border-right: 1px solid #CCCCCC;
			overflow: hidden;
		}
		#filters a:hover{
			text-decoration: underline;
		}
		#filters a.current{
			background: #fff; color: #000;
			font-weight: bold;
		}
		#filters a.current:hover{
			text-decoration: none;
		}
		.left{
			float:left;
		}
		.clr{
			clear: both;
		}


		.bar {
		fill: #85C1E9;
		}

		.xaxis path{
		display: none;
		}
		.xaxis, text{
			font-size: 1em;
			fill:#888;
		}
		.text{
			font-size: 0.9em;
			fill:#888;
		}

		.label{
			fill: black;
			font-weight: bold;
			font-size: 1.1em;
		}
		svg {
  			border:1px solid #F1F1F1;
		}
		.clr{
			clear: both;
		}


	</style>
</head>

<body>
	<div id = "header">
		<h2> How Diverse Are The Silicon Valley Technology Companies? </h2>
		<p> Reporters from the Center for Investigative Reporting sought employee diversity data from 200+ technology companies in San Fransisco. 23 companies shared the data. The charts below show the race and gender diversity for each company.
		<p> Source: <a href = https://github.com/cirlabs/Silicon-Valley-Diversity-Data >Reveal from The Center for Investigative Reporting </a></p>
	</div>

	<div id = "explain" class="left">
		<h3></h3>
		<p></p>
	</div>

	<div id = "filters">
		<table class = "left">
			<tbody>
				<tr>
					<td>
						<a id = "Total" class>Total	</a>
					</td>
				</tr>
				<tr>
					<td>
						<a id = "American_Indian_Alaskan_Native" class>American Indian or Alaskan Native</a>
					</td>
				</tr>
				<tr>
					<td>
						<a id = "Asian" class>Asian</a>
					</td>
				</tr>
				<tr>
					<td>
						<a id = "Black_or_African_American" class>Black or African American</a>
					</td>
				</tr>
			</tbody>
		</table>

		<table class = "left">
			<tbody>
				<tr>
					<td>
						<a id = "Latino" class>Latino</a>
					</td>
				</tr>
				<tr>
					<td>
						<a id = "Native_Hawaiian_or_Pacific_Islander" class>Native Hawaiian or Pacific Islander</a>
					</td>
				</tr>
				<tr>
					<td>
						<a id = "Two_or_more_races" class>Two or more races</a>
					</td>
				</tr>
				<tr>
					<td>
						<a id = "White" class>White</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class = "clr">
	</div>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript">

		var explain = {

			"Total" : "Most technology companies employ twice as many males as females, exceptions being 23andMe, Airbnb, Intuit, LinkedIn, Lyft and Pinterest.",
			"American_Indian_Alaskan_Native" : "Roughly 1% of American population is American Indian or Alaskan Native. Most technology compaines employ around 0.1%",
			"Asian" : "Though only 5% of American population is Asian, they contribute to a sizeable percentage of technology workforce in Silicon Valley.",
			"Black_or_African_American" : "African Americans make up 13% of the American population and less than 5% of tech employees. View is an exception with about 15%.",
			"Latino" : "Latinos account for 16% of population and less than 10% in most technology companies.",
			"Native_Hawaiian_or_Pacific_Islander" : "They account for only 0.2% of the American population",
			"Two_or_more_races" : "Around 2% of the American population is of two or more races",
			"White" : "Whites contribute to 50% of the workforce in most companies. The gender gap is noticeable here."

		};

		var companies = [];

		var fullwidth = 200,
		fullheight = 150;

		var margin =  {top: 30, right: 15, bottom: 20, left: 45},
			width = fullwidth - margin.left - margin.right
			height = fullheight - margin.top - margin.bottom;

		var x = d3.scale.ordinal()
				.rangeRoundBands([0,width],0.25);

		var y = d3.scale.linear()
				.range([height,0]);

		var xAxis = d3.svg.axis()
					.scale(x)
					.orient("bottom");

		var yAxis = d3.svg.axis()
					.scale(y)
					.ticks(2)
					.outerTickSize(0)
					.innerTickSize(0)
					.tickFormat(function(d) {return d+ "%"})
					.orient("left");


		var current = "Total";


		d3.select("#explain h3").text(current);

		d3.select("#explain p").html(explain[current]);


		d3.csv("diversity_data_2016_v2.csv", typeFix, function(error, data){


			console.log("data after load", data);

			x.domain(data.map(function (d) {return d.gender}));
			//y.domain([0, d3.max(data, function(d) { return +d[current];})]);
			y.domain([0,100]);


			//nest data by company

			companies = d3.nest()
					.key(function(d){
						return d.company;
					})
					.entries(data);

			//add an svg element for each company


			var svg = d3.select("body")
						.selectAll("svg")
						.data(companies)
						.enter()
						.append("svg")
						.attr("width", fullwidth)
						.attr("height", fullheight)
						.append("g")
						.attr("transform", "translate(" + margin.left + "," +
							margin.top + ")")
						.each(multiple);


			function multiple(company){

			var localsvg = d3.select(this);

			localsvg.append("g")
				.attr("class", "xaxis")
				.attr("transform", "translate(0," +height+ ")")
				.call(xAxis);


			localsvg.append("g")
				//.attr("class","y axis")
				//.call(yAxis)
				.append("text")
				.attr("class","label")
				.attr("x", (width/2))
				.attr("y", -8)
				.style("text-anchor", "middle")
				.text(function (d) { return d.key});

			localsvg.selectAll("rect")
				.data(function(d) { return d.values;})
				.enter()
				.append("rect")
				.attr("class", "bar")
				.attr("x", function(d) {return x(d.gender);})
				.attr("y", function (d) { return y(+d[current]);})
				.attr("height", function(d) { return height - y(+d[current]);})
				.attr("width", x.rangeBand());


			localsvg.selectAll("label")
				.data(function(d) { return d.values;})
				.enter()
				.append("svg:text")
				.attr("class","text")
				.text(function(d) { return +d[current];})
				.attr("x", function(d) {return (x(d.gender) + 20);})
				.attr("y", function (d) { return (y(+d[current]) - 5);});


			} //end multiple

			d3.selectAll("#filters a")
				.on("click", function() {
					d3.selectAll("#filters a").classed("current", false);
					d3.select(this).classed("current", true);

					var label = d3.select(this).attr("text");
					var selection = d3.select(this).attr("id");
					current = selection;

					function humanize(str) {
  						var frags = str.split('_');
  						return frags.join(' ');
					};

					var current_humaized = humanize(current)

					d3.select("#explain h3").text(current_humaized);
					d3.select("#explain p").html(explain[current]);
					transition(current);


				});

			function transition(current){
				//y.domain([0, d3.max(companies, function(c){
					//return d3.max(c.values, function(v) { return +v[current];});
				//})
				//]);
				//yAxis.scale(y);


			svg.each(function(company){
				var chartTrans =d3.select(this).transition();
				chartTrans.select(".y.axis").call(yAxis);

				chartTrans.selectAll("rect")
				.transition()
				.attr("class", "bar")
				.attr("x", function(d) {return x(d.gender);})
				.attr("y", function (d) { return y(+d[current]);})
				.attr("height", function(d) { return height - y(+d[current]);})
				.attr("width", x.rangeBand());


				chartTrans.selectAll(".text")
				.transition()
				.attr("class","text")
				.text(function(d) { return +d[current];})
				.attr("x", function(d) {return (x(d.gender) + 20);})
				.attr("y", function (d) { return (y(+d[current]) - 5);});


			}); //end each


			} //end transition


		});  // end data load


		function typeFix(d){
			d.Asian = +d.Asian;
			d.American_Indian_Alaskan_Native = +d.American_Indian_Alaskan_Native;
			d.Black_or_African_American = +d.Black_or_African_American;
			d.Latino = +d.Latino;
			d.Native_Hawaiian_or_Pacific_Islander = +d.Native_Hawaiian_or_Pacific_Islander;
			d.Two_or_more_races = +d.Two_or_more_races;
			d.White = +d.White;
			d.Total = +d.Total;
			return d;
		}


	</script>

</body>


</html>
	company	gender	American_Indian_Alaskan_Native	Asian	Black_or_African_American	Latino	Native_Hawaiian_or_Pacific_Islander	Two_or_more_races	White	Total
1	23andMe	Female	0.3	13.1	1	3.7	0.3	3.4	28.3	50
2	23andMe	Male	0.3	10.4	0.7	2.7	0	1.3	34.3	50
3	Adobe	Female	0.1	10.1	0.5	2.3	0.1	0.4	18.7	32
4	Adobe	Male	0.1	15.7	1.1	2.4	0.3	0.6	47.7	68
5	Airbnb	Female	0.1	11.7	1.3	3.5	0.1	1.2	24.9	43
6	Airbnb	Male	0.1	18.7	1.6	2.9	0.3	1.8	31.7	57
7	Apple	Female	0.1	5.9	3.8	4.1	0.1	0.9	15.8	31
8	Apple	Male	0.2	13.6	5.3	8.2	0.3	1.3	40.3	69
9	Cisco	Female	0	10	1.2	1.7	0	0.3	12.9	26
10	Cisco	Male	0.2	25.9	2.2	3.4	0.1	0.6	41.3	74
11	eBay	Female	0.1	12.5	1	2	0.3	0.4	19.6	36
12	eBay	Male	0.1	26.8	1.1	2.3	0.2	0.4	33.1	64
13	Facebook	Female	0.1	12.5	1	1.9	0.2	1	15.1	32
14	Facebook	Male	0.1	25.9	1.4	2.6	0.1	1.7	36.6	68
15	Google	Female	0	10.8	1	1.7	0.1	0.7	14.9	29
16	Google	Male	0.1	22.7	1.4	3.5	0.1	1.1	42	71
17	HP Inc.	Female	0.1	4.4	1.4	2.6	0.1	0.4	22	31
18	HP Inc.	Male	0.3	7.9	2.5	5.3	0.1	1	51.9	69
19	HPE	Female	0.2	4	3.4	1.9	0.1	0.4	23.2	33
20	HPE	Male	0.2	8.8	3.8	3.8	0.1	0.7	49.5	67
21	Intel	Female	0.2	10.9	1	2.1	0.4	0.4	11	26
22	Intel	Male	0.4	25	2.9	6	0.1	0.9	38.7	74
23	Intuit	Female	0.5	12.3	2.2	3.7	0.2	1.2	23	43
24	Intuit	Male	0.4	17.6	1.8	4.7	0.2	1	31.2	57
25	LinkedIn	Female	0.1	13	1.1	2.2	0	0.9	22.9	40
26	LinkedIn	Male	0.1	23.7	1.5	2.5	0.1	1.2	30.6	60
27	Lyft	Female	0.3	6.3	3.8	3.1	0.1	1.4	27.6	43
28	Lyft	Male	0.3	12.1	2.9	3.9	0.2	1.5	36.5	57
29	MobileIron	Female	0	16.6	0.8	1.6	0.4	0.6	10.9	31
30	MobileIron	Male	0.2	21.1	1	4.2	0	1.2	41.5	69
31	Nvidia	Female	0.1	11.1	0.3	0.8	0.1	0	4.8	17
32	Nvidia	Male	0.1	41	0.7	2.5	0.2	0.3	38.1	83
33	Pinterest	Female	0.2	14.6	0.8	1.7	0	1.6	24.2	43
34	Pinterest	Male	0.2	25	1.3	2	0	2.3	26.1	57
35	Salesforce	Female	0	8.1	0.8	1.4	0.1	0.9	20.5	32
36	Salesforce	Male	0.1	16.2	1.5	2.6	0.2	1.5	46	68
37	Square	Female	0.1	9.2	2	2.6	0.2	1.5	19	35
38	Square	Male	0.2	15.2	2.9	3.3	0.1	2.5	41.2	65
39	Twitter	Female	0.2	10.9	0.9	1.8	0.2	1.1	20.3	35
40	Twitter	Male	0.1	20.6	1.6	2.7	0.2	1.1	38.3	65
41	Uber	Female	0.1	8.8	2.5	1.8	0.1	1.2	15.1	30
42	Uber	Male	0.1	24.9	2.3	3	0.2	1.9	38.1	70
43	View	Female	0	6.5	1.3	0.4	0	0.2	8.5	17
44	View	Male	0.4	14.1	14.1	3.9	0.2	2.2	48	83
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body{
	font:10px Helvetica,Arial,sans-serif;
	}
	a{
	color: #821122;
	}
	#header{
	border-bottom: 1px solid #ccc;
	margin: 20px 26px 20px 20px;
	}
	#header h1{
	font-size: 2.4em;
	font-family: Georgia, Palatino, serif;
	line-height: 1.4em;
	}
	#header p{
	font-size: 1.3em;
	font-family: Georgia, Palatino, serif;
	font-height: normal;
	}
	#explain{
	margin: 0 0 0 20px;
	}

	#explain h3{
	font-size: 1.5em;
	margin: 0 0 0.5em 0;
	padding: 0;
	}
	#explain p{
	font-size: 1.2em;
	line-height: 1.4em;
	color: #717171;
	margin-top: 0;

	}
	#filters{
	margin: 0 24px 10px 16px;
	float:right;
	}
	#filters table{
	border-collapse: collapse;
	border-top: 1px solid #ccc;
	}
	#filters table td{
	padding: 0; margin: 0;
	}

	#filters a{
	display:block;
	padding: 2px 4px;
	font-size: 1.1em;
	color: #808B96;
	background: #EBF5FB;
	cursor: pointer;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	overflow: hidden;
	}
	#filters a:hover{
	text-decoration: underline;
	}
	#filters a.current{
	background: #fff; color: #000;
	font-weight: bold;
	}
	#filters a.current:hover{
	text-decoration: none;
	}
	.left{
	float:left;
	}
	.clr{
	clear: both;
	}


	.bar {
	fill: #85C1E9;
	}

	.xaxis path{
	display: none;
	}
	.xaxis, text{
	font-size: 1em;
	fill:#888;
	}
	.text{
	font-size: 0.9em;
	fill:#888;
	}

	.label{
	fill: black;
	font-weight: bold;
	font-size: 1.1em;
	}
	svg {
	border:1px solid #F1F1F1;
	}
	.clr{
	clear: both;
	}





	</style>
	</head>

	<body>
	<div id = "header">
	<h2> How Diverse Are The Silicon Valley Technology Companies? </h2>
	<p> Reporters from the Center for Investigative Reporting sought employee diversity data from 200+ technology companies in San Fransisco. 23 companies shared the data. The charts below show the race and gender diversity for each company.
	<p> Source: <a href = https://github.com/cirlabs/Silicon-Valley-Diversity-Data >Reveal from The Center for Investigative Reporting </a></p>
	</div>

	<div id = "explain" class="left">
	<h3></h3>
	<p></p>
	</div>

	<div id = "filters">
	<table class = "left">
	<tbody>
	<tr>
	<td>
	<a id = "Total" class>Total </a>
	</td>
	</tr>
	<tr>
	<td>
	<a id = "American_Indian_Alaskan_Native" class>American Indian or Alaskan Native</a>
	</td>
	</tr>
	<tr>
	<td>
	<a id = "Asian" class>Asian</a>
	</td>
	</tr>
	<tr>
	<td>
	<a id = "Black_or_African_American" class>Black or African American</a>
	</td>
	</tr>
	</tbody>
	</table>

	<table class = "left">
	<tbody>
	<tr>
	<td>
	<a id = "Latino" class>Latino</a>
	</td>
	</tr>
	<tr>
	<td>
	<a id = "Native_Hawaiian_or_Pacific_Islander" class>Native Hawaiian or Pacific Islander</a>
	</td>
	</tr>
	<tr>
	<td>
	<a id = "Two_or_more_races" class>Two or more races</a>
	</td>
	</tr>
	<tr>
	<td>
	<a id = "White" class>White</a>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class = "clr">
	</div>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript">

	var explain = {

	"Total" : "Most technology companies employ twice as many males as females, exceptions being 23andMe, Airbnb, Intuit, LinkedIn, Lyft and Pinterest.",
	"American_Indian_Alaskan_Native" : "Roughly 1% of American population is American Indian or Alaskan Native. Most technology compaines employ around 0.1%",
	"Asian" : "Though only 5% of American population is Asian, they contribute to a sizeable percentage of technology workforce in Silicon Valley.",
	"Black_or_African_American" : "African Americans make up 13% of the American population and less than 5% of tech employees. View is an exception with about 15%.",
	"Latino" : "Latinos account for 16% of population and less than 10% in most technology companies.",
	"Native_Hawaiian_or_Pacific_Islander" : "They account for only 0.2% of the American population",
	"Two_or_more_races" : "Around 2% of the American population is of two or more races",
	"White" : "Whites contribute to 50% of the workforce in most companies. The gender gap is noticeable here."

	};

	var companies = [];

	var fullwidth = 200,
	fullheight = 150;

	var margin = {top: 30, right: 15, bottom: 20, left: 45},
	width = fullwidth - margin.left - margin.right
	height = fullheight - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0,width],0.25);

	var y = d3.scale.linear()
	.range([height,0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(2)
	.outerTickSize(0)
	.innerTickSize(0)
	.tickFormat(function(d) {return d+ "%"})
	.orient("left");



	var current = "Total";



	d3.select("#explain h3").text(current);

	d3.select("#explain p").html(explain[current]);





	d3.csv("diversity_data_2016_v2.csv", typeFix, function(error, data){


	console.log("data after load", data);

	x.domain(data.map(function (d) {return d.gender}));
	//y.domain([0, d3.max(data, function(d) { return +d[current];})]);
	y.domain([0,100]);



	//nest data by company

	companies = d3.nest()
	.key(function(d){
	return d.company;
	})
	.entries(data);

	//add an svg element for each company



	var svg = d3.select("body")
	.selectAll("svg")
	.data(companies)
	.enter()
	.append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," +
	margin.top + ")")
	.each(multiple);


	function multiple(company){

	var localsvg = d3.select(this);

	localsvg.append("g")
	.attr("class", "xaxis")
	.attr("transform", "translate(0," +height+ ")")
	.call(xAxis);


	localsvg.append("g")
	//.attr("class","y axis")
	//.call(yAxis)
	.append("text")
	.attr("class","label")
	.attr("x", (width/2))
	.attr("y", -8)
	.style("text-anchor", "middle")
	.text(function (d) { return d.key});

	localsvg.selectAll("rect")
	.data(function(d) { return d.values;})
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", function(d) {return x(d.gender);})
	.attr("y", function (d) { return y(+d[current]);})
	.attr("height", function(d) { return height - y(+d[current]);})
	.attr("width", x.rangeBand());


	localsvg.selectAll("label")
	.data(function(d) { return d.values;})
	.enter()
	.append("svg:text")
	.attr("class","text")
	.text(function(d) { return +d[current];})
	.attr("x", function(d) {return (x(d.gender) + 20);})
	.attr("y", function (d) { return (y(+d[current]) - 5);});





	} //end multiple

	d3.selectAll("#filters a")
	.on("click", function() {
	d3.selectAll("#filters a").classed("current", false);
	d3.select(this).classed("current", true);

	var label = d3.select(this).attr("text");
	var selection = d3.select(this).attr("id");
	current = selection;

	function humanize(str) {
	var frags = str.split('_');
	return frags.join(' ');
	};

	var current_humaized = humanize(current)

	d3.select("#explain h3").text(current_humaized);
	d3.select("#explain p").html(explain[current]);
	transition(current);



	});

	function transition(current){
	//y.domain([0, d3.max(companies, function(c){
	//return d3.max(c.values, function(v) { return +v[current];});
	//})
	//]);
	//yAxis.scale(y);


	svg.each(function(company){
	var chartTrans =d3.select(this).transition();
	chartTrans.select(".y.axis").call(yAxis);

	chartTrans.selectAll("rect")
	.transition()
	.attr("class", "bar")
	.attr("x", function(d) {return x(d.gender);})
	.attr("y", function (d) { return y(+d[current]);})
	.attr("height", function(d) { return height - y(+d[current]);})
	.attr("width", x.rangeBand());


	chartTrans.selectAll(".text")
	.transition()
	.attr("class","text")
	.text(function(d) { return +d[current];})
	.attr("x", function(d) {return (x(d.gender) + 20);})
	.attr("y", function (d) { return (y(+d[current]) - 5);});




	}); //end each


	} //end transition







	}); // end data load


	function typeFix(d){
	d.Asian = +d.Asian;
	d.American_Indian_Alaskan_Native = +d.American_Indian_Alaskan_Native;
	d.Black_or_African_American = +d.Black_or_African_American;
	d.Latino = +d.Latino;
	d.Native_Hawaiian_or_Pacific_Islander = +d.Native_Hawaiian_or_Pacific_Islander;
	d.Two_or_more_races = +d.Two_or_more_races;
	d.White = +d.White;
	d.Total = +d.Total;
	return d;
	}











	</script>

	</body>


	</html>