Structure of D3 TSV Module

forked from abrahamdu's block: Structure of D3 TSV Module

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
svg {
    width: 100%;
    height: 100%;
    position: center;
}
    
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
   }
   
.text-anchor { font-size: 22px; font-weight: bold; }
  </style>
</head>
<svg width="900" height="580"></svg>
<body>
  <script>
var tsv_tree =   {
                  "name": "d3.dsvFormat",
                  "value": "16",
                  "level": "steelblue",
                  "children": [
                              {
                              "name": "csv",
                              "value": "12",
                              "level": "red",
                              "children": [
                                          {
                                          "name": "parse",
                                          "value": "10",
                                          "level": "maroon",
                                          "children": [
                                                      {
                                                      "name": "d3.csvParse",
                                                      "value": "8",
                                                      "level": "maroon"
                                                      },
                                                      {
                                                      "name": "d3.csvParseRows",
                                                      "value": "8",
                                                      "level": "maroon"
                                                      }
                                                      ]
                                          },
                                          {
                                          "name": "format",
                                          "value": "10",
                                          "level": "pink",
                                          "children": [
                                                      {
                                                      "name": "d3.csvFormat",
                                                      "value": "8",
                                                      "level": "pink"
                                                      },
                                                      {
                                                      "name": "d3.csvFormatRows",
                                                      "value": "8",
                                                      "level": "pink"
                                                      }
                                                      ]
                                          }
                                          ]
                                },
                               {
                               "name": "tsv",
                               "value": "12",
                               "level": "gold",
                               "children": [
                                           {
                                           "name": "parse",
                                           "value": "10",
                                           "level": "orchid",
                                           "children": [
                                                       {
                                                      "name": "d3.tsvParse",
                                                      "value": "8",
                                                      "level": "orchid"
                                                      },
                                                      {
                                                      "name": "d3.tsvParseRows",
                                                      "value": "8",
                                                      "level": "orchid"
                                                      }
                                                       ]
                                           },
                                           {
                                           "name": "format",
                                           "value": "10",
                                           "level": "lime",
                                           "children": [
                                                        {
                                                      "name": "d3.tsvFormat",
                                                      "value": "8",
                                                      "level": "lime"
                                                      },
                                                      {
                                                      "name": "d3.tsvFormatRows",
                                                      "value": "8",
                                                      "level": "lime"
                                                      }
                                                       ]
                                          }
                                          ]
                                }
                                ]
                    };

var margin = {top: 30, right: 80, bottom: 30, left: 40};
var width = 900 - margin.left - margin.right;
var height = 900 - margin.top - margin.bottom;
    
var tree = d3.tree()
	.size([height - 300, width - 200]);
  
var nodes = d3.hierarchy(tsv_tree, function(d) {
    return d.children;
  });

nodes = tree(nodes);

var g = d3.select("svg")
        .append("g")
        .attr("transform", "translate(" + margin.left*4 + "," + margin.top + ")");

node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? (d.data.value ) * -1 : d.data.value})
      .text(function(d) { return d.data.name; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .style("font-size", "22px")
      .attr("fill", "silver");
  </script>
</body>

https://d3js.org/d3.v4.min.js