Skip to content

Instantly share code, notes, and snippets.

@tlkahn

tlkahn/d3.js graph

Forked from graus/d3.js graph
Created December 7, 2015 08:17
Show Gist options
  • Save tlkahn/35e38533199e0258c96f to your computer and use it in GitHub Desktop.
Save tlkahn/35e38533199e0258c96f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3.js graph
var graph = 'graph.json'
var w = 960,
h = 700,
r = 10;
var vis = d3.select(".graph")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("pointer-events", "all")
.append('svg:g')
.call(d3.behavior.zoom().on("zoom", redraw))
.append('svg:g');
vis.append('svg:rect')
.attr('width', w)
.attr('height', h)
.attr('fill', 'rgba(1,1,1,0)')
function redraw() {
console.log("here", d3.event.translate, d3.event.scale);
vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); }
var force = d3.layout.force()
.gravity(.05)
.charge(-200)
.linkDistance( 60 )
.size([w, h]);
var svg = d3.select(".text").append("svg")
.attr("width", w)
.attr("height", h);
d3.json(graph, function(json) {
var link = vis.selectAll("line")
.data(json.links)
.enter().append("line")
.attr("stroke-opacity", function(d) { if(d.label == 'is a') { return '0.8';} else{ return '0.2'; }; })
.attr("stroke-width","6")
.style("stroke", function(d) { if(d.color !== null) { return d.color;}; })
.on("mouseover", function(){d3.select(this).style("stroke", "#999999").attr("stroke-opacity", "1.0");})
.on("mouseout", function(){d3.select(this).style("stroke", function(d) { if(d.color !== null) { return d.color;}; }).attr("stroke-opacity", function(d) { if(d.label == 'is a') { return '0.8';} else { return '0.2'; };}) });
link.append("title")
.text(function(d) { return d.label } );
var node = vis.selectAll("g.node")
.data(json.nodes)
.enter().append("svg:g")
.attr("class","node")
.call(force.drag);
node.append("svg:circle")
.attr("r", function(d) {
if (d.size > 0)
{ return 10+(d.size*2); }
else
{ return 10; }} )
.style("fill", function(d) { if(d.style == 'filled') { return d.color;}; })
.style("stroke", function(d) { if(d.style !== 'filled') { return d.color;}; })
.style("stroke-width", "4")
.on("mouseover", function(){d3.select(this).style("fill", "#999");})
.on("mouseout", function(d) {
if (d.style == 'filled') { d3.select(this).style("fill",d.color); }
else {
d3.select(this).style("stroke",d.color);
d3.select(this).style("fill","black");
} } );
node.append("svg:text")
.attr("text-anchor", "middle")
.attr("fill","white")
.style("pointer-events", "none")
.attr("font-size", function(d) { if (d.color == '#b94431') { return 10+(d.size*2) + 'px'; } else { return "9px"; } } )
.attr("font-weight", function(d) { if (d.color == '#b94431') { return "bold"; } else { return "100"; } } )
.text( function(d) { if (d.color == '#b94431') { return d.id + ' (' + d.size + ')';} else { return d.id;} } ) ;
node.append("title")
.text(function(d) { return d.URI } );
force
.nodes(json.nodes)
.links(json.links)
.on("tick", tick)
.start();
function tick() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";});
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
}
});
Raw
graph.json
{
"directed": true,
"graph": [],
"nodes": [
{
"color": "#da991c",
"id": "Brain Part"
},
{
"color": "#b94431",
"size": 9,
"id": "Corpus Callosum",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Corpus_Callosum"
},
{
"color": "#333333",
"id": "Diagnostic Procedure"
},
{
"color": "#b94431",
"size": 6,
"id": "Cerebral Fornix",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Cerebral_Fornix"
},
{
"id": "Cerebral Hemisphere"
},
{
"id": "Cerebral Gyrus"
},
{
"color": "#b94431",
"size": 7,
"id": "Magnetic Resonance Imaging",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Magnetic_Resonance_Imaging"
},
{
"color": "#b94431",
"size": 6,
"id": "Thalamus",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Thalamus"
},
{
"color": "#333333",
"id": "Imaging Technique"
},
{
"color": "#b94431",
"size": 3,
"id": "Sagittal Plane",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Sagittal_Plane"
},
{
"color": "#333333",
"id": "Plane"
},
{
"color": "#b94431",
"size": 6,
"id": "White Matter",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#White_Matter"
},
{
"color": "#333333",
"id": "Nerve Tissue and Nerve Sheaths"
},
{
"id": "Brain White Matter"
},
{
"id": "Brain Ventricle"
},
{
"id": "Technique"
},
{
"id": "Physical Chemical Technique"
},
{
"id": "Diagnostic Imaging"
},
{
"id": "Organ"
},
{
"color": "#333333",
"id": "Splenium of the Corpus Callosum"
},
{
"color": "#333333",
"id": "Central Nervous System Part"
},
{
"color": "#333333",
"id": "Clinical or Research Activity"
},
{
"color": "#333333",
"id": "Cerebral White Matter"
},
{
"color": "#333333",
"id": "Nerve Tissue, Neuroepithelial Tissue, and Nerve Sheaths"
},
{
"id": "Thing"
},
{
"id": "Infratentorial Brain"
},
{
"id": "Spectroscopy"
},
{
"id": "Forebrain"
},
{
"id": "Thalamencephalon"
},
{
"color": "#da991c",
"id": "Anatomic Structure, System, or Substance"
},
{
"color": "#da991c",
"id": "Nerve Tissue"
},
{
"id": "Activity"
},
{
"color": "#333333",
"id": "Nervous System Part"
},
{
"color": "#333333",
"id": "Cerebral Cortex"
},
{
"color": "#333333",
"id": "Intervention or Procedure"
},
{
"id": "Brain"
},
{
"color": "#333333",
"id": "Body Part"
},
{
"color": "#333333",
"id": "Tissue"
},
{
"color": "#b94431",
"size": 7,
"id": "Lateral Ventricle",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Lateral_Ventricle"
},
{
"color": "#b94431",
"size": 7,
"id": "Cingulate Gyrus",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Cingulate_Gyrus"
},
{
"color": "#b94431",
"size": 6,
"id": "Mamillary Body",
"URI": "http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Mamillary_Body"
},
{
"color": "#333333",
"id": "Conceptual Entity"
},
{
"color": "#333333",
"id": "Occipital Horn of the Lateral Ventricle"
},
{
"id": "Research Technique"
}
],
"links": [
{
"source": 0,
"target": 20
},
{
"color": "#b94431",
"source": 1,
"target": 4
},
{
"color": "#b94431",
"source": 1,
"target": 22
},
{
"source": 2,
"target": 34
},
{
"color": "#b94431",
"source": 3,
"target": 0
},
{
"color": "#b94431",
"source": 3,
"target": 4
},
{
"color": "#b94431",
"source": 4,
"target": 27
},
{
"color": "#b94431",
"source": 5,
"target": 0
},
{
"color": "#b94431",
"source": 5,
"target": 33
},
{
"color": "#b94431",
"source": 6,
"target": 17
},
{
"color": "#b94431",
"source": 7,
"target": 0
},
{
"color": "#b94431",
"source": 7,
"target": 28
},
{
"source": 8,
"target": 2
},
{
"color": "#b94431",
"source": 9,
"target": 10
},
{
"color": "#b94431",
"source": 10,
"target": 41
},
{
"source": 11,
"target": 30
},
{
"source": 12,
"target": 23
},
{
"color": "#b94431",
"source": 13,
"target": 35
},
{
"color": "#b94431",
"source": 13,
"target": 11
},
{
"color": "#b94431",
"source": 13,
"target": 0
},
{
"color": "#b94431",
"source": 14,
"target": 35
},
{
"source": 14,
"target": 0
},
{
"color": "#b94431",
"source": 15,
"target": 31
},
{
"color": "#b94431",
"source": 16,
"target": 43
},
{
"source": 17,
"target": 8
},
{
"color": "#b94431",
"source": 18,
"target": 29
},
{
"color": "#b94431",
"source": 19,
"target": 0
},
{
"color": "#b94431",
"source": 19,
"target": 1
},
{
"source": 20,
"target": 32
},
{
"source": 21,
"target": 31
},
{
"color": "#b94431",
"source": 22,
"target": 13
},
{
"source": 23,
"target": 37
},
{
"color": "#b94431",
"source": 25,
"target": 35
},
{
"color": "#b94431",
"source": 25,
"target": 0
},
{
"color": "#b94431",
"source": 26,
"target": 16
},
{
"color": "#b94431",
"source": 26,
"target": 17
},
{
"color": "#b94431",
"source": 27,
"target": 35
},
{
"color": "#b94431",
"source": 28,
"target": 35
},
{
"source": 29,
"target": 24
},
{
"source": 30,
"target": 12
},
{
"source": 31,
"target": 24
},
{
"source": 32,
"target": 36
},
{
"color": "#b94431",
"source": 33,
"target": 4
},
{
"source": 34,
"target": 21
},
{
"color": "#b94431",
"source": 35,
"target": 18
},
{
"source": 36,
"target": 29
},
{
"source": 37,
"target": 29
},
{
"color": "#b94431",
"source": 38,
"target": 4
},
{
"color": "#b94431",
"source": 38,
"target": 14
},
{
"color": "#b94431",
"source": 39,
"target": 5
},
{
"color": "#b94431",
"source": 40,
"target": 0
},
{
"source": 41,
"target": 24
},
{
"color": "#b94431",
"source": 42,
"target": 0
},
{
"color": "#b94431",
"source": 42,
"target": 38
},
{
"color": "#b94431",
"source": 43,
"target": 15
}
],
"multigraph": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment