Skip to content

Instantly share code, notes, and snippets.

@graus graus/d3.js graph
Last active Oct 27, 2018

Embed
What would you like to do?
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; });
}
});
{
"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
}
@stevevaius

This comment has been minimized.

Copy link

commented Dec 17, 2015

I tried it but mouseover and click options are not working it is static not dynamic as example. What can be problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.