Skip to content

Instantly share code, notes, and snippets.

@graus
Last active January 7, 2023 23:15
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save graus/3bb91d6854b4ecbb4e40 to your computer and use it in GitHub Desktop.
Save graus/3bb91d6854b4ecbb4e40 to your computer and use it in GitHub Desktop.
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
Copy link

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