JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/js-data/us-fao-gross-production"></script>
<script src="http://igniteui.com/js-data/uk-france-population"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.new.css" rel="stylesheet"></link>

<h4 style="text-align: center">Bubble Chart</h4>
    <div id="chartBubble"></div>
    <div class="UNdata-attribution">
        Agricultural data from: <a href="http://data.un.org/" target="_blank">UNdata</a>
    </div>

    <h4 style="text-align: center; margin-top: 10px">Line Chart</h4>
    <div id="chartLine"></div>
    <div class="Quandl-attribution">
        Population data from: <a href="http://www.quandl.com/" target="_blank">Quandl</a>
    </div>

JavaScript

var data2 = [{
                        "Year": 1995,
                        "Canada": 16.8331,
                        "SaudiArabia": 20.6591,
                        "Russia": 41.4181,
                        "UnitedStates": 71.1744,
                        "China": 33.5387,
                    },
                    {
                        "Year": 1998,
                        "Canada": 17.4377,
                        "SaudiArabia": 21.4151,
                        "Russia": 39.0652,
                        "UnitedStates": 72.8764,
                        "China": 38.8876,
                    },
                    {
                        "Year": 2001,
                        "Canada": 18.0215,
                        "SaudiArabia": 20.9456,
                        "Russia": 42.6263,
                        "UnitedStates": 71.7343,
                        "China": 41.6730,
                    },
                    {
                        "Year": 2004,
                        "Canada": 18.6642,
                        "SaudiArabia": 24.1590,
                        "Russia": 49.8648,
                        "UnitedStates": 70.2224,
                        "China": 55.9233,
                    },
                    {
                        "Year": 2007,
                        "Canada": 19.5439,
                        "SaudiArabia": 23.7326,
                        "Russia": 52.5599,
                        "UnitedStates": 71.4000,
                        "China": 73.2809,
                    },
                    {
                        "Year": 2010,
                        "Canada": 18.3358,
                        "SaudiArabia": 24.7442,
                        "Russia": 53.2232,
                        "UnitedStates": 74.7951,
                        "China": 90.3918,
                    }
                ];

$(function () {
            $("#chartLine").igDataChart({
                width: "100%",
                height: "300px",
               ...