JSFiddle - React, Tailwind, and code Playground

by zobel

HTML

<script src="http://taebi.de/protovis-r3.2.js"></script>
<html>
<head>
    <title>Bundesliga</title>
    <script type="text/javascript" src="../../protovis-r3.2.js"></script>
    <script type="text/javascript" src="results.js"></script>
</head>
<body>
    <div id="center">
        <div style="text-align:right;padding-right:20;">
            <input id="reset_zoom" type="button" onclick="reset()">
            <label for="scale">Scale to fit</label>
        </div>

        <div id="fig">
                <script language="JavaScript" src="dia.js"></script>
        </div>
    </div>
</body>
</html>

JavaScript

var money = [
 1000.00,
 966.67,
 1032.63,
 1062.75,
 1295.11,
 1845.59,
 2291.43,
 2215.05,
 2461.76,
 2461.76,
 2379.7,
 2388.14,
 2228.93,
 2206.76,
 2212.54,
 2138.79,
 2478.6,
 2313.36,
 2313.36,
 2442.0,
 2442.69,
 2361.27,
 1967.73,
 1902.14,
 1838.74,
 1532.28,
 1379.05,
 1333.08,
 1361.31,
 1270.56,
 1228.21,
 1192.06,
 1072.86,
 1037.1,
 1250.49,
 1456.65,
 1444.31,
 1733.15,
 1675.38,
 1565.53,
 1461.16,
 1412.45,
 1773.83,
 1773.83,
 1877.31,
 2035.44,
 1899.74,
 1836.42,
 2564.11,
 2771.57,
 2679.18,
 2515.4,
 2431.55,
 2350.5,
 2660.31,
 2482.96,
 2400.19,
 2000.16,
 2507.46,
 2754.86,
 2540.48,
 2455.8,
 2205.15,
 2534.37,
 2914.53,
 2817.38,
 2788.8,
 2999.64,
 2899.65,
 3418.71,
 3555.94,
 3437.41,
 3583.6,
 3344.69,
 3233.2,
 3520.26,
 3650.0,
 3935.92,
 4203.09,
 3922.89,
 3792.13,
 3656.1,
 3412.36,
 3298.61,
 2922.48,
 3131.71,
 3027.32,
 3512.4,
 3278.24,
 3496.78,
 3532.88,
 3297.35,
 3077.53,
 3958.76,
 5819.08,
 5854.96,
 5659.79,
 6140.87,
 ];
    
var width = 800,
        height = 400,
        xmin_pixels=0,
        ymin_pixels=400,
        xmin = 0,
        xmax = money.length,
        ymin=0,
        max_money = Math.max.apply(null, money),
        ymax = max_money*1.05,

        x = pv.Scale.linear(xmin, xmax).range(0, width),
        y = pv.Scale.linear(0, ymax).range(0, height);


var vis = new pv.Panel()
        .def("i", -1)
        .top(20)
        .left(40)
        .right(0)
        .bottom(20)
        .width(width)
        .height(height)
        .events("all")
        .event("mousemove", pv.Behavior.point())


var axispanel = vis.add(pv.Panel)


axispanel.add(pv.Rule)
        .strokeStyle("#eee")
        .data(function() {return x.ticks()})
.left(x)
//    .height(200)
        .bottom(0)
        .anchor("bottom").add(pv.Label)
        .text(x.tickFormat)


axispanel.add(pv.Rule)
        .strokeStyle("#eee" )
        .data(function() { return y.ticks()})
//.width(50)
.bottom(y)
        .anchor("left").add(pv.Label)
       ...