html - How to implement D3 hierarchy view -

i trying make hierarchy table, in want show tree-structure of d3js.org, not showing. can of me in solving problem.

i using code : index.html , readme.json https://gist.github.com/mbostock/1062288 link.

but using these 2 files , same code given in link, unable see hierarchy. https://gist.github.com/mbostock/1062288.

// readme.json        {   "name": "flare",   "children": [    {     "name": "analytics",     "children": [      {       "name": "cluster",       "children": [        {"name": "agglomerativecluster", "size": 3938},        {"name": "communitystructure", "size": 3812},        {"name": "hierarchicalcluster", "size": 6714},        {"name": "mergeedge", "size": 743}       ]      },      {       "name": "graph",       "children": [        {"name": "betweennesscentrality", "size": 3534},        {"name": "linkdistance", "size": 5731},        {"name": "maxflowmincut", "size": 7840},        {"name": "shortestpaths", "size": 5914},        {"name": "spanningtree", "size": 3416}       ]      },      {       "name": "optimization",       "children": [        {"name": "aspectratiobanker", "size": 7074}       ]      }     ]    },    {     "name": "animate",     "children": [      {"name": "easing", "size": 17010},      {"name": "functionsequence", "size": 5842},      {       "name": "interpolate",       "children": [        {"name": "arrayinterpolator", "size": 1983},        {"name": "colorinterpolator", "size": 2047},        {"name": "dateinterpolator", "size": 1375},        {"name": "interpolator", "size": 8746},        {"name": "matrixinterpolator", "size": 2202},        {"name": "numberinterpolator", "size": 1382},        {"name": "objectinterpolator", "size": 1629},        {"name": "pointinterpolator", "size": 1675},        {"name": "rectangleinterpolator", "size": 2042}       ]      },      {"name": "ischedulable", "size": 1041},      {"name": "parallel", "size": 5176},      {"name": "pause", "size": 449},      {"name": "scheduler", "size": 5593},      {"name": "sequence", "size": 5534},      {"name": "transition", "size": 9201},      {"name": "transitioner", "size": 19975},      {"name": "transitionevent", "size": 1116},      {"name": "tween", "size": 6006}     ]    },    {     "name": "data",     "children": [      {       "name": "converters",       "children": [        {"name": "converters", "size": 721},        {"name": "delimitedtextconverter", "size": 4294},        {"name": "graphmlconverter", "size": 9800},        {"name": "idataconverter", "size": 1314},        {"name": "jsonconverter", "size": 2220}       ]      },      {"name": "datafield", "size": 1759},      {"name": "dataschema", "size": 2165},      {"name": "dataset", "size": 586},      {"name": "datasource", "size": 3331},      {"name": "datatable", "size": 772},      {"name": "datautil", "size": 3322}     ]    },    {     "name": "display",     "children": [      {"name": "dirtysprite", "size": 8833},      {"name": "linesprite", "size": 1732},      {"name": "rectsprite", "size": 3623},      {"name": "textsprite", "size": 10066}     ]    },    {     "name": "flex",     "children": [      {"name": "flarevis", "size": 4116}     ]    },    {     "name": "physics",     "children": [      {"name": "dragforce", "size": 1082},      {"name": "gravityforce", "size": 1336},      {"name": "iforce", "size": 319},      {"name": "nbodyforce", "size": 10498},      {"name": "particle", "size": 2822},      {"name": "simulation", "size": 9983},      {"name": "spring", "size": 2213},      {"name": "springforce", "size": 1681}     ]    },    {     "name": "query",     "children": [      {"name": "aggregateexpression", "size": 1616},      {"name": "and", "size": 1027},      {"name": "arithmetic", "size": 3891},      {"name": "average", "size": 891},      {"name": "binaryexpression", "size": 2893},      {"name": "comparison", "size": 5103},      {"name": "compositeexpression", "size": 3677},      {"name": "count", "size": 781},      {"name": "dateutil", "size": 4141},      {"name": "distinct", "size": 933},      {"name": "expression", "size": 5130},      {"name": "expressioniterator", "size": 3617},      {"name": "fn", "size": 3240},      {"name": "if", "size": 2732},      {"name": "isa", "size": 2039},      {"name": "literal", "size": 1214},      {"name": "match", "size": 3748},      {"name": "maximum", "size": 843},      {       "name": "methods",       "children": [        {"name": "add", "size": 593},        {"name": "and", "size": 330},        {"name": "average", "size": 287},        {"name": "count", "size": 277},        {"name": "distinct", "size": 292},        {"name": "div", "size": 595},        {"name": "eq", "size": 594},        {"name": "fn", "size": 460},        {"name": "gt", "size": 603},        {"name": "gte", "size": 625},        {"name": "iff", "size": 748},        {"name": "isa", "size": 461},        {"name": "lt", "size": 597},        {"name": "lte", "size": 619},        {"name": "max", "size": 283},        {"name": "min", "size": 283},        {"name": "mod", "size": 591},        {"name": "mul", "size": 603},        {"name": "neq", "size": 599},        {"name": "not", "size": 386},        {"name": "or", "size": 323},        {"name": "orderby", "size": 307},        {"name": "range", "size": 772},        {"name": "select", "size": 296},        {"name": "stddev", "size": 363},        {"name": "sub", "size": 600},        {"name": "sum", "size": 280},        {"name": "update", "size": 307},        {"name": "variance", "size": 335},        {"name": "where", "size": 299},        {"name": "xor", "size": 354},        {"name": "_", "size": 264}       ]      },      {"name": "minimum", "size": 843},      {"name": "not", "size": 1554},      {"name": "or", "size": 970},      {"name": "query", "size": 13896},      {"name": "range", "size": 1594},      {"name": "stringutil", "size": 4130},      {"name": "sum", "size": 791},      {"name": "variable", "size": 1124},      {"name": "variance", "size": 1876},      {"name": "xor", "size": 1101}     ]    },    {     "name": "scale",     "children": [      {"name": "iscalemap", "size": 2105},      {"name": "linearscale", "size": 1316},      {"name": "logscale", "size": 3151},      {"name": "ordinalscale", "size": 3770},      {"name": "quantilescale", "size": 2435},      {"name": "quantitativescale", "size": 4839},      {"name": "rootscale", "size": 1756},      {"name": "scale", "size": 4268},      {"name": "scaletype", "size": 1821},      {"name": "timescale", "size": 5833}     ]    },    {     "name": "util",     "children": [      {"name": "arrays", "size": 8258},      {"name": "colors", "size": 10001},      {"name": "dates", "size": 8217},      {"name": "displays", "size": 12555},      {"name": "filter", "size": 2324},      {"name": "geometry", "size": 10993},      {       "name": "heap",       "children": [        {"name": "fibonacciheap", "size": 9354},        {"name": "heapnode", "size": 1233}       ]      },      {"name": "ievaluable", "size": 335},      {"name": "ipredicate", "size": 383},      {"name": "ivalueproxy", "size": 874},      {       "name": "math",       "children": [        {"name": "densematrix", "size": 3165},        {"name": "imatrix", "size": 2815},        {"name": "sparsematrix", "size": 3366}       ]      },      {"name": "maths", "size": 17705},      {"name": "orientation", "size": 1486},      {       "name": "palette",       "children": [        {"name": "colorpalette", "size": 6367},        {"name": "palette", "size": 1229},        {"name": "shapepalette", "size": 2059},        {"name": "sizepalette", "size": 2291}       ]      },      {"name": "property", "size": 5559},      {"name": "shapes", "size": 19118},      {"name": "sort", "size": 6887},      {"name": "stats", "size": 6557},      {"name": "strings", "size": 22026}     ]    },    {     "name": "vis",     "children": [      {       "name": "axis",       "children": [        {"name": "axes", "size": 1302},        {"name": "axis", "size": 24593},        {"name": "axisgridline", "size": 652},        {"name": "axislabel", "size": 636},        {"name": "cartesianaxes", "size": 6703}       ]      },      {       "name": "controls",       "children": [        {"name": "anchorcontrol", "size": 2138},        {"name": "clickcontrol", "size": 3824},        {"name": "control", "size": 1353},        {"name": "controllist", "size": 4665},        {"name": "dragcontrol", "size": 2649},        {"name": "expandcontrol", "size": 2832},        {"name": "hovercontrol", "size": 4896},        {"name": "icontrol", "size": 763},        {"name": "panzoomcontrol", "size": 5222},        {"name": "selectioncontrol", "size": 7862},        {"name": "tooltipcontrol", "size": 8435}       ]      },      {       "name": "data",       "children": [        {"name": "data", "size": 20544},        {"name": "datalist", "size": 19788},        {"name": "datasprite", "size": 10349},        {"name": "edgesprite", "size": 3301},        {"name": "nodesprite", "size": 19382},        {         "name": "render",         "children": [          {"name": "arrowtype", "size": 698},          {"name": "edgerenderer", "size": 5569},          {"name": "irenderer", "size": 353},          {"name": "shaperenderer", "size": 2247}         ]        },        {"name": "scalebinding", "size": 11275},        {"name": "tree", "size": 7147},        {"name": "treebuilder", "size": 9930}       ]      },      {       "name": "events",       "children": [        {"name": "dataevent", "size": 2313},        {"name": "selectionevent", "size": 1880},        {"name": "tooltipevent", "size": 1701},        {"name": "visualizationevent", "size": 1117}       ]      },      {       "name": "legend",       "children": [        {"name": "legend", "size": 20859},        {"name": "legenditem", "size": 4614},        {"name": "legendrange", "size": 10530}       ]      },      {       "name": "operator",       "children": [        {         "name": "distortion",         "children": [          {"name": "bifocaldistortion", "size": 4461},          {"name": "distortion", "size": 6314},          {"name": "fisheyedistortion", "size": 3444}         ]        },        {         "name": "encoder",         "children": [          {"name": "colorencoder", "size": 3179},          {"name": "encoder", "size": 4060},          {"name": "propertyencoder", "size": 4138},          {"name": "shapeencoder", "size": 1690},          {"name": "sizeencoder", "size": 1830}         ]        },        {         "name": "filter",         "children": [          {"name": "fisheyetreefilter", "size": 5219},          {"name": "graphdistancefilter", "size": 3165},          {"name": "visibilityfilter", "size": 3509}         ]        },        {"name": "ioperator", "size": 1286},        {         "name": "label",         "children": [          {"name": "labeler", "size": 9956},          {"name": "radiallabeler", "size": 3899},          {"name": "stackedarealabeler", "size": 3202}         ]        },        {         "name": "layout",         "children": [          {"name": "axislayout", "size": 6725},          {"name": "bundlededgerouter", "size": 3727},          {"name": "circlelayout", "size": 9317},          {"name": "circlepackinglayout", "size": 12003},          {"name": "dendrogramlayout", "size": 4853},          {"name": "forcedirectedlayout", "size": 8411},          {"name": "icicletreelayout", "size": 4864},          {"name": "indentedtreelayout", "size": 3174},          {"name": "layout", "size": 7881},          {"name": "nodelinktreelayout", "size": 12870},          {"name": "pielayout", "size": 2728},          {"name": "radialtreelayout", "size": 12348},          {"name": "randomlayout", "size": 870},          {"name": "stackedarealayout", "size": 9121},          {"name": "treemaplayout", "size": 9191}         ]        },        {"name": "operator", "size": 2490},        {"name": "operatorlist", "size": 5248},        {"name": "operatorsequence", "size": 4190},        {"name": "operatorswitch", "size": 2581},        {"name": "sortoperator", "size": 2023}       ]      },      {"name": "visualization", "size": 16540}     ]    }   ]  }

<!doctype html>  <meta charset="utf-8">  <title>force-directed graph</title>  <style>    .node {    cursor: pointer;    stroke: #3182bd;    stroke-width: 1.5px;  }    .link {    fill: none;    stroke: #9ecae1;    stroke-width: 1.5px;  }    </style>  <body>  <script src="http://d3js.org/d3.v3.min.js"></script>  <script>    var width = 960,      height = 500,      root;    var force = d3.layout.force()      .size([width, height])      .on("tick", tick);    var svg = d3.select("body").append("svg")      .attr("width", width)      .attr("height", height);    var link = svg.selectall(".link"),      node = svg.selectall(".node");    d3.json("readme.json", function(json) {    root = json;    update();  });    function update() {    var nodes = flatten(root),        links = d3.layout.tree().links(nodes);      // restart force layout.    force        .nodes(nodes)        .links(links)        .start();      // update links…    link = link.data(links, function(d) { return d.target.id; });      // exit old links.    link.exit().remove();      // enter new links.    link.enter().insert("line", ".node")        .attr("class", "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; });      // update nodes…    node = node.data(nodes, function(d) { return d.id; }).style("fill", color);      // exit old nodes.    node.exit().remove();      // enter new nodes.    node.enter().append("circle")        .attr("class", "node")        .attr("cx", function(d) { return d.x; })        .attr("cy", function(d) { return d.y; })        .attr("r", function(d) { return math.sqrt(d.size) / 10 || 4.5; })        .style("fill", color)        .on("click", click)        .call(force.drag);  }    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; });  }    // color leaf nodes orange, , packages white or blue.  function color(d) {    return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";  }    // toggle children on click.  function click(d) {    if (!d3.event.defaultprevented) {      if (d.children) {        d._children = d.children;        d.children = null;      } else {        d.children = d._children;        d._children = null;      }      update();    }  }    // returns list of nodes under root.  function flatten(root) {    var nodes = [], = 0;      function recurse(node) {      if (node.children) node.children.foreach(recurse);      if (!node.id) node.id = ++i;      nodes.push(node);    }      recurse(root);    return nodes;  }    </script>

you using files locally on computer , browsing them chrome. d3.json(...) loads data via xmlhttprequest. in javascript console (where should first if have problems javascript) should error message xmlhttprequest cannot load file:///...../data.json. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

loading local files via ajax not possible chrome. other browsers may allow so. checked safari , firefox , both job.

if want stick browser, should local webserver system.