JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Collapsible Tree Example</title>
    <script src="ttps://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.js"></script>
  </head>
  
  <body>

    <div id="secc-graph">
    </div>

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

            const treeData = [
                {
                    name: 'H9 Stem Cell A',
                    children: [
                        {
                            name: 'Hepatoctye',
                            children: null,
                        }, {
                            name: 'Ssplanchic mesodermic cell',
                            children: [
                                {
                                    name: 'Smooth muscle',
                                    children: null,
                                },
                                {
                                    name: 'Mesothelium',
                                    children: null,
                                },
                            ],
                        },
                        {
                            name: 'Lateral plate mesoderm',
                            children: null,
                        },
                        {
                            name: 'Neural crest',
                            parent: 'H9 Stem Cell',
                            children: [
                                {
                                    name: 'Mesemcheymal stem cells',
                                    children: null,
                                },
                            ],
                        },
                        {
                            name: 'Neural progenitors cells',
                            children: null,
                        },
                        {
                            name: 'Ecto Neural progenitors',
                           ...

CSS

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

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

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