JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<body>
    <div id="main">
      <div id="title2">Select an Option</div>
      <div id="sequence"></div>
      <div id="chart">
        <div id="explanation" style="visibility: hidden;">
          <span id="percentage"></span><br/>
        </div>
      </div>
    </div>
    <div id="sidebar">
      <div id="optionsSelect">Select an option:
        <select id="optionsList">
          <option value="ds1">Choice 1</option> 
          <option value="ds2">Choice 2</option> 
        </select>
        <br/>
      </div>
      <br/>
        Categories
        <div id="legend"></div> 
    </div>
  </body>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  background-color: #fff;
  width: 1060px;
  height: 750px;
  margin-top: 10px;
}

#main {
  float: left;
  width: 750px;
}

#title2 {
  float:  left;
  height: 40;
  width:  500;
  font-size:  18px;
  font-style: bold;
  text-align: center;
  padding: 8px 0 10px 15px;    
}


#sidebar {
  float: right;
  width: 200px;
}

#obssysSelect {
  font-style: bold;
}

#sequence {
  width: 600px;
  height: 70px;
}

#legend {
  padding: 10px 20px 0 3px;
}

#description {
  width: 240px;
  word-wrap: break-word;
  overflow-x: hidden;
}

#sequence text, #legend text {
  font-weight: 600;
  fill: #fff;
}

#chart {
  position: relative;
}

#chart path {
  stroke: #fff;
}

#explanation {
  position: absolute;
  top: 260px;
  left: 305px;
  width: 140px;
  text-align: center;
  color: #666;
  z-index: -1;
}

#percentage {
  font-size: 2.5em;
}

JavaScript

// Dimensions of sunburst.
var width = 750;
var height = 600;
var radius = Math.min(width, height) / 2;

// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
  w: 75, h: 30, s: 3, t: 10
};

// Mapping of step names to colors.
var colors = {
  "VeryHigh": "#0052cc",
  "High": "#00b85c",
  "Moderate": "#ff9900",
  "Low": "#e6e600",
  "Supplemental": "#c2f0ff", 
  "NA": "#cccccc" 
};

//data sources
var ds1 = {
  "name":"root",
  "sysName": "System 1",
  "children":[
      {
        "name":"TopLevel",
        "longname":"TopLevel",
        "category":"High",
        "rank":"15",
        "totalSystems":"217",
        "children":[
           {
             "name":"Level2a",
             "longname":"Level2a",
             "category":"High",
             "rank":"28",
             "totalSystems":"151",
             "children":[
               {
                 "name":"Level3-a1",
                 "longname":"Level3-a1",
                 "size":55,
                 "category":"High",
                 "rank":"17",
                 "totalSystems":"109"
               },               {
                 "name":"Level3-a2",
                 "longname":"Level3-a2",
                 "size":55, 
                 "category":"Low",
                 "rank":"30",
                 "totalSystems":"125"
               },               {
                 "name":"Level3-a3",
                 "longname":"Level3-a3", 
                 "size":55,
                 "category":"Moderate",
                 "rank":"24",
                 "totalSystems":"92"
               },               {
                 "name":"Level3-a4",
                 "longname":"Level3-a4",
                 "size":55,
                 "category":"High",
                 "rank":"30",
                 "totalSystems":"125"
               }
             ]
           },
           {
             "name":"Level2b",
             "longname":"Level2b",
             "category":"Supplemental",
           ...