Is it possible to create a graph using only links from a JSON file when using D3.js?

Question

Is it possible to create a graph using only links from a JSON file when using D3.js?

I am looking to extract node information from links data stored in a JSON file. My ultimate goal is to visualize this data by creating a graph with connections and edges.

Here is a snippet from my sample JSON file:

{
    "links": [
        { "source":0, "target":1, "value":20, "orientation":"down" },
        { "source":1, "target":2, "value":1, "orientation":"left" },
        { "source":2, "target":3, "value":1, "orientation":"right" }
    ]
}

This is the JavaScript function I have implemented:

$(function() {

    var width = 500,
        height = 300;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var force = d3.layout.force()
        .gravity(.05)
        .distance(100)
        .charge(-100)
        .size([width, height]);

    d3.json("test_1.json", function(error, json) {
        if (error) throw error;

        var count = 0;
        var nodes = [];


        json.links.forEach(function(e) { 
            count++;
            nodes.push({name: "test_"+e.source, orientation: e.orientation});
        });
        console.log("Count is : "+count);  

        force
            .nodes(json.nodes)
            .links(json.links)
            .start();

        var link = svg.selectAll(".link")
            .data(json.links)
            .enter().append("line")
            .attr("class", "link");

        var node = svg.selectAll(".node")
           .data(json.nodes)
           .attr("class", "node")
           .call(force.drag);

        node.append("circle")
           .attr("class", "node")
           .attr("r", 5);

        force.on("tick", function() {
             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 + ")"; });
        });
    });
});

Unfortunately, I am encountering issues with extracting the list from the function due to an error related to the forEach method of JSON data structure.

If anyone could provide guidance or assistance, it would be greatly appreciated.

UPDATE: The complete code has been added for reference.

Error: Cannot read property 'weight' of undefined.

To resolve this issue, I included additional nodes in my JSON as D3.js always requires a node element in the dataset.

javascript json d3.js

Answer 1

Answer №1

When assigning a newly created nodes array to the variable nodes, make sure to pass it to your force layout instead of using links.nodes.

force
    .nodes(nodes)
    .links(json.links)
    .start();

Alternatively, you can simply add it to the links object.


json.links.forEach(function(entry) { 
    counter++;
    nodes.push({label: "sample_"+entry.source, value: entry.value});
});

links.nodes = nodes;
...

Answer 2

When assigning a newly created nodes array to the variable nodes, make sure to pass it to your force layout instead of using links.nodes.

force
    .nodes(nodes)
    .links(json.links)
    .start();

Alternatively, you can simply add it to the links object.


json.links.forEach(function(entry) { 
    counter++;
    nodes.push({label: "sample_"+entry.source, value: entry.value});
});

links.nodes = nodes;
...

Answer 3

Answer №2

After some trial and error, I was able to come up with a solution:

Here is a snippet of my JSON file:

[
    {"source":"entry","target":"chocolate","value":20,"orientation":"down","x": 200, "y": 150},
    {"source":"chocolate","target":"bread","value":1,"orientation":"left","x": 140, "y": 300},
     {"source":"bread","target":"soap","value":1,"orientation":"right","x": 400, "y": 190}
    ]

This is the JavaScript code that helped me visualize the data:

var width = 960,
    height = 500;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var force = d3.layout.force()
    .size([width, height])
    .linkDistance(20)
    .charge(-500);

d3.json("name.json", function(error, links) {
  if (error) throw error;
  var nodesByName = {};
  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
  });
  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodesByName);
  // Create the link lines.
  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("line")
      .attr("class", "link");
  // Create the node circles.

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 4.5)
      .call(force.drag); 

  // Start the force layout.
  force
      .nodes(nodes)
      .links(links)
      .on("tick", tick)
      .start();

  function tick() {
    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});
});

The script successfully visualizes the provided data in a graphical layout.

For more information, you can refer to this source: https://gist.github.com/mbostock/2949937

Thank you!

Answer 4

After some trial and error, I was able to come up with a solution:

Here is a snippet of my JSON file:

[
    {"source":"entry","target":"chocolate","value":20,"orientation":"down","x": 200, "y": 150},
    {"source":"chocolate","target":"bread","value":1,"orientation":"left","x": 140, "y": 300},
     {"source":"bread","target":"soap","value":1,"orientation":"right","x": 400, "y": 190}
    ]

This is the JavaScript code that helped me visualize the data:

var width = 960,
    height = 500;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var force = d3.layout.force()
    .size([width, height])
    .linkDistance(20)
    .charge(-500);

d3.json("name.json", function(error, links) {
  if (error) throw error;
  var nodesByName = {};
  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
  });
  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodesByName);
  // Create the link lines.
  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("line")
      .attr("class", "link");
  // Create the node circles.

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 4.5)
      .call(force.drag); 

  // Start the force layout.
  force
      .nodes(nodes)
      .links(links)
      .on("tick", tick)
      .start();

  function tick() {
    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});
});

The script successfully visualizes the provided data in a graphical layout.

For more information, you can refer to this source: https://gist.github.com/mbostock/2949937

Thank you!

Is it possible to create a graph using only links from a JSON file when using D3.js?

Answer №1

Answer №2

Similar questions

Is there a way to broadcast a message to all the Discord servers where my bot is currently active using v14 of discord.js?

Is it possible to create a dynamic header or image that expands and zooms

If an Angular reactive form component has a particular value

Exclude the HTML attribute prior to displaying

The tooltip chart is not displaying all of its data

Troubleshooting Images in a React Application Integrated with WordPress API

Encountering a problem during the installation process of cldr

Extract JSON components from MQTT Socket in Flask

Sharing authentication sessions between Node.js and Redis

Verify the form's accuracy prior to transmitting the information through AJAX to the designated resources on Liferay version 7.3.5

Creating an application that retrieves JSON data from the tmdb.org API

Repeated actions using jQuery

Attempting to showcase PHP print statement within HTML using JSON

JavaScript: function that operates asynchronously

The Google reCaptcha fails to load if Bootstrap is used to call the remote modal

Tips for verifying if a JSON element is a JSON primitive

Executing a JavaScript command within an R package had become a common practice among

Menu options

How can PHP handle JSON data that arrives in an incomplete format?

How come my uvmapped texture is flipping vertically when using iewebgl + threejs?