title: How to render json as a network chart using d3
body: <p>This is what my data looks like</p>
  
  <pre><code> "nodes": [
          {
              "name": "sender"
          },
          {
              "name": "0"
          },
          {
              "name": "1"
          },
          {
              "name": "2"
          },
          {
              "name": "3"
          },
          {
              "name": "4"
          },
          {
              "name": "5"
          },
          {
              "name": "6"
          },
          {
              "name": "7"
          },
          {
              "name": "8"
          },
          {
              "name": "9"
          },
          {
              "name": "10"
          },
          {
              "name": "11"
          },
          {
              "name": "12"
          },
          {
              "name": "13"
          },
          {
              "name": "14"
          },
          {
              "name": "15"
          },
          {
              "name": "16"
          },
          {
              "name": "17"
          },
          {
              "name": "18"
          },
          {
              "name": "19"
          },
          {
              "name": "20"
          },
          {
              "name": "21"
          },
          {
              "name": "22"
          },
          {
              "name": "23"
          },
          {
              "name": "24"
          },
          {
              "name": "25"
          },
          {
              "name": "26"
          },
          {
              "name": "27"
          },
          {
              "name": "28"
          },
          {
              "name": "29"
          },
          {
              "name": "[16]"
          }
      ],
      "links": [
          {
              "source": "sender",
              "target": "[16]"
          }
      ]
  }
  </code></pre>
  
  <p>I need to render these on the screen using d3. This is what my code looks like:</p>
  
  <pre><code>function drawChart(data) {
      // set the dimensions and margins of the graph
      // set the dimensions and margins of the graph
  var margin = {top: 10, right: 30, bottom: 30, left: 40},
    width = 400 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
  
  // append the svg object to the body of the page
  var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
  
  
  
    // Initialize the links
    var link = svg
      .selectAll("line")
      .data(data.links)
      .enter()
      .append("line")
        .style("stroke", "#aaa")
  
    // Initialize the nodes
    var node = svg
      .selectAll("circle")
      .data(data.nodes)
      .enter()
      .append("circle")
        .attr("r", 20)
        .style("fill", "#69b3a2")
  
  
  
    // Let's list the force we wanna apply on the network
    var simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
        .force("link", d3.forceLink()                               // This force provides links between nodes
              .id(function(d) { return d.id; })                     // This provide  the id of a node
              .links(data.links)                                    // and this the list of links
        )
        .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
        .force("center", d3.forceCenter(width / 2, height / 2))     // This force attracts nodes to the center of the svg area
        .on("end", ticked);
  
  
  
  
  }
  </code></pre>
  
  <p>According to one of the answers, we need to create a hierarchy in order for d3 to render it as a graph but I don't know how to incorporate that.
  This is the first time that I am working with D3 so any leads would be helpful</p>