JSFiddle - React, Tailwind, and code Playground

by ordette

HTML

<button id="update">Update</button>
<div class="big radarChart" id="chart-radar" />

CSS

.big.radarChart {
    width: 500px;
    height: 400px;
    margin: 20px;
}

#chart-radar1 { margin-bottom: 60px; }

JavaScript

var wMaior = 400;
var wMenor = 200;

var colorscale = d3.scale.category10();
var legendOptions = ['Legend 1'];
var size = 2;
var json = {
  "version" : "1.1",
  "expenses" : [
    {
      "uuid" : "59D5E57E-DE21-40C2-8FF4-C1591711B85B",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-03 10:15:44",
      "category" : "doctor\/medicine",
      "cost" : "20"
    },
    {
      "uuid" : "9F632A95-8980-4F27-9B2F-B0F77D930CE5",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-03 10:15:51",
      "category" : "doctor\/medicine",
      "cost" : "50"
    },
    {
      "uuid" : "64DE4846-E47C-4A65-816A-D97B3F9A4E27",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-02 10:25:42",
      "category" : "non-food supermarket",
      "cost" : "4.28"
    },
    {
      "uuid" : "C119759C-45BE-4943-911A-9BDA7273D03F",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-02 10:25:56",
      "category" : "lunch & vending",
      "cost" : "7.45"
    },
    {
      "uuid" : "130E79FF-D066-47E3-BE35-908E5B488809",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-03 11:14:27",
      "category" : "groceries",
      "cost" : "7.43"
    },
    {
      "uuid" : "8C1C1CCB-7799-4348-87EA-B4368B3204A9",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-03 11:23:43",
      "category" : "doctor\/medicine",
      "cost" : "6.96"
    },
    {
      "uuid" : "A3217CB3-368B-4677-AF04-1AFCAE2935F3",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-03 12:08:31",
      "category" : "patrick",
      "cost" : "37.66"
    },
    {
      "uuid" : "A0DD6A9E-27F7-44BA-BCC6-E5028A0E6F57",
      "timezone" : "America\/New_York",
      "detail" : "",
      "datetime" : "2018-04-03 17:32:22",
      "category" : "beauty ",
      "cost" :...