JSFiddle - React, Tailwind, and code Playground

by mikev10

HTML

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://raphaeljs.com/popup.js"></script>
<table id="data">
    <tfoot>
        <tr>
            <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th><th>17</th><th>18</th><th>19</th><th>19</th><th>20</th><th>22</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th><th>32</th><th>33</th><th>34</th><th>35</th><th>36</th><th>37</th><th>38</th><th>39</th><th>40</th><th>41</th><th>42</th><th>43</th><th>44</th><th>45</th><th>46</th><th>47</th><th>48</th><th>49</th><th>50</th><th>51</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>8</td><td>25</td><td>27</td><td>25</td><td>54</td><td>59</td><td>79</td><td>47</td><td>27</td><td>44</td><td>44</td><td>51</td><td>56</td><td>83</td><td>12</td><td>91</td><td>52</td><td>12</td><td>40</td><td>8</td><td>60</td><td>29</td><td>7</td><td>33</td><td>56</td><td>25</td><td>1</td><td>78</td><td>70</td><td>68</td><td>2</td><td>32</td><td>12</td><td>4</td><td>45</td><td>6</td><td>22</td><td>18</td><td>39</td><td>40</td><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48</td><td>49</td><td>50</td><td>51</td>
        </tr>
    </tbody>
</table>
<div id="holder"></div>

JavaScript

Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
color = color || "#000";
var path = ["M", x, y, "L", x + w, y, x + w, y + h, x, y + h, x, y],
    rowHeight = h / hv,
    columnWidth = w / wv;
for (var i = 1; i < hv; i++) {
    path = path.concat(["M", x, y + i * rowHeight, "L", x + w, y + i * rowHeight]);
}
for (var i = 1; i < wv; i++) {
    path = path.concat(["M", x + i * columnWidth, y, "L", x + i * columnWidth, y + h]);
}
return this.path(path.join(",")).attr({stroke: color});
};
function getAnchors(p1x, p1y, p2x, p2y, p3x, p3y) {
    var l1 = (p2x - p1x) / 2,
        l2 = (p3x - p2x) / 2,
        a = Math.atan((p2x - p1x) / Math.abs(p2y - p1y)),
        b = Math.atan((p3x - p2x) / Math.abs(p2y - p3y));
        a = p1y < p2y ? Math.PI - a : a;
        b = p3y < p2y ? Math.PI - b : b;
    var alpha = Math.PI / 2 - ((a + b) % (Math.PI * 2)) / 2,
        dx1 = l1 * Math.sin(alpha + a),
        dy1 = l1 * Math.cos(alpha + a),
        dx2 = l2 * Math.sin(alpha + b),
        dy2 = l2 * Math.cos(alpha + b);
    return {
        x1: p2x - dx1,
        y1: p2y + dy1,
        x2: p2x + dx2,
        y2: p2y + dy2
    };
}
$(function () {
    $("#data").css({
        position: "absolute",
        left: "-9999em",
        top: "-9999em"
    });
});
var labels = [];
var data = [];
$("#data tfoot th").each(function () {
    labels.push($(this).html());
});
$("#data tbody td").each(function () {
    data.push($(this).html());
});
var width = 500,
    height = 250,
    leftgutter = 20,
    bottomgutter = 20,
    topgutter = 20,
    colorhue = 1|| Math.random(),
    color = "hsb(" + [colorhue, 1, .75] + ")",
    r = Raphael("holder", width, height),
    txt = {font: '12px Helvetica, Arial', fill: "#fff"},
    txt1 = {font: '10px Helvetica, Arial', fill: "#fff"},
    txt2 = {font: '12px Helvetica, Arial', fill: "#000"},
    X = (width - leftgutter) / labels.length,
    max = Math.max.apply(Math, data),
    Y = (height - bottomgutter - topgutter) /...