JSFiddle - React, Tailwind, and code Playground

by aybalasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="canvas-svg">

</div>

JavaScript

const createChart = () => {
var responseDataJSON = '[{"severity":"Severe","HemophiliaARegistry":20,"HemophiliaARegistry_Count":3152,"HemophiliaAHTCPP":2.7,"HemophiliaAHTCPP_Count":2233,"HemophiliaBRegistry":5.4,"HemophiliaBRegistry_Count":850,"HemophiliaBHTCPP":0.8,"HemophiliaBHTCPP_Count":704,"NotApplicableRegistry":0,"NotApplicableRegistry_Count":0,"NotApplicableHTCPP":0,"NotApplicableHTCPP_Count":0},{"severity":"Moderate","HemophiliaARegistry":8.3,"HemophiliaARegistry_Count":1302,"HemophiliaAHTCPP":1.4,"HemophiliaAHTCPP_Count":1189,"HemophiliaBRegistry":2.1,"HemophiliaBRegistry_Count":339,"HemophiliaBHTCPP":0.4,"HemophiliaBHTCPP_Count":360,"NotApplicableRegistry":0,"NotApplicableRegistry_Count":0,"NotApplicableHTCPP":0,"NotApplicableHTCPP_Count":0},{"severity":"Mild","HemophiliaARegistry":10.8,"HemophiliaARegistry_Count":1711,"HemophiliaAHTCPP":2.4,"HemophiliaAHTCPP_Count":2058,"HemophiliaBRegistry":2.8,"HemophiliaBRegistry_Count":438,"HemophiliaBHTCPP":0.8,"HemophiliaBHTCPP_Count":681,"NotApplicableRegistry":0,"NotApplicableRegistry_Count":0,"NotApplicableHTCPP":0,"NotApplicableHTCPP_Count":0},{"severity":"Unk/Missing","HemophiliaARegistry":0.2,"HemophiliaARegistry_Count":39,"HemophiliaAHTCPP":0.1,"HemophiliaAHTCPP_Count":95,"HemophiliaBRegistry":0.1,"HemophiliaBRegistry_Count":13,"HemophiliaBHTCPP":0,"HemophiliaBHTCPP_Count":32,"NotApplicableRegistry":0,"NotApplicableRegistry_Count":0,"NotApplicableHTCPP":0,"NotApplicableHTCPP_Count":0},{"severity":"Not Applicable","HemophiliaARegistry":0,"HemophiliaARegistry_Count":0,"HemophiliaAHTCPP":0,"HemophiliaAHTCPP_Count":0,"HemophiliaBRegistry":0,"HemophiliaBRegistry_Count":0,"HemophiliaBHTCPP":0,"HemophiliaBHTCPP_Count":0,"NotApplicableRegistry":2,"NotApplicableRegistry_Count":315,"NotApplicableHTCPP":1,"NotApplicableHTCPP_Count":715}]';
/*...