<head>
<meta charset="utf-8">
<script src="d3.js"></script>
</head>
<body>
<div id="title">Network Visualization</div>
<div id="my_dataviz"></div>
<img id="imgID">
</body>
.links:hover {
stroke: red;
stroke-width: 8px;
}
.nodes:onclick {
fill: green;
}
.nodes:hover {
fill: purple;
}
.links:onlick{
window.open("https://www.amazon.com", target = "_blank")
}
img#imgID {
width: 600px;
height: 600px;
}network_data = {
"nodes":
[
{"id":"ser1"},
{"id":"ser2"},
{"id":"ser3"},
{"id":"ser4"},
{"id":"ser5"},
],
"links":[
{"source":"ser1","target":"ser3"},
{"source":"ser1","target":"ser5"},{"source":"ser2","target":"ser3"},{"source":"ser3","target":"ser4"},
{"source":"ser3","target":"ser5"},{"source":"ser2","target":"ser5"}
]
}
// how to put as NODE image?
// and why is it just showing a blank?
var img = new Image();
img.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png";
document.getElementById('imgID').appendChild(img);
w = 500
h = 500
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("height", h)
.attr("width",w);
d3.forceSimulation(network_data.nodes)
.force("links",
d3.forceLink(network_data.links)
.distance(1)
.id(d=>d.id))
.force("links", d3.forceCenter(200,200))
.force("nodes", d3.forceCollide(50))
.on( "end", function() {
svg.append("g")
.selectAll("line")
.data(network_data.links)
.enter()
.append("line")
.attr("stroke","black")
.attr("stroke-width", 4)
.attr("class","links elements")
.attr("x1",d => d.source.x)
.attr("y1",d => d.source.y)
.attr("x2",d => d.target.x)
.attr("y2",d => d.target.y)
// should be summary of manifesto or letter or whattever
.append("title")
.text((d) => ["test"])
.on('click', function(d) {window.open("https://www.target.com", target = "_blank");
});
svg.append("g")
.selectAll("circle")
.data(network_data.nodes)
.enter()
.append("circle")
.attr("r",8)
.attr("fill","pink")
.attr("class","nodes elements")
.attr("cx", d=>d.x)
.attr("cy", d=>d.y)
// the following is edunant with, and overpowers
// .nodes:onclick {
// fill: green;
// }
// in the CSS
.on('click', function(d) {
d3.select(this)
.style('fill', 'green');
})
});
External CSS
This Pen doesn't use any external CSS resources.