Skip to content

Instantly share code, notes, and snippets.

@maelafifi

maelafifi/.block

Last active May 14, 2017 23: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/a54d3962931804277b04a48a0ff904c6 to your computer and use it in GitHub Desktop.
Save maelafifi/a54d3962931804277b04a48a0ff904c6 to your computer and use it in GitHub Desktop.
Download ZIP
scatterEarning
Raw
.block
license: mit
Raw
data.csv
Occupation workersMen earningsMen earningsWomen workersWomen earningsTotal more
Chief executives 832 2419 1876 318 2303 1
General and operations managers 626 1358 1037 250 1266 1
Marketing and sales managers 518 1745 1142 403 1468 1
Administrative services managers 101 1398 952 71 1261 1
Computer and information systems managers 443 1756 1680 150 1738 2
Financial managers 527 1670 1157 578 1423 1
Human resources managers 73 1737 1283 190 1340 1
Industrial production managers 201 1409 1219 66 1361 1
Purchasing managers 95 1400 1169 92 1274 1
Transportation storage and distribution managers 237 990 988 51 990 2
Education administrators 297 1528 1280 541 1381 1
Food service managers 410 853 632 350 739 1
Lodging managers 59 1068 764 64 929 1
Medical and health services managers 133 1610 1254 399 1402 1
Real estate managers 181 1157 815 221 959 1
Social/community service managers 115 1206 992 248 1079 1
Managers - all other 1845 1542 1188 1115 1422 1
Wholesale and retail buyers 68 942 765 83 838 1
Purchasing agents 128 1037 974 125 1024 1
Adjusters appraisers examiners 114 1139 912 206 969 1
Compliance officers 106 1274 1163 146 1243 1
Human resources workers 166 1364 1089 465 1139 1
Management analysts 332 1586 1342 253 1476 1
Market research analysts 116 1345 1097 130 1171 1
Business operations - all other 110 1263 1001 146 1125 1
Accountants and auditors 559 1441 1018 892 1153 1
Financial analysts 173 1747 1252 104 1525 1
Personal financial advisors 258 1714 953 142 1404 1
Credit counselors and loan officers 151 1331 926 200 1054 1
Computer systems analysts 314 1475 1328 182 1393 1
Computer programmers 300 1466 1312 104 1398 1
Software developers/systems software 1084 1863 1553 266 1776 1
Computer support specialists 367 1078 1014 124 1060 1
Computer occupations all other 418 1244 1055 106 1195 1
Operations research analysts 59 1382 1300 66 1315 1
Engineers all other 430 1659 1401 63 1573 1
Engineering technicians 275 1075 793 75 997 1
Medical scientists 69 1250 1169 57 1211 1
Physical scientists - all other 131 1727 1323 111 1416 1
Life physical and social science 62 949 826 57 894 1
Counselors 184 892 907 473 904 2
Social workers 127 1039 884 557 906 1
Clergy 315 1070 893 53 1039 1
Lawyers 446 2086 1619 299 1897 1
Postsecondary teachers 535 1356 1152 445 1247 1
Elementary/middle school teachers 605 1126 981 2231 1009 1
Secondary school teachers 403 1146 1074 562 1111 1
Other teachers and instructors 156 1135 786 214 938 1
Teacher assistants 56 501 525 532 523 2
Designers 290 1267 922 297 1086 1
Producers and directors 78 1228 1030 50 1163 1
Editors 64 1112 1035 56 1053 1
Pharmacists 89 2096 1839 133 1924 1
Physicians and surgeons 497 2343 1476 308 1916 1
Physical therapists 69 1348 1306 128 1325 2
Registered nurses 285 1261 1143 2213 1154 1
Clinical lab tech 97 1071 834 198 887 1
Diagnostic related tech 79 1156 936 175 1041 1
EMT and paramedics 114 821 650 60 779 1
Health practitioner support tech 113 712 643 361 662 1
Nursing psychiatric and home health aides 194 534 498 1192 503 1
Bailiffs correctional officers and jailers 275 793 672 91 749 1
Police and sheriff's patrol officers 609 1008 938 100 1004 1
Security guards/surveillance officers 576 597 516 152 585 1
Chefs and head cooks 288 632 519 68 614 1
Food Prep Supervisors 174 666 485 251 528 1
Cooks 892 459 421 515 444 1
Food preparation workers 215 432 413 262 419 2
Bartenders 131 701 498 122 602 1
Food preparation and Servers 72 381 402 125 396 1
Waiters and waitresses 342 504 441 607 470 1
Dining attendants 82 465 407 51 420 1
Housekeeping supervisors 119 702 524 71 655 1
Janitors 1139 564 476 441 526 1
Maids 120 497 427 661 441 1
Gaming supervisors 68 840 717 59 792 1
Personal care aides 125 514 469 636 477 1
Recreation and fitness workers 92 668 517 100 596 1
Retail sales supervisors 1321 857 630 1047 743 1
Non-retail sales supervisors 552 1161 1004 230 1137 1
Cashiers 402 475 403 965 414 1
Retail salespersons 1103 730 514 728 623 1
Advertising sales agents 122 1034 999 81 1023 2
Insurance sales agents 218 1166 676 205 839 1
Financial service agents 155 1458 951 63 1351 1
Sales reps - all other 282 1202 826 145 1040 1
Sales - wholesale and manufacturing 819 1140 872 302 1047 1
Real estate brokers and sales agents 209 1222 780 284 983 1
Sales and related workers all other 103 946 709 68 805 1
Office supervisors 383 942 809 819 848 1
Accountants 115 790 716 641 722 1
Customer service 664 676 623 1185 640 1
Receptionists 103 600 581 848 583 1
Dispatchers 126 734 671 153 704 1
Postal service clerks 58 999 805 53 901 1
Postal service carriers 185 1020 931 119 981 1
Production planning and expediting clerks 113 935 765 111 853 1
Shipping receiving and traffic clerks 322 602 583 151 596 2
Stock clerks and order fillers 643 533 526 371 530 2
Secretaries and administrative assistants 133 831 708 2078 713 1
Data entry 51 655 630 170 638 2
Office clerks general 140 707 648 760 654 1
Office and administrative support 107 855 751 351 768 1
Miscellaneous agricultural workers 547 524 423 111 508 1
Production and operations supervisors 599 972 723 131 923 1
Electronics/mechanical assemblers 55 618 554 50 590 1
Miscellaneous assemblers and fabricators 645 625 559 345 601 1
Bakers 55 562 480 83 494 1
Butchers/processing workers 183 571 449 61 526 1
Laundry and dry-cleaning workers 55 486 436 80 454 1
Sewing machine operators 52 407 452 114 437 0
Inspectors testers sorters samplers and weighers 445 834 584 241 714 1
Packaging and filling machine operators and tenders 112 574 425 113 488 1
Production workers all other 641 690 515 246 622 1
Bus drivers 197 691 589 146 641 1
Driver/sales workers and truck drivers 2689 787 630 120 780 1
Industrial truck and tractor operators 510 604 563 54 602 1
Laborers 1196 580 509 221 566 1
Packers and packagers 166 468 437 216 456 1
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<style>
.background
{
fill: #f0f0f0;
pointer-events: all;
}
.tipSVG
{
font-size: 5em;
}
body
{
background: silver;
}
.axis path,
.axis line
{
fill: none;
stroke: rgba(0, 0, 0, 0.1);
shape-rendering: crispEdges;
}
.axisLine
{
fill: none;
shape-rendering: crispEdges;
stroke: rgba(0, 0, 0, 0.5);
stroke-width: 2px;
}
.dot
{
fill-opacity: 1;
}
.d3-tip
{
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(255, 255, 255, 0.8);
color: black;
border-radius: 2px;
font-size: .8em;
}
.d3-tip:after
{
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(255, 255, 255, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
.d3-tip.n:after
{
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<center><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ratio of Women to Men/Average Pay</h2></center>
<center><input type="button" id="xAxis" value="Women:Men / Women:Average"></center>
<center>
<div id="scatter"></div>
</center>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<script>
var margin = { top: 25, right: 175, bottom: 25, left: 50 },
outerWidth = 800,
outerHeight = 560,
width = outerWidth - margin.left - margin.right,
height = outerHeight - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]).nice();
var y = d3.scale.linear()
.range([height, 0]).nice();
var xCat = "earningsMen",
yCat = "earningsWomen",
Occ = "Occupation",
count = 1;
d3.csv("data.csv", function(data)
{
data.forEach(function(d)
{
d.workersMen = +d.workersMen;
d.earningsMen = +d.earningsMen;
d.workersWomen = +d.workersWomen;
d.earningsWomen = +d.earningsWomen;
});
var xMax = d3.max(data, function(d) { return d[xCat]; }) * 1.05,
yMax = d3.max(data, function(d) { return d[yCat]; }) * 1.05;
x.domain([0, 2500]);
y.domain([0, 2500]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(6)
.tickSize(-height)
.tickFormat(function(d, i)
{
return "$" + d/1000 + "k";
});
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(6)
.tickSize(-width)
.tickFormat(function(d, i)
{
return "$" + d/1000 + "k";
});
var color = d3.scale.ordinal()
.domain(data.map(function(d){ return +d.more;}))
.range(['blue','green', '#fa9fb5']);
var tip = d3.tip()
.attr("class", "d3-tip")
.offset([-60, 0])
.html(function(d)
{
var z;
var ratio = d[yCat]/d[xCat];
ratio = ratio.toPrecision(3);
if(xCat === "earningsMen")
{
l = "Women to Men Earnings Ratio: ";
}
else
{
l = "Women to Average Earnings Ratio: ";
}
return "Occupation: " + d[Occ]
+ "<div id='tipDiv'></div>"
+ l + ratio;;
});
var zoomer = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([.25, 2.5])
.on("zoom", zoom);
var svg = d3.select("#scatter")
.append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoomer);
svg.call(tip);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("class", "background");
svg.append("g")
.classed("x axis", true)
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.classed("label", true)
.attr("x", width+10)
.attr("y", margin.bottom-5)
.style("text-anchor", "end")
.text("Men Earnings (Weekly)");
svg.append("g")
.classed("y axis", true)
.call(yAxis)
.append("text")
.classed("label", true)
.attr("y", -margin.left)
.attr("dy", "2.71em")
.attr("x", -margin.left)
.attr("dx", "14em")
.style("text-anchor", "end")
.text("Women Earnings (Weekly)");
var objects = svg.append("svg")
.classed("objects", true)
.attr("width", width)
.attr("height", height);
objects.selectAll(".dot")
.data(data)
.enter().append("circle")
.classed("dot", true)
.attr("r", 3)
.attr("transform", transform)
.style("fill", function(d)
{
var rat = d[xCat]/d[yCat];
if(rat > 1.05)
{
return "blue";
}
else if(rat>.95)
{
return "green";
}
else
{
return "#fa9fb5";
}
})
.on("mouseover", function(d)
{
tip.show(d);
var men = d.earningsMen;
var women = d.earningsWomen;
var total = d.earningsTotal;
var dataset = [men, total,women];
var barHeight = 15;
var tipSVG = d3.select("#tipDiv")
.append("svg")
.attr("width", 150)
.attr("height", barHeight * 3);
var x = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 150]);
var bar = tipSVG.selectAll("g")
.data(dataset)
.enter().append("g")
.attr("transform", function(d, i)
{
return "translate(0," + i * barHeight + ")";
});
bar.append("rect")
.attr("width", 0)
.transition()
.duration(1000)
.attr("width", x)
.attr("height", barHeight - 1)
.attr("fill", function(d)
{
if(d === men)
{
return "blue";
}
else if (d === women)
{
return "#fa9fb5";
}
else
{
return "green";
}
});
bar.append("text")
.attr("x", 2)
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.attr("fill", function(d)
{
if(d === men || d === total)
{
return "#f0f0f0";
}
else
{
return "grey";
}
})
.style("font-size", "10px")
.text(function(d)
{
if(d === men)
{
return "Mens Salary: $" + d;
}
else if(d === women)
{
return "Womens Salary: $" + d;
}
else
{
return "Average Salary: $" + d;
}
});
})
.on("mouseout", tip.hide);
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.classed("legend", true)
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("circle")
.attr("r", 3.5)
.attr("cx", width + 20)
.attr("fill", color);
legend.append("text")
.attr("x", width + 26)
.attr("dy", ".35em")
.text(function(d)
{
if(d == 1)
{
return "Men Paid Higher";
}
else if(d == 2)
{
return "Minimal Difference"
}
else
{
return "Women Paid Higher";
}
});
d3.select("input").on("click", change);
function change()
{
if(count == 1)
{
xCat = "earningsTotal";
xMax = d3.max(data, function(d) { return d[xCat]; });
zoomer.x(x.domain([0, 2500])).y(y.domain([0, 2500]));
var svg = d3.select("#scatter").transition();
svg.select(".x.axis").duration(750).call(xAxis)
.select(".label").text("Average Earnings (weekly)");
svg.select(".y.axis").duration(750).call(yAxis);
objects.selectAll(".dot").transition().duration(1000)
.attr("transform", transform);
count--;
}
else
{
xCat = "earningsMen";
xMax = d3.max(data, function(d) { return d[xCat]; });
zoomer.x(x.domain([0, 2500])).y(y.domain([0, 2500]));
var svg = d3.select("#scatter").transition();
svg.select(".x.axis").duration(750).call(xAxis)
.select(".label").text("Men Earnings (weekly)");
svg.select(".y.axis").duration(750).call(yAxis);
objects.selectAll(".dot").transition().duration(1000)
.attr("transform", transform);
count++;
}
}
function zoom()
{
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.selectAll(".dot")
.attr("transform", transform);
}
function transform(d)
{
return "translate(" + x(d[xCat]) + "," + y(d[yCat]) + ")";
}
});
</script>
</body>
</html>
Raw
scatter.css
rect {
fill: transparent;
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: rgba(0, 0, 0, 0.1);
shape-rendering: crispEdges;
}
.axisLine {
fill: none;
shape-rendering: crispEdges;
stroke: rgba(0, 0, 0, 0.5);
stroke-width: 2px;
}
.dot {
fill-opacity: .5;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment