JSFiddle - React, Tailwind, and code Playground

by Guv3nir

HTML

<!--Add d3.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

<!--Add Mihenk JS and CSS -->
<link rel="stylesheet" href="../mihenk.css" />
<script src="../mihenk.js" ></script>

<!-- Download Svg and Png-->
<!-- pngindir('graph_div_id') ,  svgindir('graph_div_id') -->
<button onclick="pngindir('graph')" class="btn btn-default btn-sm pull-right" style="margin-top:3px;margin-right:5px;"><span class="fa fa-download" /> Png</button>
<button onclick="svgindir('graph')" class="btn btn-default btn-sm pull-right" style="margin-top:3px;margin-right:5px;"><span class="fa fa-download" /> Svg</button>

<!--Graphic-->
<div id='graph3'>
   <svg> </svg>
</div>

JavaScript

var mihenkdata = {
            "data": [
                {
                    "ymin": 10.4,
                    "lower": 14.5,
                    "middle": 15.5,
                    "upper": 18.4,
                    "ymax": 21.5,
                    "x": 3
                },
                {
                    "ymin": 17.8,
                    "lower": 21,
                    "middle": 22.8,
                    "upper": 28.075,
                    "ymax": 33.9,
                    "x": 4
                },
                {
                    "ymin": 15,
                    "lower": 15.8,
                    "middle": 19.7,
                    "upper": 26,
                    "ymax": 30.4,
                    "x": 5
                },
                {
                    "ymin": 10.4,
                    "lower": 14.5,
                    "middle": 15.5,
                    "upper": 18.4,
                    "ymax": 21.5,
                    "x": 6
                },
                {
                    "ymin": 17.8,
                    "lower": 21,
                    "middle": 22.8,
                    "upper": 28.075,
                    "ymax": 33.9,
                    "x": 7
                }
            ],
            "opt": {
                "x_labels": [],
                "y_labels": [],
                "zoom": true,
                "xlab": "x label",
                "ylab": "y label",
                "color": [],
                "div_id": "graph3"
            }
        }
        
        mihenk.box(mihenkdata);