Skip to content

Instantly share code, notes, and snippets.

@maelafifi

maelafifi/.block

Last active August 11, 2017 17:07
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 maelafifi/0836eee44127e582c5889abca2a816bd to your computer and use it in GitHub Desktop.
Save maelafifi/0836eee44127e582c5889abca2a816bd to your computer and use it in GitHub Desktop.
Download ZIP
Sankey-Women:Men-Pay
Raw
.block
license: mit
Raw
data.csv
source target value
Total Top 20 7008
Total Bottom 20 8043
Top 20 Chief Executives 1150
Top 20 Engineering Managers 143
Top 20 Pharmacists 222
Top 20 Physicians/Surgeons 806
Top 20 Lawyers 745
Top 20 Chemical Engineers 91
Top 20 Aerospace Engineers 124
Top 20 Dentists 61
Top 20 Hardware Engineers 46
Top 20 Software Engineers 1351
Top 20 Nurse Practitioners 144
Top 20 Computer Information Sys 592
Top 20 Database Admin 83
Top 20 Electrical Engineers 271
Top 20 Information Analysts 85
Top 20 Pilots/Flight Engineers 119
Top 20 Engineers - Other 493
Top 20 Mechanical Engineers 335
Top 20 Judges/Judicial 56
Top 20 Environmental Scientists 79
Bottom 20 Packaging 225
Bottom 20 Animal Caretakers 88
Bottom 20 Entertainment Attendants 79
Bottom 20 Food Servers 104
Bottom 20 Personal Care Aides 761
Bottom 20 Waiters 949
Bottom 20 Automative/Watercraft Attendants 72
Bottom 20 Packers/Packagers 382
Bottom 20 Laundry/Dry-Cleaners 135
Bottom 20 Childcare 405
Bottom 20 Cooks 1407
Bottom 20 Hosts/Hostesses 74
Bottom 20 Maids/Cleaners 781
Bottom 20 Sewing Machine Operators 166
Bottom 20 Cafeteria Attendants 133
Bottom 20 Food Prep 477
Bottom 20 Cashiers 1367
Bottom 20 Food Prep/Servers - Fast Food 197
Bottom 20 Dishwashers 172
Bottom 20 Coffee Attendants 69
Chief Executives Men 832
Engineering Managers Men 134
Pharmacists Men 89
Physicians/Surgeons Men 497
Lawyers Men 446
Chemical Engineers Men 73
Aerospace Engineers Men 114
Dentists Men 34
Hardware Engineers Men 46
Software Engineers Men 1084
Nurse Practitioners Men 11
Computer Information Sys Men 443
Database Admin Men 46
Electrical Engineers Men 245
Information Analysts Men 65
Pilots/Flight Engineers Men 112
Engineers - Other Men 430
Mechanical Engineers Men 311
Judges/Judicial Men 35
Environmental Scientists Men 58
Chief Executives Women 318
Engineering Managers Women 9
Pharmacists Women 133
Physicians/Surgeons Women 308
Lawyers Women 299
Chemical Engineers Women 18
Aerospace Engineers Women 10
Dentists Women 27
Hardware Engineers Women 12
Software Engineers Women 266
Nurse Practitioners Women 133
Computer Information Sys Women 150
Database Admin Women 37
Electrical Engineers Women 26
Information Analysts Women 20
Pilots/Flight Engineers Women 7
Engineers - Other Women 63
Mechanical Engineers Women 24
Judges/Judicial Women 21
Environmental Scientists Women 21
Packaging Men 112
Animal Caretakers Men 17
Entertainment Attendants Men 48
Food Servers Men 33
Personal Care Aides Men 125
Waiters Men 342
Automative/Watercraft Attendants Men 67
Packers/Packagers Men 166
Laundry/Dry-Cleaners Men 55
Childcare Men 24
Cooks Men 892
Hosts/Hostesses Men 24
Maids/Cleaners Men 120
Sewing Machine Operators Men 52
Cafeteria Attendants Men 82
Food Prep Men 215
Cashiers Men 402
Food Prep/Servers - Fast Food Men 72
Dishwashers Men 142
Coffee Attendants Men 20
Packaging Women 113
Animal Caretakers Women 71
Entertainment Attendants Women 31
Food Servers Women 71
Personal Care Aides Women 636
Waiters Women 607
Automative/Watercraft Attendants Women 5
Packers/Packagers Women 216
Laundry/Dry-Cleaners Women 80
Childcare Women 381
Cooks Women 515
Hosts/Hostesses Women 50
Maids/Cleaners Women 661
Sewing Machine Operators Women 114
Cafeteria Attendants Women 51
Food Prep Women 262
Cashiers Women 965
Food Prep/Servers - Fast Food Women 125
Dishwashers Women 30
Coffee Attendants Women 49
Raw
data2.csv
source target value
Top 20 Chief Executives 1150
Top 20 Engineering Managers 143
Top 20 Pharmacists 222
Top 20 Physicians/Surgeons 806
Top 20 Lawyers 745
Top 20 Chemical Engineers 91
Top 20 Aerospace Engineers 124
Top 20 Dentists 61
Top 20 Hardware Engineers 46
Top 20 Software Engineers 1351
Top 20 Nurse Practitioners 144
Top 20 Computer Information Sys 592
Top 20 Database Admin 83
Top 20 Electrical Engineers 271
Top 20 Information Analysts 85
Top 20 Pilots/Flight Engineers 119
Top 20 Engineers - Other 493
Top 20 Mechanical Engineers 335
Top 20 Judges/Judicial 56
Top 20 Environmental Scientists 79
Chief Executives Men 832
Engineering Managers Men 134
Pharmacists Men 89
Physicians/Surgeons Men 497
Lawyers Men 446
Chemical Engineers Men 73
Aerospace Engineers Men 114
Dentists Men 34
Hardware Engineers Men 46
Software Engineers Men 1084
Nurse Practitioners Men 11
Computer Information Sys Men 443
Database Admin Men 46
Electrical Engineers Men 245
Information Analysts Men 65
Pilots/Flight Engineers Men 112
Engineers - Other Men 430
Mechanical Engineers Men 311
Judges/Judicial Men 35
Environmental Scientists Men 58
Chief Executives Women 318
Engineering Managers Women 9
Pharmacists Women 133
Physicians/Surgeons Women 308
Lawyers Women 299
Chemical Engineers Women 18
Aerospace Engineers Women 10
Dentists Women 27
Hardware Engineers Women 12
Software Engineers Women 266
Nurse Practitioners Women 133
Computer Information Sys Women 150
Database Admin Women 37
Electrical Engineers Women 26
Information Analysts Women 20
Pilots/Flight Engineers Women 7
Engineers - Other Women 63
Mechanical Engineers Women 24
Judges/Judicial Women 21
Environmental Scientists Women 21
Raw
data3.csv
source target value
Bottom 20 Packaging 225
Bottom 20 Animal Caretakers 88
Bottom 20 Entertainment Attendants 79
Bottom 20 Food Servers 104
Bottom 20 Personal Care Aides 761
Bottom 20 Waiters 949
Bottom 20 Automative/Watercraft Attendants 72
Bottom 20 Packers/Packagers 382
Bottom 20 Laundry/Dry-Cleaners 135
Bottom 20 Childcare 405
Bottom 20 Cooks 1407
Bottom 20 Hosts/Hostesses 74
Bottom 20 Maids/Cleaners 781
Bottom 20 Sewing Machine Operators 166
Bottom 20 Cafeteria Attendants 133
Bottom 20 Food Prep 477
Bottom 20 Cashiers 1367
Bottom 20 Food Prep/Servers - Fast Food 197
Bottom 20 Dishwashers 172
Bottom 20 Coffee Attendants 69
Packaging Men 112
Animal Caretakers Men 17
Entertainment Attendants Men 48
Food Servers Men 33
Personal Care Aides Men 125
Waiters Men 342
Automative/Watercraft Attendants Men 67
Packers/Packagers Men 166
Laundry/Dry-Cleaners Men 55
Childcare Men 24
Cooks Men 892
Hosts/Hostesses Men 24
Maids/Cleaners Men 120
Sewing Machine Operators Men 52
Cafeteria Attendants Men 82
Food Prep Men 215
Cashiers Men 402
Food Prep/Servers - Fast Food Men 72
Dishwashers Men 142
Coffee Attendants Men 20
Packaging Women 113
Animal Caretakers Women 71
Entertainment Attendants Women 31
Food Servers Women 71
Personal Care Aides Women 636
Waiters Women 607
Automative/Watercraft Attendants Women 5
Packers/Packagers Women 216
Laundry/Dry-Cleaners Women 80
Childcare Women 381
Cooks Women 515
Hosts/Hostesses Women 50
Maids/Cleaners Women 661
Sewing Machine Operators Women 114
Cafeteria Attendants Women 51
Food Prep Women 262
Cashiers Women 965
Food Prep/Servers - Fast Food Women 125
Dishwashers Women 30
Coffee Attendants Women 49
Raw
index.html
<!DOCTYPE html>
<!-- Based on Harry Stevens "Sankey from CSV"-->
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background: silver;
margin: 0;
font-family: "Helvetica Neue", sans-serif;
}
.node rect
{
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text
{
pointer-events: none;
text-shadow: 0px 0px 2px #fff;
font-size: .8em;
}
.link
{
fill: none;
stroke: #000;
stroke-opacity: .7;
}
.link:hover
{
stroke-opacity: 1;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-sankey@0.4"></script>
<center><h3 class = "title">Who Dominates the Top and Bottom 20 Paying Occupations</h3></center>
<center><button type="button" onclick="top20()">Top 20</button>
<button type="button" onclick="all20()">All</button>
<button type="button" onclick="bottom20()">Bottom 20</button></center>
<div id="sank"></div>
<script>
var margin = {top: 20, right: 15, bottom: 20, left: 15},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var color = d3.scaleOrdinal(d3.schemeCategory20);
// append the svg object to the body of the page
var svg = d3.select("#sank").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(10)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
// load the data
d3.queue()
.defer(d3.csv, "data.csv")
.await(ready);
function ready(error, csv)
{
var arr = [];
csv.forEach(function(d)
{
arr.push(d.source);
arr.push(d.target);
});
var nodes = arr.filter(onlyUnique).map(function(d,i)
{
return {
node: i,
name: d
}
});
var links = csv.map(function(csv_row)
{
return {
source: getNode("source"),
target: getNode("target"),
value: +csv_row.value
}
function getNode(type)
{
return nodes.filter(function(node_object)
{
return node_object.name == csv_row[type];
})
[0].node;
}
});
sankey
.nodes(nodes)
.links(links)
.layout(32);
// add in the links
var link = svg.append("g").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke", function(d)
{
return color(d.source.name.replace(/ .*/, ""));
})
.style("stroke-width", function(d)
{
return Math.max(1, d.dy);
});
// add the link titles
link.append("title")
.text(function(d)
{
return d.source.name + " → "
+ d.target.name + "\n"
+ d.value*1000/1000000 + "m workers";
});
// add in the nodes
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d)
{
return "translate(" + d.x + "," + d.y + ")";
})
.call(d3.drag()
.subject(function(d)
{
return d;
})
.on("start", function()
{
this.parentNode.appendChild(this);
})
.on("drag", dragmove));
// add the rectangles for the nodes
node.append("rect")
.attr("height", function(d)
{
return d.dy < 0 ? .1 : d.dy;
})
.attr("width", sankey.nodeWidth())
.style("fill", function(d)
{
return d.color = color(d.name.replace(/ .*/, ""));
})
.style("stroke", function(d)
{
return d3.rgb(d.color).darker(2);
})
.append("title")
.text(function(d)
{
return d.name + " Workers \n" + d.value*1000/1000000 + "m";
});
// add in the title for the nodes
node.append("text")
.attr("x", -6)
.attr("y", function(d)
{
return d.dy / 2;
})
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d)
{
if(d.name === "Top 20" || d.name === "Bottom 20")
{
return d.name + " Occupations";
}
else if(d.name === "Total")
{
return d.name + " Workers: " + d.value*1000/1000000+"m";
}
else
{
return d.name;
}
})
.filter(function(d)
{
return d.x < width / 2;
})
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// the function for moving the nodes
function dragmove(d)
{
d3.select(this)
.attr("transform", "translate(" + d.x + ","
+ (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
sankey.relayout();
link.attr("d", path);
}
}
function top20()
{
d3.select('#sank').text('');
var svg = d3.select("#sank").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var sankey = d3.sankey()
.nodeWidth(10)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
d3.queue()
.defer(d3.csv, "data2.csv")
.await(ready);
function ready(error, csv)
{
var arr = [];
csv.forEach(function(d)
{
arr.push(d.source);
arr.push(d.target);
});
var nodes = arr.filter(onlyUnique).map(function(d,i)
{
return {
node: i,
name: d
}
});
var links = csv.map(function(csv_row)
{
return {
source: getNode("source"),
target: getNode("target"),
value: +csv_row.value
}
function getNode(type)
{
return nodes.filter(function(node_object)
{
return node_object.name == csv_row[type];
})
[0].node;
}
});
sankey
.nodes(nodes)
.links(links)
.layout(32);
var link = svg.append("g").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke", function(d)
{
return color(d.source.name.replace(/ .*/, ""));
})
.style("stroke-width", function(d)
{
return Math.max(1, d.dy);
});
link.append("title")
.text(function(d)
{
return d.source.name + " → "
+ d.target.name + "\n"
+ d.value*1000/1000000 + "m workers";
});
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d)
{
return "translate(" + d.x + "," + d.y + ")";
})
.call(d3.drag()
.subject(function(d)
{
return d;
})
.on("start", function()
{
this.parentNode.appendChild(this);
})
.on("drag", dragmove));
node.append("rect")
.attr("height", function(d)
{
return d.dy < 0 ? .1 : d.dy;
})
.attr("width", sankey.nodeWidth())
.style("fill", function(d)
{
return d.color = color(d.name.replace(/ .*/, ""));
})
.style("stroke", function(d)
{
return d3.rgb(d.color).darker(2);
})
.append("title")
.text(function(d)
{
return d.name + " Workers \n" + d.value*1000/1000000 + "m";
});
node.append("text")
.attr("x", -6)
.attr("y", function(d)
{
return d.dy / 2;
})
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d)
{
if(d.name === "Top 20" || d.name === "Bottom 20")
{
return d.name + " Occupations";
}
else if(d.name === "Total")
{
return d.name + " workers: " + d.value;
}
else
{
return d.name;
}
})
.filter(function(d)
{
return d.x < width / 2;
})
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
function dragmove(d)
{
d3.select(this)
.attr("transform", "translate("
+ d.x + ","
+ (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
sankey.relayout();
link.attr("d", path);
}
}
}
function bottom20()
{
d3.select('#sank').text('');
var svg = d3.select("#sank").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var sankey = d3.sankey()
.nodeWidth(10)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
d3.queue()
.defer(d3.csv, "data3.csv")
.await(ready);
function ready(error, csv)
{
var arr = [];
csv.forEach(function(d)
{
arr.push(d.source);
arr.push(d.target);
});
var nodes = arr.filter(onlyUnique).map(function(d,i)
{
return {
node: i,
name: d
}
});
var links = csv.map(function(csv_row)
{
return {
source: getNode("source"),
target: getNode("target"),
value: +csv_row.value
}
function getNode(type)
{
return nodes.filter(function(node_object)
{
return node_object.name == csv_row[type];
})
[0].node;
}
});
sankey
.nodes(nodes)
.links(links)
.layout(32);
var link = svg.append("g").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke", function(d)
{
return color(d.source.name.replace(/ .*/, ""));
})
.style("stroke-width", function(d)
{
return Math.max(1, d.dy);
});
link.append("title")
.text(function(d)
{
return d.source.name + " → "
+ d.target.name + "\n"
+ d.value*1000/1000000 + "m workers";
});
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d)
{
return "translate(" + d.x + "," + d.y + ")";
})
.call(d3.drag()
.subject(function(d)
{
return d;
})
.on("start", function()
{
this.parentNode.appendChild(this);
})
.on("drag", dragmove));
node.append("rect")
.attr("height", function(d)
{
return d.dy < 0 ? .1 : d.dy;
})
.attr("width", sankey.nodeWidth())
.style("fill", function(d)
{
return d.color = color(d.name.replace(/ .*/, ""));
})
.style("stroke", function(d)
{
return d3.rgb(d.color).darker(2);
})
.append("title")
.text(function(d)
{
return d.name + " Workers \n" + d.value*1000/1000000 + "m";
});
node.append("text")
.attr("x", -6)
.attr("y", function(d)
{
return d.dy / 2;
})
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d)
{
if(d.name === "Top 20" || d.name === "Bottom 20")
{
return d.name + " Occupations";
}
else if(d.name === "Total")
{
return d.name + " workers: " + d.value;
}
else
{
return d.name;
}
})
.filter(function(d)
{
return d.x < width / 2;
})
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
function dragmove(d)
{
d3.select(this)
.attr("transform", "translate("
+ d.x + ","
+ (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
sankey.relayout();
link.attr("d", path);
}
}
}
function all20()
{
d3.select('#sank').text('');
var svg = d3.select("#sank").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var sankey = d3.sankey()
.nodeWidth(10)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
d3.queue()
.defer(d3.csv, "data.csv")
.await(ready);
function ready(error, csv)
{
var arr = [];
csv.forEach(function(d)
{
arr.push(d.source);
arr.push(d.target);
});
var nodes = arr.filter(onlyUnique).map(function(d,i)
{
return {
node: i,
name: d
}
});
var links = csv.map(function(csv_row)
{
return {
source: getNode("source"),
target: getNode("target"),
value: +csv_row.value
}
function getNode(type)
{
return nodes.filter(function(node_object)
{
return node_object.name == csv_row[type];
})
[0].node;
}
});
sankey
.nodes(nodes)
.links(links)
.layout(32);
var link = svg.append("g").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke", function(d)
{
return color(d.source.name.replace(/ .*/, ""));
})
.style("stroke-width", function(d)
{
return Math.max(1, d.dy);
});
link.append("title")
.text(function(d)
{
return d.source.name + " → "
+ d.target.name + "\n"
+ d.value*1000/1000000 + "m workers";
});
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d)
{
return "translate(" + d.x + "," + d.y + ")";
})
.call(d3.drag()
.subject(function(d)
{
return d;
})
.on("start", function()
{
this.parentNode.appendChild(this);
})
.on("drag", dragmove));
node.append("rect")
.attr("height", function(d)
{
return d.dy < 0 ? .1 : d.dy;
})
.attr("width", sankey.nodeWidth())
.style("fill", function(d)
{
return d.color = color(d.name.replace(/ .*/, ""));
})
.style("stroke", function(d)
{
return d3.rgb(d.color).darker(2);
})
.append("title")
.text(function(d)
{
return d.name + " Workers \n" + d.value*1000/1000000 + "m";
});
node.append("text")
.attr("x", -6)
.attr("y", function(d)
{
return d.dy / 2;
})
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d)
{
if(d.name === "Top 20" || d.name === "Bottom 20")
{
return d.name + " Occupations";
}
else if(d.name === "Total")
{
return d.name + " workers: " + d.value;
}
else
{
return d.name;
}
})
.filter(function(d)
{
return d.x < width / 2;
})
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
function dragmove(d)
{
d3.select(this)
.attr("transform", "translate("
+ d.x + ","
+ (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
sankey.relayout();
link.attr("d", path);
}
}
}
function onlyUnique(value, index, self)
{
return self.indexOf(value) === index;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment