JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <div class="div_RootBody" id="pie_chart_1">
              <h3 class="h3_Body">Pie Chart Number 1</h3>
              <div class="chart"></div>
            </div>
            <div class="div_RootBody" id="pie_chart_2">
              <h3 class="h3_Body">Pie Chart Number 2</h3>
              <div class="chart"></div>
            </div>

CSS

svg {
        font: 10px sans-serif;
        display: block;
      }




    <STYLE type="text/css">
      div.div_Header {
	width: 100%;
	border:2px solid White;
	border-radius:7px;
	background: WhiteSmoke;
	font: bold 14px Arial;
	font-family:Arial, Helvetica, sans-serif;
	color:WhiteSmoke;
	text-align:center;
      }
      h1.h1_BodyHeader {
	text-align:center;
	font: bold 1.5em Arial;
      }
      h2.h2_LeftMenuHeader {
	text-align:center;
	font: bold 1.2em Arial;
      }
      h3.h3_Body {
        text-align:center;
      }
      p.p_Red {
        color:Red;
      }
      table.table_Header {
	width: 100%;
	text-align:center;
      }
      td.td_HeaderLeft {
	text-align:left;
      }
      td.td_HeaderRight {
	text-align:right;
      }
      div.div_Menu {
	width: 100%;
	border:2px solid White;
	border-radius:7px;
	background: MidnightBlue;
	font: bold 14px Arial;
	font-family:Arial, Helvetica, sans-serif;
	color:White;
	text-align:center;
      }
      p.p_Left {
        font-family:Arial, Helvetica, sans-serif;
        color:Black;
        text-align:left;
        padding-left: 5px;
        font: normal 14px Arial;
      }
      table.table_Body {
	width: 100%;
	height: 100%;
	padding: 0;
      }
      td.td_BodyLeft {
	width: 250px;
	height: 100%;
	padding: 0;
      }
      li.li_LeftMenu {
	text-align:left;
	font: normal 14px Arial;
      }
      a.a_LeftMenuNoUnderLine {
	text-decoration:  none;
      }
      div.div_Body {
	height: 100%;
	width: 100%;
	position: relative;
	border:2px solid White;
	border-radius:7px;
	background: WhiteSmoke;
	font: bold 14px Arial;
	font-family:Arial, Helvetica, sans-serif;
	color:Black;
	text-align:center;
      }
      div.div_Footer {
	width: 100%;
	border:2px solid White;
	border-radius:7px;
	background: MidnightBlue;
	font: bold 14px Arial;
	font-family:Arial, Helvetica, sans-serif;
	color:White;
	text-align:center;
      }
      p.p_if4itMessage {
	width: 100%;
	background: White;
	font: bold .75em...

JavaScript

// This example lays out multiple interactive pie charts on a page with multiple HTML layout constructs.
      // Created by Frank Guerino : "http://www.guerino.net"

      // Data Used for this example...
      var dataSet1 = [
        {legendLabel: "Legend String 1", magnitude: 51, link: "http://www.if4it.com"},
        {legendLabel: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
        {legendLabel: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
        {legendLabel: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
        {legendLabel: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
        {legendLabel: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
        {legendLabel: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

      var dataSet2 = [
        {legendLabel: "Legend String 8", magnitude: 31, link: "http://www.if4it.com/glossary.html"},
        {legendLabel: "Legend String 9", magnitude: 54, link: "http://www.if4it.com/resources.html"},
        {legendLabel: "Legend String 10", magnitude: 21, link: "http://www.if4it.com"},
        {legendLabel: "Legend String 11", magnitude: 31, link: "http://www.if4it.com/taxonomy.html"},
        {legendLabel: "Legend String 12", magnitude: 54, link: "http://www.if4it.com/glossary.html"},
        {legendLabel: "Legend String 13", magnitude: 14, link: "http://www.if4it.com/resources.html"},
        {legendLabel: "Legend String 14", magnitude: 14, link: "http://www.if4it.com/disciplines.html"},
        {legendLabel: "Legend String 15", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

      var dataSet3 = [
        {legendLabel: "Legend String 16", magnitude: 21, link: "http://www.if4it.com"},
        {legendLabel: "Legend String 17", magnitude: 41, link: "http://www.if4it.com/resources.html"},
        {legendLabel: "Legend String...