D3 Visualization of network data (nodes and links) via json fileWhy can't Python parse this JSON data?How do I POST JSON data with Curl from a terminal/commandline to Test Spring REST?How do I write JSON data to a file?Force Directed Graphs with LabelsHow to prettyprint a JSON file?$location not working in AngularJS using d3.jshow to format time on xAxis use d3.jsd3js - TypeError: string is undefinedarray_replace in D3.js?D3 drag event behaviour: DragEvent.x and DragEvent.y values source
Getting a wrong output using arraylists
Does Lawful Interception of 4G / the proposed 5G provide a back door for hackers as well?
Does kinetic energy warp spacetime?
Repair a file using Audacity?
Was this character’s old age look CGI or make-up?
Early arrival in Australia, early hotel check in not available
Why doesn't Rocket Lab use a solid stage?
iMac 27" 2017 memory upgrade question
Why can't RGB or bicolour LEDs produce a decent yellow?
Why does the Earth follow an elliptical trajectory rather than a parabolic one?
How to Access data returned from Apex class in JS controller using Lightning web component
Extrude the faces of a cube symmetrically along XYZ
Reaction of borax with NaOH
Smallest Guaranteed hash collision cycle length
Meaning of「〜てみたいと思います」
For the erase-remove idiom, why is the second parameter necessary which points to the end of the container?
What is Plautus’s pun about frustum and frustrum?
Speculative Biology of a Haplodiploid Humanoid Species
When a land becomes a creature, is it untapped?
How are one-time password generators like Google Authenticator different from having two passwords?
How does Howard Stark know this?
use the oversamplling followed by '' decimation method ''to increasee the ADC resolution and not normal averaging
Unable to execute two commands in Startup Applications
How to compact two the parabol commands in the following example?
D3 Visualization of network data (nodes and links) via json file
Why can't Python parse this JSON data?How do I POST JSON data with Curl from a terminal/commandline to Test Spring REST?How do I write JSON data to a file?Force Directed Graphs with LabelsHow to prettyprint a JSON file?$location not working in AngularJS using d3.jshow to format time on xAxis use d3.jsd3js - TypeError: string is undefinedarray_replace in D3.js?D3 drag event behaviour: DragEvent.x and DragEvent.y values source
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I would like to visualize network data that consists nodes and links in json file. I'm looking how D3 could be utilized. I haven't tried D3 but seems its good to visualize network data.
Lot of example visualization of data using D3 but I observed the link in json file example always based on source and target or nodes based on index....
If my json file doesn't have source and target key but instead the key used source and destination or the json nodes and links only content the values...can I still leverage D3..?
I expect I can edit D3 to follow my data or the other way a round?..I'm not sure on how to fit my json data onto D3 structure. I have gone the the D3 documentation and some examples but bit lost where to go... Appreciate someone could advise me further. Thank you
Please find example of data json i have
SAMPLE1 (only values of nodes and links):
"nodes":["ser1","ser2","ser3","ser4","ser5"],"links":[["ser1","ser3",10],
["ser1","ser5",30],["ser2","ser3",11],["ser3","ser4",10],
["ser3","ser5",20],["ser2","ser5",30]]
"nodes": [
"ser1",
"ser2",
"ser3",
"ser4",
"ser5"
],
"links": [
[
"ser1",
"ser3",
10
],
[
"ser1",
"ser5",
30
],
[
"ser2",
"ser3",
11
],
[
"ser3",
"ser4",
10
],
[
"ser3",
"ser5",
20
],
[
"ser2",
"ser5",
30
]
]
SAMPLE2 (keys and values of nodes and links:
"nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"]
"nodes": [
"name": "ser1"
,
"name": "ser2"
,
"name": "ser3"
,
"name": "ser4"
,
"name": "ser5"
],
"links": [
"source": "ser1",
"dest": "ser3",
"value": "10"
,
"source": "ser1",
"dest": "ser5",
"value": "10"
,
"source": "ser2",
"dest": "ser4",
"value": "30"
,
"source": "ser3",
"dest": "ser4",
"value": "10"
,
"source": "ser3",
"dest": "ser5",
"value": "10"
]
my index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
</script>my finding below
(1) Only sample2 structure (json data) suitable and can fit onto D3 (Force Directed Graph) (2) To use D3 template, change (i) id=node key (ii) add graph.link = graph.links.map(function(ele) return source: ele.source, target: ele.dest, value: +ele.value ); ( (3) Json data can be internal or external source (4) D3 can provide more values/info based on the data we have
javascript python json d3.js data-visualization
asked Mar 23 at 11:41
chenoichenoi
349
add a comment |
1
I would like to visualize network data that consists nodes and links in json file. I'm looking how D3 could be utilized. I haven't tried D3 but seems its good to visualize network data.
Lot of example visualization of data using D3 but I observed the link in json file example always based on source and target or nodes based on index....
If my json file doesn't have source and target key but instead the key used source and destination or the json nodes and links only content the values...can I still leverage D3..?
I expect I can edit D3 to follow my data or the other way a round?..I'm not sure on how to fit my json data onto D3 structure. I have gone the the D3 documentation and some examples but bit lost where to go... Appreciate someone could advise me further. Thank you
Please find example of data json i have
SAMPLE1 (only values of nodes and links):
"nodes":["ser1","ser2","ser3","ser4","ser5"],"links":[["ser1","ser3",10],
["ser1","ser5",30],["ser2","ser3",11],["ser3","ser4",10],
["ser3","ser5",20],["ser2","ser5",30]]
"nodes": [
"ser1",
"ser2",
"ser3",
"ser4",
"ser5"
],
"links": [
[
"ser1",
"ser3",
10
],
[
"ser1",
"ser5",
30
],
[
"ser2",
"ser3",
11
],
[
"ser3",
"ser4",
10
],
[
"ser3",
"ser5",
20
],
[
"ser2",
"ser5",
30
]
]
SAMPLE2 (keys and values of nodes and links:
"nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"]
"nodes": [
"name": "ser1"
,
"name": "ser2"
,
"name": "ser3"
,
"name": "ser4"
,
"name": "ser5"
],
"links": [
"source": "ser1",
"dest": "ser3",
"value": "10"
,
"source": "ser1",
"dest": "ser5",
"value": "10"
,
"source": "ser2",
"dest": "ser4",
"value": "30"
,
"source": "ser3",
"dest": "ser4",
"value": "10"
,
"source": "ser3",
"dest": "ser5",
"value": "10"
]
my index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
</script>my finding below
(1) Only sample2 structure (json data) suitable and can fit onto D3 (Force Directed Graph) (2) To use D3 template, change (i) id=node key (ii) add graph.link = graph.links.map(function(ele) return source: ele.source, target: ele.dest, value: +ele.value ); ( (3) Json data can be internal or external source (4) D3 can provide more values/info based on the data we have
javascript python json d3.js data-visualization
asked Mar 23 at 11:41
chenoichenoi
349
add a comment |
1
1
1
I would like to visualize network data that consists nodes and links in json file. I'm looking how D3 could be utilized. I haven't tried D3 but seems its good to visualize network data.
Lot of example visualization of data using D3 but I observed the link in json file example always based on source and target or nodes based on index....
If my json file doesn't have source and target key but instead the key used source and destination or the json nodes and links only content the values...can I still leverage D3..?
I expect I can edit D3 to follow my data or the other way a round?..I'm not sure on how to fit my json data onto D3 structure. I have gone the the D3 documentation and some examples but bit lost where to go... Appreciate someone could advise me further. Thank you
Please find example of data json i have
SAMPLE1 (only values of nodes and links):
"nodes":["ser1","ser2","ser3","ser4","ser5"],"links":[["ser1","ser3",10],
["ser1","ser5",30],["ser2","ser3",11],["ser3","ser4",10],
["ser3","ser5",20],["ser2","ser5",30]]
"nodes": [
"ser1",
"ser2",
"ser3",
"ser4",
"ser5"
],
"links": [
[
"ser1",
"ser3",
10
],
[
"ser1",
"ser5",
30
],
[
"ser2",
"ser3",
11
],
[
"ser3",
"ser4",
10
],
[
"ser3",
"ser5",
20
],
[
"ser2",
"ser5",
30
]
]
SAMPLE2 (keys and values of nodes and links:
"nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"]
"nodes": [
"name": "ser1"
,
"name": "ser2"
,
"name": "ser3"
,
"name": "ser4"
,
"name": "ser5"
],
"links": [
"source": "ser1",
"dest": "ser3",
"value": "10"
,
"source": "ser1",
"dest": "ser5",
"value": "10"
,
"source": "ser2",
"dest": "ser4",
"value": "30"
,
"source": "ser3",
"dest": "ser4",
"value": "10"
,
"source": "ser3",
"dest": "ser5",
"value": "10"
]
my index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
</script>my finding below
(1) Only sample2 structure (json data) suitable and can fit onto D3 (Force Directed Graph) (2) To use D3 template, change (i) id=node key (ii) add graph.link = graph.links.map(function(ele) return source: ele.source, target: ele.dest, value: +ele.value ); ( (3) Json data can be internal or external source (4) D3 can provide more values/info based on the data we have
javascript python json d3.js data-visualization
asked Mar 23 at 11:41
chenoichenoi
349
I would like to visualize network data that consists nodes and links in json file. I'm looking how D3 could be utilized. I haven't tried D3 but seems its good to visualize network data.
Lot of example visualization of data using D3 but I observed the link in json file example always based on source and target or nodes based on index....
If my json file doesn't have source and target key but instead the key used source and destination or the json nodes and links only content the values...can I still leverage D3..?
I expect I can edit D3 to follow my data or the other way a round?..I'm not sure on how to fit my json data onto D3 structure. I have gone the the D3 documentation and some examples but bit lost where to go... Appreciate someone could advise me further. Thank you
Please find example of data json i have
SAMPLE1 (only values of nodes and links):
"nodes":["ser1","ser2","ser3","ser4","ser5"],"links":[["ser1","ser3",10],
["ser1","ser5",30],["ser2","ser3",11],["ser3","ser4",10],
["ser3","ser5",20],["ser2","ser5",30]]
"nodes": [
"ser1",
"ser2",
"ser3",
"ser4",
"ser5"
],
"links": [
[
"ser1",
"ser3",
10
],
[
"ser1",
"ser5",
30
],
[
"ser2",
"ser3",
11
],
[
"ser3",
"ser4",
10
],
[
"ser3",
"ser5",
20
],
[
"ser2",
"ser5",
30
]
]
SAMPLE2 (keys and values of nodes and links:
"nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"]
"nodes": [
"name": "ser1"
,
"name": "ser2"
,
"name": "ser3"
,
"name": "ser4"
,
"name": "ser5"
],
"links": [
"source": "ser1",
"dest": "ser3",
"value": "10"
,
"source": "ser1",
"dest": "ser5",
"value": "10"
,
"source": "ser2",
"dest": "ser4",
"value": "30"
,
"source": "ser3",
"dest": "ser4",
"value": "10"
,
"source": "ser3",
"dest": "ser5",
"value": "10"
]
my index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
</script>my finding below
(1) Only sample2 structure (json data) suitable and can fit onto D3 (Force Directed Graph) (2) To use D3 template, change (i) id=node key (ii) add graph.link = graph.links.map(function(ele) return source: ele.source, target: ele.dest, value: +ele.value ); ( (3) Json data can be internal or external source (4) D3 can provide more values/info based on the data we have
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
</script><!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
</script>javascript python json d3.js data-visualization
javascript python json d3.js data-visualization
asked Mar 23 at 11:41
chenoichenoi
349
asked Mar 23 at 11:41
chenoichenoi
349
edited Mar 26 at 0:09
chenoi
asked Mar 23 at 11:41
chenoichenoi
349
asked Mar 23 at 11:41
chenoichenoi
349
asked Mar 23 at 11:41
chenoichenoi
349
349
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
If you want to refer to a property of nodes as opposed to the index
(which is the default) you can use the function link.id().
For reference, see: https://github.com/d3/d3-force#link_id
In your case, you can use sample2 and connect the links with the nodes in following way:
d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
and you just have to rename "dest" into "target":
graph.links = graph.links.map(function(ele)
return
source: ele.source, target: ele.dest, value: +ele.value
);
I slightly adjusted an existing block to load your data, see this example block.
In addition, I added a code snippet here:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="300" height="300"></svg>answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
My json links above is using source, dest and value as the key, how to map it with the source and target as stated in the index.html? Do i need to change source/target according to my links key? This part I'm still puzzle to understand it...appreciate some snippet that can apply based on my simple2 json...thank you
– chenoi
Mar 23 at 16:04
I added an example with your sample2 data
– ee2Dev
Mar 23 at 19:12
I follow ur sample above but nothing appeared on the browser...I provide my index.html above...
– chenoi
Mar 24 at 0:43
That’s strange - when you the run the code snippet button in my answer it should show the graph. Does it give an error message ?
– ee2Dev
Mar 24 at 0:52
Is it because I'm doing all in html file?
– chenoi
Mar 24 at 0:55
|
show 12 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55313363%2fd3-visualization-of-network-data-nodes-and-links-via-json-file%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
If you want to refer to a property of nodes as opposed to the index
(which is the default) you can use the function link.id().
For reference, see: https://github.com/d3/d3-force#link_id
In your case, you can use sample2 and connect the links with the nodes in following way:
d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
and you just have to rename "dest" into "target":
graph.links = graph.links.map(function(ele)
return
source: ele.source, target: ele.dest, value: +ele.value
);
I slightly adjusted an existing block to load your data, see this example block.
In addition, I added a code snippet here:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="300" height="300"></svg>answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
My json links above is using source, dest and value as the key, how to map it with the source and target as stated in the index.html? Do i need to change source/target according to my links key? This part I'm still puzzle to understand it...appreciate some snippet that can apply based on my simple2 json...thank you
– chenoi
Mar 23 at 16:04
I added an example with your sample2 data
– ee2Dev
Mar 23 at 19:12
I follow ur sample above but nothing appeared on the browser...I provide my index.html above...
– chenoi
Mar 24 at 0:43
That’s strange - when you the run the code snippet button in my answer it should show the graph. Does it give an error message ?
– ee2Dev
Mar 24 at 0:52
Is it because I'm doing all in html file?
– chenoi
Mar 24 at 0:55
|
show 12 more comments
1
If you want to refer to a property of nodes as opposed to the index
(which is the default) you can use the function link.id().
For reference, see: https://github.com/d3/d3-force#link_id
In your case, you can use sample2 and connect the links with the nodes in following way:
d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
and you just have to rename "dest" into "target":
graph.links = graph.links.map(function(ele)
return
source: ele.source, target: ele.dest, value: +ele.value
);
I slightly adjusted an existing block to load your data, see this example block.
In addition, I added a code snippet here:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="300" height="300"></svg>answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
My json links above is using source, dest and value as the key, how to map it with the source and target as stated in the index.html? Do i need to change source/target according to my links key? This part I'm still puzzle to understand it...appreciate some snippet that can apply based on my simple2 json...thank you
– chenoi
Mar 23 at 16:04
I added an example with your sample2 data
– ee2Dev
Mar 23 at 19:12
I follow ur sample above but nothing appeared on the browser...I provide my index.html above...
– chenoi
Mar 24 at 0:43
That’s strange - when you the run the code snippet button in my answer it should show the graph. Does it give an error message ?
– ee2Dev
Mar 24 at 0:52
Is it because I'm doing all in html file?
– chenoi
Mar 24 at 0:55
|
show 12 more comments
1
1
1
If you want to refer to a property of nodes as opposed to the index
(which is the default) you can use the function link.id().
For reference, see: https://github.com/d3/d3-force#link_id
In your case, you can use sample2 and connect the links with the nodes in following way:
d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
and you just have to rename "dest" into "target":
graph.links = graph.links.map(function(ele)
return
source: ele.source, target: ele.dest, value: +ele.value
);
I slightly adjusted an existing block to load your data, see this example block.
In addition, I added a code snippet here:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="300" height="300"></svg>answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
If you want to refer to a property of nodes as opposed to the index
(which is the default) you can use the function link.id().
For reference, see: https://github.com/d3/d3-force#link_id
In your case, you can use sample2 and connect the links with the nodes in following way:
d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
and you just have to rename "dest" into "target":
graph.links = graph.links.map(function(ele)
return
source: ele.source, target: ele.dest, value: +ele.value
);
I slightly adjusted an existing block to load your data, see this example block.
In addition, I added a code snippet here:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="300" height="300"></svg>var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="300" height="300"></svg>var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) return d.name; ))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) return
source: ele.source, target: ele.dest, value: +ele.value
);
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) return Math.sqrt(d.value); );
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) return color(d.name); )
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d)
return d.name;
)
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) return d.name; );
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked()
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; );
node
.attr("transform", function(d)
return "translate(" + d.x + "," + d.y + ")";
)
function dragstarted(d)
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
function dragged(d)
d.fx = d3.event.x;
d.fy = d3.event.y;
function dragended(d)
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
function getData()
let json = "nodes":["name":"ser1","name":"ser2","name":"ser3","name":"ser4",
"name":"ser5"],"links":["source":"ser1","dest":"ser3","value":"10",
"source":"ser1","dest":"ser5","value":"10",
"source":"ser2","dest":"ser4","value":"30",
"source":"ser3","dest":"ser4","value":"10",
"source":"ser3","dest":"ser5","value":"10"];
return json;
.links line
stroke: #999;
stroke-opacity: 0.6;
.nodes circle
stroke: #fff;
stroke-width: 1.5px;
text
font-family: sans-serif;
font-size: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg width="300" height="300"></svg>answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
edited Mar 24 at 13:07
answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
answered Mar 23 at 15:03
ee2Devee2Dev
1,1801120
1,1801120
My json links above is using source, dest and value as the key, how to map it with the source and target as stated in the index.html? Do i need to change source/target according to my links key? This part I'm still puzzle to understand it...appreciate some snippet that can apply based on my simple2 json...thank you
– chenoi
Mar 23 at 16:04
I added an example with your sample2 data
– ee2Dev
Mar 23 at 19:12
I follow ur sample above but nothing appeared on the browser...I provide my index.html above...
– chenoi
Mar 24 at 0:43
That’s strange - when you the run the code snippet button in my answer it should show the graph. Does it give an error message ?
– ee2Dev
Mar 24 at 0:52
Is it because I'm doing all in html file?
– chenoi
Mar 24 at 0:55
|
show 12 more comments
My json links above is using source, dest and value as the key, how to map it with the source and target as stated in the index.html? Do i need to change source/target according to my links key? This part I'm still puzzle to understand it...appreciate some snippet that can apply based on my simple2 json...thank you
– chenoi
Mar 23 at 16:04
I added an example with your sample2 data
– ee2Dev
Mar 23 at 19:12
I follow ur sample above but nothing appeared on the browser...I provide my index.html above...
– chenoi
Mar 24 at 0:43
That’s strange - when you the run the code snippet button in my answer it should show the graph. Does it give an error message ?
– ee2Dev
Mar 24 at 0:52
Is it because I'm doing all in html file?
– chenoi
Mar 24 at 0:55
My json links above is using source, dest and value as the key, how to map it with the source and target as stated in the index.html? Do i need to change source/target according to my links key? This part I'm still puzzle to understand it...appreciate some snippet that can apply based on my simple2 json...thank you
– chenoi
Mar 23 at 16:04
My json links above is using source, dest and value as the key, how to map it with the source and target as stated in the index.html? Do i need to change source/target according to my links key? This part I'm still puzzle to understand it...appreciate some snippet that can apply based on my simple2 json...thank you
– chenoi
Mar 23 at 16:04
I added an example with your sample2 data
– ee2Dev
Mar 23 at 19:12
I added an example with your sample2 data
– ee2Dev
Mar 23 at 19:12
I follow ur sample above but nothing appeared on the browser...I provide my index.html above...
– chenoi
Mar 24 at 0:43
I follow ur sample above but nothing appeared on the browser...I provide my index.html above...
– chenoi
Mar 24 at 0:43
That’s strange - when you the run the code snippet button in my answer it should show the graph. Does it give an error message ?
– ee2Dev
Mar 24 at 0:52
That’s strange - when you the run the code snippet button in my answer it should show the graph. Does it give an error message ?
– ee2Dev
Mar 24 at 0:52
Is it because I'm doing all in html file?
– chenoi
Mar 24 at 0:55
Is it because I'm doing all in html file?
– chenoi
Mar 24 at 0:55
|
show 12 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55313363%2fd3-visualization-of-network-data-nodes-and-links-via-json-file%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
