JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>The Tree Layout | D3</title>
  
  
  
  
  
</head>

<body>

  
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Collapsible Tree Example</title>

    <style>

	.node circle {
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 3px;
	}

	.node text { font: 12px sans-serif; }

	.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 2px;
	}
	
    </style>

  </head>

  <body>
    
    <div class="text-center" id="footer"> <!-- for footer -->
      <div>
      <h5><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria</a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5>
      </div>

    </div> <!-- end footer -->
 
    <br><hr>
    
    What can you find in this pen (javascript code is inside html): <br>
   <ul>
     <li>Create a tree layout in d3</li>
     <li>Have the nodes in a json file</li>
     <li>The style can be changed in style tags in html</li>
     <li>Tree layout is dynamic</b></li>
     
 
   </ul>
    <a href="http://bl.ocks.org/d3noob/8326869" target="_blank"> Source</a>   
    <br><br><br><br>
    <h3></h3>
    
    
    

<!-- load the d3.js library -->	
<script src="http://d3js.org/d3.v3.min.js"></script>
	
<script>

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      },
      {
        "name": "Level 2: C",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of C",
 ...

CSS

.node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 3px;
 }

 .node text { font: 12px sans-serif; }

 .link {
   fill: none;
   stroke: #ccc;
   stroke-width: 2px;
 }