JSFiddle - React, Tailwind, and code Playground

by Sanchit Jain

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.stocinn.com/stoccharts/js/stocChart.js"></script>
<div id='globChartMenu'></div>

CSS

#globChartMenu {
    width:800px;
    height:400px;
}

JavaScript

var globData = {
    'title': 'Connected Airlines',
        'titleColor': 'red',
        'titleSize': 20,
        'hoverColor': "orange",
        'nodesArray': ['Mumbai', 'Delhi', 'calgary', 'New York', 'Cape Town', 'Perth', 'Sydney', 'Quito', 'Brasilia', 'Santiago', 'Mexico City', 'Reykjavik', 'Omsk', 'Accra', 'Dakar', 'Tokyo', 'Malaysia', 'Kenya'],
        'nodesColor': ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#ff7f0e", "#ff7f0e", "#2ca02c", "#d62728", "#ff7f0e", "#2ca02c", "#8c564b", "#e377c2", "#0e0c1a", "#bcbd22", "#0e0c1a", "#bcbd22", "9467bd", "d62728"],
        'cordArray': [
        [71, 53],
        [73, 58],
        [18, 78],
        [29, 72],
        [55, 20],
        [84, 22],
        [95, 19],
        [26, 43],
        [37, 36],
        [27, 20],
        [21, 60],
        [44, 82],
        [72, 78],
        [49, 49],
        [44, 56],
        [89, 66],
        [80, 39],
        [59, 39]
    ],
        'backGroundImage': "./img/world-map.jpg",
        'Data': [{
        "node": "Mumbai",
            "connectedNodes": ['New York', 'Cape Town', 'Perth'],
            "pathTexts": ['23h 40m', '2h 3m', '19h 23m'],
            'pathColor': 'green'
    }, {
        "node": "Delhi",
            "connectedNodes": ['Tokyo', 'Quito', 'Reykjavik'],
            "pathTexts": ['13h 10m', '4h 3m', '14h 21m'],
            'pathColor': 'orange'
    }, {
        "node": "calgary",
            "connectedNodes": ['Brasilia', 'Santiago', 'Reykjavik', 'Accra'],
            "pathTexts": ['13h 30m', '5h 23m', '9h 3m', '7h 53m'],
            'pathColor': 'black'
    }, {
        "node": "New York",
            "connectedNodes": ['Brasilia', 'Sydney', 'Santiago', 'Omsk'],
            "pathTexts": ['4h 42m', '12h 31m', '11h 13m', '9h 3m'],
            'pathColor': 'cyan'
    }, {
        "node": "Dakar",
            "connectedNodes": ['Mexico City', 'Santiago', 'Cape Town', 'Kenya'],
            "pathTexts": ['18h 22m', '8h 38m', '18h 3m', '10h 33m'],
          ...