Networks of Work Projects (d3.js and force-directed graphs)
This is a force-directed graph of some of my project groups where I work, and how they overlap.
by matt_bernhardt
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="page">
<h1>Networks of Work Projects</h1>
<div class='gallery' id='chart'> </div>
</div>
CSS
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
font-weight: bold;
font-size: 2rem;
}
#page {
margin: 10px auto;
padding: 10px;
width: 640px;
border: 1px solid #ddd;
background: #fff;
}
* {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
margin: 0 10px;
}
circle.node {
stroke: #fff;
stroke-width: 1.5px;
}
line.link {
stroke: #999;
stroke-opacity: .6;
}
div#chart {
background-color: #f2f2f2;
border: 1px solid #959595;
height: 480px;
border-radius: 10px;
margin: 0 10px;
}
JavaScript
var mit2 = {"nodes":[
{"name":"cubespace","group":2},
{"name":"cubespace-coffee","group":2},
{"name":"dlad-lib","group":2},
{"name":"eds-lib","group":2},
{"name":"maker-lib","group":2},
{"name":"oastats","group":2},
{"name":"sfx-project-lib","group":2},
{"name":"chomsky","group":2},
{"name":"digital...