JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js&quot;"></script>
  <div id="options">
        <h2>Options</h2>
        <ul>
            <li><input type="checkbox" name="Air" id="Ground1" value="1">Retail</li>
            <li><input type="checkbox" name="Air" id="Ground2" value="2">Gas</li>
            <li><input type="checkbox" name="Air" id="Ground2" value="3">Dining</li>
        </ul>
    </div>

    <h2>Chart Area</h2>
    <div id="chartarea">
        <div id="Retail">Retail</div>
        <div id="Gas">Gas</div>
        <div id="Dining">Dining</div>
    </div>

CSS

ul {
            list-style: none;
        }

        ul li {
            margin: 10px;
            font-size: 15px;
            display: inline-block;
        }

        #chartarea {
            display: table;
            height: 470px;
            width: 1150px;
            box-shadow: 10px 10px 5px #c0c0c0
        }

        #Retail {
            margin: 5px;
            padding: 5px 5px 5px 5px;
            width: 1150px;
            box-shadow: 5px 5px 5px #808080;
        }

        #Gas {
            margin: 5px;
            padding: 5px 5px 5px 5px;
            width: 720px;
            box-shadow: 5px 5px 5px #808080;
        }

        #Dining {
            margin: 5px;
            padding: 5px 5px 5px 5px;
            width: 720px;
            box-shadow: 5px 5px 5px #808080;
        }
.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

.area {
  fill: #969696;
}

.attention {
  background: yellow;
  margin: -4px;
  padding: 4px;
}

        .Retail,
        .Gas,
        .Dining {
            min-height: 22px;
            min-width: 10px;
            width: 0px;
            height: 0px;
            background-color: steelblue;
            margin-bottom: 3px;
            font-size: 11px;
            color: #f0f8ff;
            text-align: right;
            padding-right: 2px;
        }

        #Gas,
        #Dining,
        #Retail {
            display: table-row;
            height: auto;
            width: auto;
            overflow: hidden;
        }

JavaScript

$(window).load(function () {

            var textareas$ = $('#chartarea div');
            textareas$.hide();
            $('input[name="Air"]').change(function () {

                var elem$ = $(this);
                var correspelem$ = textareas$.eq(elem$.val() - 1);
                if (elem$.val() == 1) {
                    select('Retail', "#Retail");
                } else if (elem$.val() == 2) {
                    select("Gas", "#Gas");
                } else if (elem$.val() == 3) {
                    select("Dining", "#Dining");
                } else {};
                if (elem$.is(':checked')) correspelem$.show();
                else correspelem$.hide();
                
                var chartAxis = document.querySelectorAll('#chartarea  .axis.x');
                
                chartAxis
                	.forEach((elem, index) => index !== chartAxis.length - 1 ? elem.style.display = 'none' : elem.style.display = 'block')

            });
        });


        var data = [ // <-A
            {
                date: "2014/01",
                Gas: 10,
                Retail: 22,
                Dining: 120
            },
            {
                date: "2014/02",
                Gas: 10,
                Retail: 42,
                Dining: 53
            },
            {
                date: "2014/03",
                Gas: 30,
                Retail: 24,
                Dining: 76
            },
            {
                date: "2014/04",
                Gas: 50,
                Retail: 29,
                Dining: 49
            },
            {
                date: "2014/05",
                Gas: 80,
                Retail: 47,
                Dining: 47
            },
            {
                date: "2014/06",
                Gas: 65,
                Retail: 78,
                Dining: 64
            },
            {
                date: "2014/07",
                Gas: 55,
                Retail: 38,
                Dining: 29
 ...