JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <div id="tooltip" class="shadow ui-widget-content ui-corner-all">
            <div>ジャンル: ${item.Genre}</div>
            <div>カウント: ${item.Count}</div>
        </div>
    </script>

<table>
        <tr>
            <td>
                <div class="ui-state-default ui-corner-all" id="play">
                    <span id="playIcon" class="ui-icon ui-icon-play"></span>
                </div>
            </td>
            <td>
                <div id="timeSlider" style="width: 300px; margin: 15px">
                </div>
            </td>
            <td>
                <input type="button" id="changeType" value="チャート タイプの変更"></input>
            </td>
        </tr>
     </table>
    <br />
    <div id="chart"></div>
    <div>
        映画のデータ ソース:<br />
        <div class="freebase-attribution">
            <div style="font-size: x-small; margin-left: 0px; height: 30px; ">
              ソース:
              <a href="https://developers.google.com/freebase/">Freebase Data Dumps</a> by <a href="https://developers.google.com/">Google</a>,...

JavaScript

$(function () {
            var moviesOverTime = null,
                minYear = 1888,
                maxYear = 2010,
                viewport = {},
                wind = {},
                dataSource = null,
                getYear = null,
                currData = null,
                updateYearOverlay = null,
                updateYearText = null,
                currentYear = 1888,
                changeYear = null,
                playing = false,
                intervalId = 0,
                isRadial = true,
                maxValue = 500,
                localizedGenres = null,
                angleLabelExtent = 40;

            moviesOverTime = [
            { 'Year': 1888, 'Indie': 1, 'Short film': 1, 'Silent film': 1, 'Animation': 0, 'Documentary': 0, 'Comedy': 0, 'Horror': 0, 'Adventure': 0, 'Drama': 0, 'Family': 0, 'Crime fiction': 0, 'Science fiction': 0, 'Romance film': 0, 'Thriller': 0, 'Action': 0, 'Musical': 0, 'Action/Adventure': 0, 'Sports': 0 },
            { 'Year': 1889, 'Indie': 1, 'Short film': 1, 'Silent film': 1, 'Animation': 0, 'Documentary': 0, 'Comedy': 0, 'Horror': 0, 'Adventure': 0, 'Drama': 0, 'Family': 0, 'Crime fiction': 0, 'Science fiction': 0, 'Romance film': 0, 'Thriller': 0, 'Action': 0, 'Musical': 0, 'Action/Adventure': 0, 'Sports': 0 },
            { 'Year': 1890, 'Indie': 1, 'Short film': 1, 'Silent film': 1, 'Animation': 0, 'Documentary': 0, 'Comedy': 0, 'Horror': 0, 'Adventure': 0, 'Drama': 0, 'Family': 0, 'Crime fiction': 0, 'Science fiction': 0, 'Romance film': 0, 'Thriller': 0, 'Action': 0, 'Musical': 0, 'Action/Adventure': 0, 'Sports': 0 },
            { 'Year': 1891, 'Indie': 1, 'Short film': 1, 'Silent film': 1, 'Animation': 0, 'Documentary': 0, 'Comedy': 0, 'Horror': 0, 'Adventure': 0, 'Drama': 0, 'Family': 0, 'Crime fiction': 0, 'Science fiction': 0, 'Romance film': 0, 'Thriller': 0, 'Action': 0, 'Musical': 0, 'Action/Adventure': 0, 'Sports': 0 },
            { 'Year': 1892, 'Indie': 3, 'Short film': 1,...