title: How to use d3.js to visualize a JSON tree graph?
body: <h1>tl;dr</h1>
  
  <ul>
  <li><p>How to make <a href="https://bl.ocks.org/mbostock/4063550" rel="nofollow noreferrer">Radial Tidy Tree</a> work with JSON tree data from <a href="https://networkx.github.io/documentation/stable/reference/readwrite/json_graph.html" rel="nofollow noreferrer">networkx</a>'s <code>node_link_data(G[, attrs])</code> or <code>tree_data(G, root[, attrs])</code>?</p></li>
  <li><p>How to make <a href="https://beta.observablehq.com/@mbostock/d3-cluster-dendrogram" rel="nofollow noreferrer">D3 Cluster Dendrogram</a> work with JSON tree data from <a href="https://networkx.github.io/documentation/stable/reference/readwrite/json_graph.html" rel="nofollow noreferrer">networkx</a>'s <code>node_link_data(G[, attrs])</code> or <code>tree_data(G, root[, attrs])</code>?</p></li>
  <li><p>How to make <a href="https://beta.observablehq.com/@mbostock/d3-tidy-tree" rel="nofollow noreferrer">D3 Tidy Tree</a> work with JSON tree data from <a href="https://networkx.github.io/documentation/stable/reference/readwrite/json_graph.html" rel="nofollow noreferrer">networkx</a>'s <code>node_link_data(G[, attrs])</code> or <code>tree_data(G, root[, attrs])</code>?</p></li>
  </ul>
  
  <p>The examples don't use the JSON format, but a CSV-style input.</p>
  
  <h1>The long version</h1>
  
  <p>Hi,</p>
  
  <p>I am using Python and networkx to generate graph data (which is mostly tree-like). I can export the data to JSON using the networkx functions mentioned on <a href="https://networkx.github.io/documentation/stable/reference/readwrite/json_graph.html" rel="nofollow noreferrer">their page</a>: </p>
  
  <ul>
  <li><code>node_link_data(G[, attrs])</code> : Return data in node-link format that is suitable for JSON serialization and use in Javascript documents.</li>
  <li><code>adjacency_data(G[, attrs])</code> : Return data in adjacency format that is suitable for JSON serialization and use in Javascript documents.</li>
  <li><code>tree_data(G, root[, attrs])</code> : Return data in tree format that is suitable for JSON serialization and use in Javascript documents.</li>
  </ul>
  
  <p>The documentation of networkx explicitly mentions:</p>
  
  <blockquote>
    <p>tree like in the d3.js example <a href="https://bl.ocks.org/mbostock/4063550" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/4063550</a></p>
  </blockquote>
  
  <p>However, the <a href="https://bl.ocks.org/mbostock/4063550" rel="nofollow noreferrer">linked example</a> doesn't seem to make use of the JSON tree format, but uses a <a href="https://bl.ocks.org/mbostock/4063550#flare.csv" rel="nofollow noreferrer"><code>csv</code> type of input</a>. As my javascript-skilz are essentially zero, I do not understand how to make Mike Bostock's example work with the JSON data I have. Can you help?</p>
  
  <h1>Example JSON</h1>
  
  <pre><code>{
    "issueid": "3295658",
    "issuetype": "Portfolio-Epic",
    "status": "In Progress",
    "pirank": 24,
    "id": "ATROB-2523",
    "children": [
      {
        "issueid": "3288189",
        "issuetype": "Epic",
        "status": "Implementation",
        "id": "ATTDATA-233",
        "children": [
          {
            "issueid": "3305730",
            "issuetype": "Task",
            "status": "Implementation",
            "id": "ATTDATA-363"
          },
          {
            "issueid": "3305723",
            "issuetype": "Task",
            "status": "Open",
            "id": "ATTDATA-361"
          },
          {
            "issueid": "3301728",
            "issuetype": "Task",
            "status": "Open",
            "id": "ATTDATA-336"
          },
          {
            "issueid": "3297381",
            "issuetype": "Task",
            "status": "Closed",
            "id": "ATTDATA-300"
          },
          {
            "issueid": "3295913",
            "issuetype": "Task",
            "status": "Review",
            "id": "ATTDATA-290"
          },
          {
            "issueid": "3295893",
            "issuetype": "Task",
            "status": "Open",
            "id": "ATTDATA-289"
          },
          {
            "issueid": "3291658",
            "issuetype": "Task",
            "status": "Closed",
            "id": "ATTDATA-256"
          },
          {
            "issueid": "3291653",
            "issuetype": "Task",
            "status": "Closed",
            "id": "ATTDATA-255"
          },
          {
            "issueid": "3291530",
            "issuetype": "Task",
            "status": "Open",
            "id": "ATTDATA-253"
          },
          {
            "issueid": "3290232",
            "issuetype": "Task",
            "status": "Open",
            "id": "ATTDATA-247"
          },
          {
            "issueid": "3287061",
            "issuetype": "Task",
            "status": "Resolved",
            "id": "ATTDATA-226"
          }
        ]
      },
      {
        "issueid": "3300899",
        "issuetype": "Request",
        "status": "REJECTED",
        "id": "ATI-1478"
      }
    ]
  }
  </code></pre>