JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<center>
  <div id="my_dataviz">
    
  </div>
</center>

<!-- Load color palettes -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>


<script>

var data = [{"sample_id": "c40e0b3a-9a64-11eb-a156-14dda977a447", "path": "say_my_name_and_more", "time": 4.01325}, {"sample_id": "c40e0b3a-9a64-11eb-a156-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length", "time": 4.01309}, {"sample_id": "c40e0b3a-9a64-11eb-a156-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length/ built in method time sleep", "time": 4.01308}, {"sample_id": "bccada43-9a64-11eb-8341-14dda977a447", "path": "say_my_name_and_more", "time": 4.01238}, {"sample_id": "bccada43-9a64-11eb-8341-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length", "time": 4.01227}, {"sample_id": "bccada43-9a64-11eb-8341-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length/ built in method time sleep", "time": 4.01226}, {"sample_id": "b7e83ef7-9a64-11eb-9062-14dda977a447", "path": "say_my_name_and_more", "time": 4.01218}, {"sample_id": "c1a2781c-9a64-11eb-9c9a-14dda977a447", "path": "say_my_name_and_more", "time": 4.01216}, {"sample_id": "b7e83ef7-9a64-11eb-9062-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length", "time": 4.01206}, {"sample_id": "c1a2781c-9a64-11eb-9c9a-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length", "time": 4.01206}, {"sample_id": "b7e83ef7-9a64-11eb-9062-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length/ built in method time sleep", "time": 4.01205}, {"sample_id": "c1a2781c-9a64-11eb-9c9a-14dda977a447", "path": "say_my_name_and_more/sleep_based_on_name_length/ built in method time sleep", "time": 4.01205}, {"sample_id": "bf3812e0-9a64-11eb-bd2e-14dda977a447", "path":...