EE2dev/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    API examples for hierarchy explorer


data format, JSON data from variable

This example shows how to reference a JSON data from a variable


for documentation, go to https://github.com/EE2dev/hierarchy-explorer
for other examples, go to https://github.com/EE2dev/hierarchy-explorer#examples

Acknowledgements:

d3.js
blockbuilder.org


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.css">
</head>

<body>
  <!-- paste data in aside tag -->
  <aside id="data">
  </aside>

  <script>
    const myjson = getJson();
    const dataSpec = {
    source: myjson,
        key: "name",
    };
    const myChart = d3.indentedTree(dataSpec);

    showChart(myChart);

    window.setTimeout(function() {
      myChart.linkWidth("population");
    }, 2000);

    function showChart(_chart) {
        d3.select("body")
          .append("div")
          .attr("class", "chart")
          .call(_chart);
    }

    function getJson() {
        const json =
        {
            "name": "World",
            "children": [
                {
                "name": "Asia",
                "population": 4436,
                "children": [
                    {
                    "name": "China",
                    "population": 1420
                    },
                    {
                    "name": "India",
                    "population": 1369
                    }
                ]
                },
                {
                "name": "Africa",
                "population": 1216
                },
                {
                "name": "Europe",
                "population": 739
                },
                {
                "name": "North America",
                "population": 579,
                "children": [
                    {
                    "name": "USA",
                    "population": 329
                    }
                ]
                },
                {
                "name": "South America",
                "population": 423
                },
                {
                "name": "Oceania",
                "population": 38
                }
            ]
            };
        return json;
      }
  </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="https://d3js.org/d3.v6.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.css">
	</head>

	<body>
	<!-- paste data in aside tag -->
	<aside id="data">
	</aside>

	<script>
	const myjson = getJson();
	const dataSpec = {
	source: myjson,
	key: "name",
	};
	const myChart = d3.indentedTree(dataSpec);

	showChart(myChart);

	window.setTimeout(function() {
	myChart.linkWidth("population");
	}, 2000);

	function showChart(_chart) {
	d3.select("body")
	.append("div")
	.attr("class", "chart")
	.call(_chart);
	}

	function getJson() {
	const json =
	{
	"name": "World",
	"children": [
	{
	"name": "Asia",
	"population": 4436,
	"children": [
	{
	"name": "China",
	"population": 1420
	},
	{
	"name": "India",
	"population": 1369
	}
	]
	},
	{
	"name": "Africa",
	"population": 1216
	},
	{
	"name": "Europe",
	"population": 739
	},
	{
	"name": "North America",
	"population": 579,
	"children": [
	{
	"name": "USA",
	"population": 329
	}
	]
	},
	{
	"name": "South America",
	"population": 423
	},
	{
	"name": "Oceania",
	"population": 38
	}
	]
	};
	return json;
	}
	</script>
	</body>
	</html>