Skip to content

Instantly share code, notes, and snippets.

@vidyakesavan

vidyakesavan/diversity_data_2016_v2.csv

Last active July 17, 2018 09:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vidyakesavan/980692d543eb71a95a8ebf25d9b30dbd to your computer and use it in GitHub Desktop.
Save vidyakesavan/980692d543eb71a95a8ebf25d9b30dbd to your computer and use it in GitHub Desktop.
Download ZIP
Silicon Valley Diversity
Raw
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
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment