JSFiddle - React, Tailwind, and code Playground

by rcugut

HTML

<link rel="stylesheet" href="https://vega.github.io/vega/assets/syntax.css">
<link rel="stylesheet" href="https://vega.github.io/vega/assets/main.css">
<script src="https://vega.github.io/vega/assets/promise.min.js"></script>
<script src="https://vega.github.io/vega/vega.js"></script>
<div id="line-chart"> </div>

JavaScript

var spec = {
      "$schema": "https://vega.github.io/schema/vega/v3.0.json",
      "width": 570,
      "height": 72,
      "padding": 0,
      "data": [{
        "name": "beneish-m-score",
        "values": [{
          "year": "2015",
          "score": -2.3
        }, {
          "year": "2016",
          "score": -1.2
        }, {
          "year": "2017",
          "score": -2
        }, {
          "year": "2014",
          "score": -3.1
        }, {
          "year": "2012",
          "score": -3.6
        }, {
          "year": "2013",
          "score": -3.7
        }],
        "transform": [{
          "type": "formula",
          "as": "scaled-score",
          "expr": "(datum.score - -3.5) / (-1 - -3.5) * (570 - 0) + 0"
        }]
      }, {
        "name": "beneish-rule-boundaries",
        "values": [{
          "strokeWidth": "2",
          "score": -2.5
        }, {
          "strokeWidth": "7",
          "score": -1.78
        }, {
          "strokeWidth": "2",
          "score": -1.5
        }],
        "transform": [{
          "type": "formula",
          "as": "scaled-score",
          "expr": "(datum.score - -3.5) / (-1 - -3.5) * (570 - 0) + 0"
        }]
      }, {
        "name": "beneish-scale-boundaries",
        "values": [{
          "color": "grey",
          "score": -2.5
        }, {
          "color": "blue",
          "score": -1.78
        }, {
          "color": "grey",
          "score": -1.5
        }, {
          "color": "grey",
          "score": -1
        }],
        "transform": [{
          "type": "formula",
          "as": "scaled-score",
          "expr": "(datum.score - -3.5) / (-1 - -3.5) * (570 - 0) + 0"
        }]
      }],
      "signals": [{
        "name": "tooltip",
        "value": {},
        "on": [{
          "events": "rect:mouseover",
          "update": "datum"
        }, {
          "events": "rect:mouseout",
          "update": "{}"
        }]
      }],
      "scales": [{
        "name": "yscale",
  ...