D3.js, SVG, and force graph
My graph example
by b_long
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!--
Forked / based on https://jsfiddle.net/yaprak/422mjtu6/1/
-->
<div id="graph" style="width: 600px;height: 390px;padding:0px;border: 1px solid gray">
</div>
<div id="another-div">Some other content</div>
CSS
/* CSS from our application */
.node {
stroke: #222;
stroke-width: 1.5px;
fill: #3588cd;
}
.link {
stroke: #999;
stroke-opacity: .6;
stroke-width: 1px;
}
.linklabels {
font-size: 10px;
}
JavaScript
/*
Note: When declaring mock data, you MUST not have 'links' which
reference a non-existent node. For example, here we have 5 nodes
meaning that we can access nodes[0] through nodes[4], since
the array is zero-indexed. If you attempt to access nodes[5], an
error will be thrown like:
TypeError: Cannot read property 'weight' of undefined
I've seen this error, and also it is described by a StackOverflow
member:
https://stackoverflow.com/a/22428106
*/
var mock_data = {
"nodes": [
{
"title": "1959",
"label": "Collection",
"data": {
"name": "1959",
"wikipedia_url": "https://en.wikipedia.org/wiki/1959",
"Type": "YEAR"
}
},
{
"title": "Buffalo Bills",
"label": "Collection",
"data": {
"name": "Buffalo Bills",
"wikipedia_url": "https://en.wikipedia.org/wiki/Buffalo_Bills",
"Type": "ORGANIZATION"
}
},
{
"title": "New Orleans Saints",
"label": "Collection",
"data": {
"name": "New Orleans Saints",
"wikipedia_url": "https://en.wikipedia.org/wiki/New_Orleans_Saints",
"Type": "ORGANIZATION"
}
},
{
"title": "Buffalo",
"label": "Collection",
"data": {
"name": "Buffalo",
"wikipedia_url": "https://en.wikipedia.org/wiki/Buffalo,_New_York",
"Type": "LOCATION"
}
},{
"title": "Kiko Alonso",
"label": "Collection",
"data": {
"name": "Kiko Alonso",
"wikipedia_url": "https://en.wikipedia.org/wiki/Kiko_Alonso",
"Type": "PERSON"
}
}
],
"links": [{
"source": 1,
"target": 0,
"relationShip": "established"
},
{
"source": 1, // Buffalo Bills
"target": 3, // Buffalo, NY
"relationShip": "located in"
},
{
"source": 1, // Buffalo Bills
"target": 2, // New Orleans Saints
"relationShip": "competes against"
},
{
...