I've been experimenting with a graph that I found in this demo and now I want to modify it to display data from Spotify.
I created a sample JSON file and adjusted the script accordingly for the new data format, everything seems to be working fine except for one issue - my links are not displaying properly, I only see one edge connecting two nodes.
Here is an excerpt of my sample JSON:
{
"tracks": [{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/7b71WsDLb8gG0cSyDTFAEW",
"track_name": "Summer",
"artist_name": "Calvin Harris",
...
}
{
"date": "2014-05-11",
...
}],
"links": [{
"source": 0,
"target": 1,
"weight": 5
},
{
...
}]
}
and here's my modified code snippet:
d3.json(
'latest-new.json',
function(data) {
// Declare the variables pointing to the node & link arrays
var nodeArray = data.tracks;
var linkArray = data.links;
console.log(data.links);
...
);
Upon examining the code further, it appears that the issue might lie in these lines:
var graphLinks = networkGraph.append('svg:g').attr('class','grp gLinks')
.selectAll("line")
.data(linkArray, function(d) {console.log(d); return d.source.id+'-'+d.target.id;} )
.enter().append("line")
.style('stroke-width', function(d) { return edge_width(d.weight);} )
.attr("class", "link");
The problem arises from the fact that d.source.id and d.targer.id are null fields in my data.
I am considering replacing them with either track_url or index as temporary identifiers to observe any changes in the output.
Substituting one of these properties results in all nodes being connected to each other, forming a complete graph. It is evident there is a fundamental error in my approach, and despite following similar JSON structures in various examples, the exact source of the problem remains elusive.