Skip to content

Instantly share code, notes, and snippets.

@derPlau

derPlau/README.md

Last active January 4, 2016 15:49
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 derPlau/8643007 to your computer and use it in GitHub Desktop.
Save derPlau/8643007 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-D Gauges
Raw
README.md

Another port of a graphic to d3.js. Summarizing the ranges of clusters of occupations in multi-dimensional skillspace with "gauges" on five summary (Principal Components) axes. Each axis has two opposing directions; for example, an occupation might involve work that is more physical or more intellectual in nature (Principal Component 1, the top gauge in each block of gauges). Positions of clusters on these axes are highlighted by the background gradient, which clearly delineates between the left (e.g., physical) and right (e.g., intellectual) ends of the dimension. Of course, some clusters may span across the center of one or more axes, implying that the cluster is not strongly defined by those axes.

Raw
blockdat.csv
row col cluster pc pcrev clusname p45 p55 p45scaled p55scaled pc1 pc2 pc1rank pc2rank
5 1 6 5 1 Service -0.282998494 2.2342826301 0.3715537743 0.6276025758 -9.961833217 -5.53045427 0 0
3 1 1 5 1 General Physical Labor -3.554701877 1.5240571279 0.0387678484 0.5553609867 -9.740981454 6.5765801655 0 1
1 2 4 5 1 Equipment Operation -2.875934179 3.509402334 0.1078096626 0.7573031757 -5.011361766 9.9070284012 0 2
4 1 10 5 1 Food Preparation, Service & Security -1.583280909 -0.577394152 0.2392937138 0.3416089046 -4.815786607 -1.988503037 1 0
2 1 3 5 1 Construction & Related Machinery 0.442120758 1.5559624802 0.4453103023 0.5586062847 -2.477696533 8.3511157195 1 1
1 1 9 5 1 Equipment Repair 2.9335783359 5.895416763 0.6987324252 1 -1.260101269 14.591424878 1 2
4 2 14 5 1 Communications & Visual Arts 4.2567225827 5.8677913581 0.8333179093 0.997190043 5.5429619474 -2.157812657 2 1
3 2 13 5 1 Outreach & Public Safety Assistance & Performing Arts -1.0307923 4.1617895416 0.2954908722 0.823661661 -0.19859085 -1.551238411 2 2
5 2 2 5 1 Clerical & Administrative Support -1.675100214 2.403844098 0.2299541837 0.6448497598 -1.239630502 -6.696694943 2 0
5 3 7 5 1 Humanities, Social Science & Outreach -0.780701633 5.578724052 0.3209291973 0.967787154 12.730220467 -4.578447271 3 0
2 2 12 5 1 Analysis, Information Technology & Physical Sciences -3.140596379 5.130246825 0.0808891735 0.9221696601 8.5457899208 12.057636051 3 2
3 3 5 5 1 Health Care & Biological Sciences -2.536351131 0.9294784051 0.1423508315 0.494882573 12.347925289 3.3602939741 3 1
2 3 15 5 1 Public Safety -0.053456416 4.2157466986 0.3949019708 0.8291499894 12.81268143 6.2266786098 4 1
1 3 8 5 1 Engineering, Except Industrial 3.0588067656 4.2271630069 0.7114702117 0.8303112153 15.996341003 11.627482025 4 2
4 3 11 5 1 Management, Except Production -3.93583849 -0.386418654 0 0.3610342469 15.406334625 -2.625371123 4 0
5 1 6 4 2 Service 0.7217770491 4.4310520966 0.6652247589 0.9768785174 -9.961833217 -5.53045427 0 0
1 2 4 4 2 Equipment Operation -3.546505792 4.0038442879 0.3066030949 0.9409844633 -5.011361766 9.9070284012 0 2
3 1 1 4 2 General Physical Labor -2.281938616 1.7720546699 0.412852189 0.7534692174 -9.740981454 6.5765801655 0 1
2 1 3 4 2 Construction & Related Machinery 1.3847622325 2.9106584313 0.7209288579 0.8491348494 -2.477696533 8.3511157195 1 1
4 1 10 4 2 Food Preparation, Service & Security 0.0962021807 3.4560268223 0.6126638794 0.8949567706 -4.815786607 -1.988503037 1 0
1 1 9 4 2 Equipment Repair -2.807984146 -0.101944289 0.3686537769 0.596015588 -1.260101269 14.591424878 1 2
3 2 13 4 2 Outreach & Public Safety Assistance & Performing Arts -5.189458296 1.11942209 0.1685620177 0.6986349455 -0.19859085 -1.551238411 2 2
5 2 2 4 2 Clerical & Administrative Support -6.173426756 4.4026770576 0.0858888634 0.9744944431 -1.239630502 -6.696694943 2 0
4 2 14 4 2 Communications & Visual Arts -5.329787662 1.9572592112 0.1567715267 0.7690301264 5.5429619474 -2.157812657 2 1
5 3 7 4 2 Humanities, Social Science & Outreach -4.503867189 2.1093022303 0.2261654692 0.7818048001 12.730220467 -4.578447271 3 0
3 3 5 4 2 Health Care & Biological Sciences -5.243053594 0.0924896899 0.164058934 0.6123519554 12.347925289 3.3602939741 3 1
2 2 12 4 2 Analysis, Information Technology & Physical Sciences -7.195668295 -2.231294528 0 0.4171073116 8.5457899208 12.057636051 3 2
2 3 15 4 2 Public Safety -0.322851006 2.3351691797 0.5774549776 0.8007821697 12.81268143 6.2266786098 4 1
4 3 11 4 2 Management, Except Production 1.4221522881 4.7062419058 0.7240703751 1 15.406334625 -2.625371123 4 0
1 3 8 4 2 Engineering, Except Industrial -1.647653456 2.0080495507 0.4661449083 0.7732975371 15.996341003 11.627482025 4 2
3 1 1 3 3 General Physical Labor -3.619044294 0.2369286283 0.2378530306 0.4980531974 -9.740981454 6.5765801655 0 1
5 1 6 3 3 Service 0.3619137105 2.3317583913 0.5064871621 0.6394118285 -9.961833217 -5.53045427 0 0
1 2 4 3 3 Equipment Operation -3.053479229 1.5661185783 0.2760172312 0.5877466298 -5.011361766 9.9070284012 0 2
4 1 10 3 3 Food Preparation, Service & Security 0.2335939311 1.5261136313 0.4978281728 0.5850471052 -4.815786607 -1.988503037 1 0
1 1 9 3 3 Equipment Repair -4.439469001 -2.931856907 0.1824909599 0.2842242776 -1.260101269 14.591424878 1 2
2 1 3 3 3 Construction & Related Machinery -1.045028384 1.1529072078 0.4115470328 0.5598632215 -2.477696533 8.3511157195 1 1
4 2 14 3 3 Communications & Visual Arts -3.674699971 3.3758547909 0.2340973983 0.7098672136 5.5429619474 -2.157812657 2 1
3 2 13 3 3 Outreach & Public Safety Assistance & Performing Arts 2.1533848411 5.2075869565 0.6273752223 0.8334720793 -0.19859085 -1.551238411 2 2
5 2 2 3 3 Clerical & Administrative Support -5.846225361 -1.129132648 0.0875633639 0.4058716964 -1.239630502 -6.696694943 2 0
2 2 12 3 3 Analysis, Information Technology & Physical Sciences -7.143849281 -1.239461256 0 0.3984267472 8.5457899208 12.057636051 3 2
5 3 7 3 3 Humanities, Social Science & Outreach 2.1789163156 6.4414965108 0.6290980803 0.9167360125 12.730220467 -4.578447271 3 0
3 3 5 3 3 Health Care & Biological Sciences -0.575719859 7.67540687 0.4432158642 1 12.347925289 3.3602939741 3 1
2 3 15 3 3 Public Safety 1.8005685219 4.1934264363 0.6035672582 0.7650367604 12.81268143 6.2266786098 4 1
4 3 11 3 3 Management, Except Production -4.595025533 2.9090399361 0.1719940409 0.6783666545 15.406334625 -2.625371123 4 0
1 3 8 3 3 Engineering, Except Industrial -6.470287946 -3.378848766 0.0454517642 0.2540613697 15.996341003 11.627482025 4 2
5 1 6 2 4 Service -7.137219518 -1.862981063 0.0630677481 0.2820782835 -9.961833217 -5.53045427 0 0
1 2 4 2 4 Equipment Operation 2.3963701697 14.526119796 0.4589460535 0.9626288092 -5.011361766 9.9070284012 0 2
3 1 1 2 4 General Physical Labor 2.1203127071 9.8469305585 0.4474828833 0.7683274425 -9.740981454 6.5765801655 0 1
4 1 10 2 4 Food Preparation, Service & Security -3.11515446 0.117274874 0.2300823094 0.3643075791 -4.815786607 -1.988503037 1 0
1 1 9 2 4 Equipment Repair 10.636244966 15.426097376 0.8011033916 1 -1.260101269 14.591424878 1 2
2 1 3 2 4 Construction & Related Machinery 6.1499289144 11.558265918 0.6148110029 0.8393899242 -2.477696533 8.3511157195 1 1
4 2 14 2 4 Communications & Visual Arts -5.77981199 5.2755879687 0.1194335253 0.5785043626 5.5429619474 -2.157812657 2 1
3 2 13 2 4 Outreach & Public Safety Assistance & Performing Arts -6.500687572 5.7255497054 0.0894994697 0.5971888346 -0.19859085 -1.551238411 2 2
5 2 2 2 4 Clerical & Administrative Support -8.656024729 -0.298943479 0 0.3470242869 -1.239630502 -6.696694943 2 0
2 2 12 2 4 Analysis, Information Technology & Physical Sciences -6.085452056 13.320818841 0.10674195 0.9125791936 8.5457899208 12.057636051 3 2
5 3 7 2 4 Humanities, Social Science & Outreach -5.749869977 2.2276729233 0.1206768548 0.4519409712 12.730220467 -4.578447271 3 0
3 3 5 2 4 Health Care & Biological Sciences -2.128774961 5.0024117945 0.2710413036 0.5671608368 12.347925289 3.3602939741 3 1
2 3 15 2 4 Public Safety 4.6996823923 6.422053735 0.5545901255 0.6261108717 12.81268143 6.2266786098 4 1
4 3 11 2 4 Management, Except Production -3.213229173 1.4080658237 0.2260097982 0.4179071308 15.406334625 -2.625371123 4 0
1 3 8 2 4 Engineering, Except Industrial 6.6599111532 12.096200143 0.6359878011 0.8617274168 15.996341003 11.627482025 4 2
5 1 6 1 5 Service -15.99904241 -7.968847481 0 0.222297045 -9.961833217 -5.53045427 0 0
3 1 1 1 5 General Physical Labor -13.22326663 -4.675750605 0.076840819 0.3134586807 -9.740981454 6.5765801655 0 1
1 2 4 1 5 Equipment Operation -7.291972345 6.4698468258 0.2410347399 0.6219983107 -5.011361766 9.9070284012 0 2
2 1 3 1 5 Construction & Related Machinery -4.408848566 -0.058874426 0.3208472354 0.4412660303 -2.477696533 8.3511157195 1 1
4 1 10 1 5 Food Preparation, Service & Security -6.00742109 -2.424293212 0.2765945178 0.375784979 -4.815786607 -1.988503037 1 0
1 1 9 1 5 Equipment Repair -3.386498414 2.0473207407 0.3491485929 0.4995710859 -1.260101269 14.591424878 1 2
4 2 14 1 5 Communications & Visual Arts 1.2675365953 10.041963029 0.4779845973 0.7208839396 5.5429619474 -2.157812657 2 1
3 2 13 1 5 Outreach & Public Safety Assistance & Performing Arts -4.574840468 6.2070598378 0.3162521403 0.6147236715 -0.19859085 -1.551238411 2 2
5 2 2 1 5 Clerical & Administrative Support -6.270900648 6.9850251788 0.2693007064 0.6362598108 -1.239630502 -6.696694943 2 0
5 3 7 1 5 Humanities, Social Science & Outreach 11.435435876 17.928987832 0.7594589554 0.9392176566 12.730220467 -4.578447271 3 0
2 2 12 1 5 Analysis, Information Technology & Physical Sciences 2.8784968875 14.542263444 0.5225802411 0.8454641637 8.5457899208 12.057636051 3 2
3 3 5 1 5 Health Care & Biological Sciences 11.8211632 19.342908538 0.7701369084 0.9783587232 12.347925289 3.3602939741 3 1
2 3 15 1 5 Public Safety 9.9513905723 14.680981206 0.7183766544 0.8493042384 12.81268143 6.2266786098 4 1
4 3 11 1 5 Management, Except Production 13.413617735 20.124671836 0.8142202639 1 15.406334625 -2.625371123 4 0
1 3 8 1 5 Engineering, Except Industrial 14.798201241 16.902093847 0.8525491992 0.9107905138 15.996341003 11.627482025 4 2
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.legend text {
font: 6px sans-serif;
}
</style>
</head>
<body>
<div id="umap">
<svg class="fig"></svg>
<script>
var totWidth = 1000,
totHeight = totWidth/1.4,
margin = {top: 0, right: 30, bottom: 30, left: 30},
width = totWidth - (margin.left + margin.right),
height = totHeight - (margin.top + margin.bottom),
groupTotwidth = width / 3,
groupmargins = 10,
groupwidth = groupTotwidth - (2 * groupmargins)
barwidth = groupwidth/3, //just a guess. Change for looks.
barleft = groupmargins + (groupwidth - barwidth)/2, //within a column
groupTotheight = height / 5,
groupheight = groupTotheight - (groupmargins * 2),
bargroupheight = groupheight * .65, //another guess.
barTotheight = bargroupheight / 5,
barspace = 3,
barheight = barTotheight - barspace,
bartxtsize = 12,
bartxtdy = 10,
bartxtgap = 6,
headtxtsize = 18,
headtxtspace = 2,
barheadspace = 15,
headheight = groupTotheight - bargroupheight - groupmargins - barheadspace
;
var pcs = [
{left: "Physical", right: "Intellectual"},
{left: "Interpersonal", right: "Technical"},
{left: "Abstract", right: "Concrete"},
{left: "Information", right: "Interaction"},
{left: "Manage/Monitor", right: "Produce/Create"}
];
var clusnames = [
{row: 1, col: 1, line1: "Equipment", line2: "Repair"},
{row: 1, col: 2, line1: "Equipment Operation", line2: "& Maintenance"},
{row: 1, col: 3, line1: "Engineering,", line2: "Except Industrial"},
{row: 2, col: 1, line1: "Construction &", line2: "Machinery Repair"},
{row: 2, col: 2, line1: "Analysis, Information Technology", line2: "& Physical Sciences"},
{row: 2, col: 3, line1: "Public", line2: "Safety"},
{row: 3, col: 1, line1: "General", line2: "Physical Labor"},
{row: 3, col: 2, line1: "Outreach / Safety Aides;", line2: "Performing Artists"},
{row: 3, col: 3, line1: "Health Care;", line2: "Biological Sciences"},
{row: 4, col: 1, line1: "Food Preparation;", line2: "Service & Security Attendants"},
{row: 4, col: 2, line1: "Communications", line2: "& Visual Arts"},
{row: 4, col: 3, line1: "Managers,", line2: "Except Production"},
{row: 5, col: 1, line2: "Service"},
{row: 5, col: 2, line1: "Clerks; Agents;", line2: "Secretaries"},
{row: 5, col: 3, line1: "Humanities, Social Science,", line2: "Outreach & Education"}
];
var fig = d3.select(".fig")
.attr("width",totWidth)
.attr("height",totHeight)
;
var gradient = fig.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "#ff8908")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "40%")
.attr("stop-color", "#fcdfb0")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "50%")
.attr("stop-color", "#fff")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "60%")
.attr("stop-color", "#afe0ea")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "#00b8db")
.attr("stop-opacity", 1);
d3.csv("blockdat.csv",
/*type,*/
function(error, data) {
var numcols = d3.keys(data[0]).filter(function(key) { return key !== "cluster"; }),
allcols = d3.keys(data[0]);
//Type conversion
data.forEach(function(d) {
var clusname = d.clusname;
numcols.map(function(name) { d[name] = +d[name] });
d.clusname = clusname;
});
var ranges = fig.selectAll(".range")
.data(data)
.enter().append("g")
.attr("class","range")
.attr("transform", function(d) {
var xy = barxy(d.row-1,d.col-1,d.pc-1);
return "translate(" + xy.x + ", " + xy.y + ")";
})
;
ranges.append("rect")
.attr("x",0)
.attr("y",0)
.attr("height",barheight)
.attr("width",barwidth)
.style("stroke","black")
.style("fill","url(#gradient)")
;
ranges.append("rect")
.attr("x",0)
.attr("y",0)
.attr("height",barheight)
.attr("width", function(d) {return barwidth*d.p45scaled;})
.style("stroke","black")
.style("fill","white")
.style("fill-opacity",0.75)
;
ranges.append("rect")
.attr("x",function(d) {return barwidth*d.p55scaled;})
.attr("y",0)
.attr("height",barheight)
.attr("width", function(d) {return barwidth - barwidth*d.p55scaled;})
.style("stroke","black")
.style("fill","white")
.style("fill-opacity",0.75)
;
ranges.append("text")
.attr("class","legend")
.attr("x", -bartxtgap)
.attr("dy",bartxtdy)
.text(function(d) {return pcs[d.pc-1].left;})
.style("text-anchor","end")
.style("font", bartxtsize + "px sans-serif")
;
ranges.append("text")
.attr("class","legend")
.attr("x", barwidth + bartxtgap)
.attr("dy",bartxtdy)
.text(function(d) {return pcs[d.pc-1].right;})
.style("text-anchor","start")
.style("font", bartxtsize + "px sans-serif")
;
var cluslabels = fig.selectAll(".cluslabel")
.data(clusnames)
.enter().append("g")
.attr("class","cluslabel")
.attr("transform", function(d) {
var x = (d.col-1)*groupTotwidth + groupmargins,
y = svgy(d.row*groupTotheight + groupmargins)
;
return "translate(" + x + ", " + y + ")";
})
;
cluslabels.append("text")
.attr("text-anchor","middle")
.attr("x",groupwidth/2)
.attr("y",headheight - headtxtsize - headtxtspace)
.style("font", headtxtsize + "px sans-serif")
.text(function(d) {return d.line1})
;
cluslabels.append("text")
.attr("text-anchor","middle")
.attr("x",groupwidth/2)
.attr("y",headheight)
.style("font", headtxtsize + "px sans-serif")
.text(function(d) {return d.line2})
;
}); //end gaugedata callback
function svgy(y) {
return totHeight - y;
}
function barxy(row,col,pc) {
return {x: col*groupTotwidth+barleft, y: svgy(row*groupTotheight + groupmargins + barTotheight * (-1*pc+6))};
}
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment