Skip to content

Instantly share code, notes, and snippets.

@mcgovey

mcgovey/.block

Forked from shancarter/index.html
Last active November 4, 2018 11:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mcgovey/e59b5542b628fab4c356223b3505f0c0 to your computer and use it in GitHub Desktop.
Save mcgovey/e59b5542b628fab4c356223b3505f0c0 to your computer and use it in GitHub Desktop.
Download ZIP
Clustered Interactive Force Layout v4
Raw
.block
license: mit
Raw
README.md
Raw
college-majors.csv
id Major Major_category Total Men Women Major_category_code
2419 PETROLEUM ENGINEERING Engineering 2339 2057 282 8
2416 MINING AND MINERAL ENGINEERING Engineering 756 679 77 8
2415 METALLURGICAL ENGINEERING Engineering 856 725 131 8
2417 NAVAL ARCHITECTURE AND MARINE ENGINEERING Engineering 1258 1123 135 8
2405 CHEMICAL ENGINEERING Engineering 32260 21239 11021 8
2418 NUCLEAR ENGINEERING Engineering 2573 2200 373 8
6202 ACTUARIAL SCIENCE Business 3777 832 960 4
5001 ASTRONOMY AND ASTROPHYSICS Physical Sciences 1792 2110 1667 14
2414 MECHANICAL ENGINEERING Engineering 91227 12953 2105 8
2408 ELECTRICAL ENGINEERING Engineering 81527 8407 6548 8
2407 COMPUTER ENGINEERING Engineering 41542 33258 8284 8
2401 AEROSPACE ENGINEERING Engineering 15058 65511 16016 8
2404 BIOMEDICAL ENGINEERING Engineering 14955 80320 10907 8
5008 MATERIALS SCIENCE Engineering 4279 2949 1330 8
2409 ENGINEERING MECHANICS PHYSICS AND SCIENCE Engineering 4321 3526 795 8
2402 BIOLOGICAL ENGINEERING Engineering 8925 6062 2863 8
2412 INDUSTRIAL AND MANUFACTURING ENGINEERING Engineering 18968 12453 6515 8
2400 GENERAL ENGINEERING Engineering 61152 45683 15469 8
2403 ARCHITECTURAL ENGINEERING Engineering 2825 1835 990 8
3201 COURT REPORTING Law & Public Policy 1148 877 271 13
2102 COMPUTER SCIENCE Computers & Mathematics 128319 1837 2524 6
1104 FOOD SCIENCE Agriculture & Natural Resources 4361 99743 28576 1
2502 ELECTRICAL ENGINEERING TECHNOLOGY Engineering 11565 2020 973 8
2413 MATERIALS ENGINEERING AND MATERIALS SCIENCE Engineering 2993 8181 3384 8
6212 MANAGEMENT INFORMATION SYSTEMS AND STATISTICS Business 18713 13496 5217 4
2406 CIVIL ENGINEERING Engineering 53153 41081 12072 8
5601 CONSTRUCTION SERVICES Industrial Arts & Consumer Services 18498 2662 1385 11
6204 OPERATIONS LOGISTICS AND E-COMMERCE Business 11732 488 232 4
2499 MISCELLANEOUS ENGINEERING Engineering 9133 7398 1735 8
5402 PUBLIC POLICY Law & Public Policy 5978 2695 905 13
2410 ENVIRONMENTAL ENGINEERING Engineering 4047 2639 3339 8
2500 ENGINEERING TECHNOLOGIES Engineering 3600 16820 1678 8
6099 MISCELLANEOUS FINE ARTS Arts 3340 1970 1370 2
2411 GEOLOGICAL AND GEOPHYSICAL ENGINEERING Engineering 720 7921 3811 8
6107 NURSING Health 209394 21773 187621 9
6207 FINANCE Business 174506 89749 49498 4
5501 ECONOMICS Social Science 139247 115030 59476 16
6205 BUSINESS ECONOMICS Business 13302 3477 1154 4
2503 INDUSTRIAL PRODUCTION TECHNOLOGIES Engineering 4631 528 1588 8
5102 NUCLEAR, INDUSTRIAL RADIOLOGY, AND BIOLOGICAL TECHNOLOGIES Physical Sciences 2116 7575 5727 14
6201 ACCOUNTING Business 198633 27392 9306 4
3700 MATHEMATICS Computers & Mathematics 72397 9005 2908 6
2100 COMPUTER AND INFORMATION SYSTEMS Computers & Mathematics 36698 515 1247 6
5007 PHYSICS Physical Sciences 32142 39956 32441 14
6105 MEDICAL TECHNOLOGIES TECHNICIANS Health 15914 2794 2145 9
2105 INFORMATION SCIENCES Computers & Mathematics 11913 2960 3291 6
3702 STATISTICS AND DECISION SCIENCE Computers & Mathematics 6251 23080 9062 6
3701 APPLIED MATHEMATICS Computers & Mathematics 4939 3916 11998 6
3607 PHARMACOLOGY Biology & Life Science 1762 94519 104114 3
5006 OCEANOGRAPHY Physical Sciences 2418 752 1666 14
2501 ENGINEERING AND INDUSTRIAL MANAGEMENT Engineering 2906 2400 506 8
6104 MEDICAL ASSISTING SERVICES Health 11123 500 109 9
4005 MATHEMATICS AND COMPUTER SCIENCE Computers & Mathematics 609 803 10320 6
2101 COMPUTER PROGRAMMING AND DATA PROCESSING Computers & Mathematics 4168 3046 1122 6
4006 COGNITIVE SCIENCE AND BIOPSYCHOLOGY Biology & Life Science 3831 119 699 3
2303 SCHOOL STUDENT COUNSELING Education 818 1667 2164 7
5505 INTERNATIONAL RELATIONS Social Science 28187 10345 17842 16
6200 GENERAL BUSINESS Business 234590 6053 4346 4
1401 ARCHITECTURE Engineering 46420 9658 4582 8
6210 INTERNATIONAL BUSINESS Business 25894 1749 690 4
6108 PHARMACY PHARMACEUTICAL SCIENCES AND ADMINISTRATION Health 23551 25463 20957 9
3603 MOLECULAR BIOLOGY Biology & Life Science 18300 4419 371 3
6299 MISCELLANEOUS BUSINESS & MEDICAL ADMINISTRATION Business 17947 7043 1761 4
1101 AGRICULTURE PRODUCTION AND MANAGEMENT Agriculture & Natural Resources 14240 7426 10874 1
1100 GENERAL AGRICULTURE Agriculture & Natural Resources 10399 1761 1874 1
2599 MISCELLANEOUS ENGINEERING TECHNOLOGIES Engineering 8804 124 0 8
2504 MECHANICAL ENGINEERING RELATED TECHNOLOGIES Engineering 4790 894 542 8
3605 GENETICS Biology & Life Science 3635 1075 1939 3
5599 MISCELLANEOUS SOCIAL SCIENCES Social Science 3283 1499 1784 16
6403 UNITED STATES HISTORY Humanities & Liberal Arts 3079 8697 14854 10
5205 INDUSTRIAL AND ORGANIZATIONAL PSYCHOLOGY Psychology & Social Work 3014 132238 102352 15
1102 AGRICULTURAL ECONOMICS Agriculture & Natural Resources 2439 10624 15270 1
5000 PHYSICAL SCIENCES Physical Sciences 1436 10285 7662 14
3801 MILITARY TECHNOLOGIES Industrial Arts & Consumer Services 124 1756 1323 11
5003 CHEMISTRY Physical Sciences 66530 32923 33607 14
5701 ELECTRICAL, MECHANICAL, AND PRECISION TECHNOLOGIES AND PRODUCTION Industrial Arts & Consumer Services 2435 1869 566 11
6203 BUSINESS MANAGEMENT AND ADMINISTRATION Business 329927 6383 8849 4
6206 MARKETING AND MARKETING RESEARCH Business 205211 11404 7076 4
5506 POLITICAL SCIENCE AND GOVERNMENT Social Science 182621 93880 88741 16
5504 GEOGRAPHY Social Science 18480 173809 156118 16
3606 MICROBIOLOGY Biology & Life Science 15232 78857 126354 3
2106 COMPUTER ADMINISTRATION MANAGEMENT AND SECURITY Computers & Mathematics 8066 6607 1459 6
3601 BIOCHEMICAL SCIENCES Biology & Life Science 39107 18951 20156 3
3602 BOTANY Biology & Life Science 1329 626 703 3
2107 COMPUTER NETWORKING AND TELECOMMUNICATIONS Computers & Mathematics 7613 5291 2322 6
5004 GEOLOGY AND EARTH SCIENCE Physical Sciences 10972 5813 5159 14
6209 HUMAN RESOURCES AND PERSONNEL MANAGEMENT Business 24497 4435 9093 4
3202 PRE-LAW AND LEGAL STUDIES Law & Public Policy 13528 809 1169 13
6199 MISCELLANEOUS HEALTH MEDICAL PROFESSIONS Health 13386 413 973 9
5401 PUBLIC ADMINISTRATION Law & Public Policy 5629 2947 2682 13
5005 GEOSCIENCES Physical Sciences 1978 1589 11797 14
5206 SOCIAL PSYCHOLOGY Psychology & Social Work 1386 6184 18313 15
1301 ENVIRONMENTAL SCIENCE Biology & Life Science 25965 10787 15178 3
1901 COMMUNICATIONS Communications & Journalism 213996 476 209 5
5301 CRIMINAL JUSTICE AND FIRE PROTECTION Law & Public Policy 152824 3156 451 13
6004 COMMERCIAL ART AND GRAPHIC DESIGN Arts 103480 8617 5156 2
1902 JOURNALISM Communications & Journalism 72619 8739 22456 5
5098 MULTI-DISCIPLINARY OR GENERAL SCIENCE Physical Sciences 62052 70619 143377 14
1904 ADVERTISING AND PUBLIC RELATIONS Communications & Journalism 53162 23736 48883 5
1501 AREA ETHNIC AND CIVILIZATION STUDIES Humanities & Liberal Arts 31195 12862 40300 10
2310 SPECIAL NEEDS EDUCATION Education 28739 11431 6604 7
3608 PHYSIOLOGY Biology & Life Science 22060 2682 26057 3
5503 CRIMINOLOGY Social Science 19879 8422 13638 16
4002 NUTRITION SCIENCES Health 18909 4944 8719 9
6103 HEALTH AND MEDICAL ADMINISTRATIVE SERVICES Health 18109 2817 9479 9
2001 COMMUNICATION TECHNOLOGIES Computers & Mathematics 18035 2563 16346 6
5901 TRANSPORTATION SCIENCES AND TECHNOLOGIES Industrial Arts & Consumer Services 15150 2744 1299 11
1303 NATURAL RESOURCES MANAGEMENT Agriculture & Natural Resources 13773 27015 35037 1
3611 NEUROSCIENCE Biology & Life Science 13663 80231 72593 3
4000 MULTI/INTERDISCIPLINARY STUDIES Interdisciplinary 12296 10031 9848 12
5002 ATMOSPHERIC SCIENCES AND METEOROLOGY Physical Sciences 4043 13257 1893 14
1302 FORESTRY Agriculture & Natural Resources 3607 32041 71439 1
1106 SOIL SCIENCE Agriculture & Natural Resources 685 4266 13843 1
2300 GENERAL EDUCATION Education 143718 26893 116825 7
6402 HISTORY Humanities & Liberal Arts 141951 280 524 10
2602 FRENCH GERMAN LATIN AND OTHER COMMON FOREIGN LANGUAGE STUDIES Humanities & Liberal Arts 48246 3872 10365 10
4001 INTERCULTURAL AND INTERNATIONAL STUDIES Humanities & Liberal Arts 24650 9950 10248 10
2311 SOCIAL SCIENCE OR HISTORY TEACHER EDUCATION Education 20198 12835 35411 7
6110 COMMUNITY AND PUBLIC HEALTH Health 19735 8575 16075 9
2305 MATHEMATICS TEACHER EDUCATION Education 14237 4103 15632 7
2301 EDUCATIONAL ADMINISTRATION AND SUPERVISION Education 804 78253 63698 7
6106 HEALTH AND MEDICAL PREPARATORY PROGRAMS Health 12740 4747 5959 9
3699 MISCELLANEOUS BIOLOGY Biology & Life Science 10706 5521 7219 3
3600 BIOLOGY Biology & Life Science 280709 111762 168947 3
5507 SOCIOLOGY Social Science 115433 24704 28120 16
1903 MASS MEDIA Communications & Journalism 52824 3741 26730 5
6109 TREATMENT THERAPY PROFESSIONS Health 48491 3654 6496 9
6211 HOSPITALITY MANAGEMENT Business 43647 4416 12185 4
2313 LANGUAGE AND DRAMA EDUCATION Education 30471 3878 5276 7
2601 LINGUISTICS AND COMPARATIVE LANGUAGE AND LITERATURE Humanities & Liberal Arts 16601 2337 7579 10
2399 MISCELLANEOUS EDUCATION Education 10150 32510 82923 7
4007 INTERDISCIPLINARY SOCIAL SCIENCES Social Science 9916 13487 35004 16
3604 ECOLOGY Biology & Life Science 9154 15204 28443 3
2309 SECONDARY TEACHER EDUCATION Education 17125 6820 10305 7
6100 GENERAL MEDICAL AND HEALTH SERVICES Health 33599 7574 26025 9
4801 PHILOSOPHY AND RELIGIOUS STUDIES Humanities & Liberal Arts 54814 31967 22847 10
2314 ART AND MUSIC EDUCATION Education 34181 10732 23449 7
3301 ENGLISH LANGUAGE AND LITERATURE Humanities & Liberal Arts 194673 4897 2519 10
2304 ELEMENTARY EDUCATION Education 170862 13029 157833 7
4101 PHYSICAL FITNESS PARKS RECREATION AND LEISURE Industrial Arts & Consumer Services 125074 2049 4434 11
3401 LIBERAL ARTS Humanities & Liberal Arts 71369 58227 136446 10
6005 FILM VIDEO AND PHOTOGRAPHIC ARTS Arts 38761 22339 49030 2
5500 GENERAL SOCIAL SCIENCES Social Science 12920 62181 62893 16
1105 PLANT SCIENCE AND AGRONOMY Agriculture & Natural Resources 7416 5079 7841 1
2308 SCIENCE AND COMPUTER TEACHER EDUCATION Education 6483 22357 16404 7
5200 PSYCHOLOGY Psychology & Social Work 393735 86648 307087 15
6002 MUSIC Arts 60633 15670 12543 2
2306 PHYSICAL AND HEALTH EDUCATION TEACHING Education 28213 29909 30724 7
6006 ART HISTORY AND CRITICISM Humanities & Liberal Arts 21030 3240 17790 10
6000 FINE ARTS Arts 74440 24786 49654 2
2901 FAMILY AND CONSUMER SCIENCES Industrial Arts & Consumer Services 58001 5347 16226 11
5404 SOCIAL WORK Psychology & Social Work 53552 2734 11709 15
1103 ANIMAL SCIENCES Agriculture & Natural Resources 21573 5166 52835 1
6003 VISUAL AND PERFORMING ARTS Arts 16250 2013 4639 2
2312 TEACHER EDUCATION: MULTIPLE LEVELS Education 14443 1936 7692 7
5299 MISCELLANEOUS PSYCHOLOGY Psychology & Social Work 9628 885 8489 15
5403 HUMAN SERVICES AND COMMUNITY ORGANIZATION Psychology & Social Work 9374 5137 48415 15
3402 HUMANITIES Humanities & Liberal Arts 6652 4133 12117 10
4901 THEOLOGY AND RELIGIOUS VOCATIONS Humanities & Liberal Arts 30207 404 1084 10
6007 STUDIO ARTS Arts 16977 4364 6146 2
2201 COSMETOLOGY SERVICES AND CULINARY ARTS Industrial Arts & Consumer Services 10510 18616 11591 11
1199 MISCELLANEOUS AGRICULTURE Agriculture & Natural Resources 1488 4754 12223 1
5502 ANTHROPOLOGY AND ARCHEOLOGY Humanities & Liberal Arts 38844 1167 36422 10
6102 COMMUNICATION DISORDERS SCIENCES AND SERVICES Health 38279 11376 27468 9
2307 EARLY CHILDHOOD EDUCATION Education 37589 1225 37054 7
2603 OTHER FOREIGN LANGUAGES Humanities & Liberal Arts 11204 3472 7732 10
6001 DRAMA AND THEATER ARTS Arts 43249 7022 11931 2
3302 COMPOSITION AND RHETORIC Humanities & Liberal Arts 18953 14440 28809 10
3609 ZOOLOGY Biology & Life Science 8409 3050 5359 3
5201 EDUCATIONAL PSYCHOLOGY Psychology & Social Work 2854 522 2332 15
5202 CLINICAL PSYCHOLOGY Psychology & Social Work 2838 568 2270 15
5203 COUNSELING PSYCHOLOGY Psychology & Social Work 4626 931 3695 15
3501 LIBRARY SCIENCE Education 1098 134 964 7
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<style type="text/css">
div.tooltip {
position: absolute;
text-align: center;
width: 150px;
/*height: 28px; */
padding: 2px;
font: 12px sans-serif;
background: lightgrey;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
let margin = {top: 100, right: 100, bottom: 100, left: 100};
let width = 960,
height = 500,
padding = 1.5, // separation between same-color circles
clusterPadding = 6, // separation between different-color circles
maxRadius = height*0.1;
let n = 200, // total number of nodes
m = 10, // number of distinct clusters
z = d3.scaleOrdinal(d3.schemeCategory20),
clusters = new Array(m);
let svg = d3.select('body')
.append('svg')
.attr('height', height)
.attr('width', width)
.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
// Define the div for the tooltip
let div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//load college major data
d3.csv("college-majors.csv", function(d){
let radiusScale = d3.scaleLinear()
.domain(d3.extent(d, function(d) { return +d.Total;} ))
.range([4, maxRadius]);
console.log(radiusScale(300000));
let nodes = d.map((d) => {
// scale radius to fit on the screen
let scaledRadius = radiusScale(+d.Total),
forcedCluster = +d.Major_category_code;
// add cluster id and radius to array
d = {
cluster : forcedCluster,
r : scaledRadius,
major : d.Major,
major_cat : d.Major_category
};
// add to clusters array if it doesn't exist or the radius is larger than another radius in the cluster
if (!clusters[forcedCluster] || (scaledRadius > clusters[forcedCluster].r)) clusters[forcedCluster] = d;
return d;
});
// append the circles to svg then style
// add functions for interaction
let circles = svg.append('g')
.datum(nodes)
.selectAll('.circle')
.data(d => d)
.enter().append('circle')
.attr('r', (d) => d.r)
.attr('fill', (d) => z(d.cluster))
.attr('stroke', 'black')
.attr('stroke-width', 1)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
// add tooltips to each circle
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html( "The major " + d.major+ "<br/>In the category " + d.major_cat )
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
// create the clustering/collision force simulation
let simulation = d3.forceSimulation(nodes)
.velocityDecay(0.2)
.force("x", d3.forceX().strength(.0005))
.force("y", d3.forceY().strength(.0005))
.force("collide", collide)
.force("cluster", clustering)
.on("tick", ticked);
function ticked() {
circles
.attr('cx', (d) => d.x)
.attr('cy', (d) => d.y);
}
// Drag functions used for interactivity
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
// These are implementations of the custom forces.
function clustering(alpha) {
nodes.forEach(function(d) {
var cluster = clusters[d.cluster];
if (cluster === d) return;
var x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.r + cluster.r;
if (l !== r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
});
}
function collide(alpha) {
var quadtree = d3.quadtree()
.x((d) => d.x)
.y((d) => d.y)
.addAll(nodes);
nodes.forEach(function(d) {
var r = d.r + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.data && (quad.data !== d)) {
var x = d.x - quad.data.x,
y = d.y - quad.data.y,
l = Math.sqrt(x * x + y * y),
r = d.r + quad.data.r + (d.cluster === quad.data.cluster ? padding : clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.data.x += x;
quad.data.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
});
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment