JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="options">
        <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>
    <g id="chartarea">
        <g id="Retail">Retail</g>
        <g id="Gas">Gas</g>
        <g id="Dining">Dining</g>
    </g>

CSS

ul {
                                                                    list-style: none;
                                                }
                                        ul li {
                                                                    margin: 10px;
                                                                    font-size: 15px;
                                                                    display: inline-block;
                                                }
                                    #chartarea {
                                                                    margin-top: 20px;
                                                                    display: table;
                                                                    height: 200px;
                                                                    width: 1150px;
                                                }
                                    #Retail {
                                                            margin: 5px;
                                                            padding: 5px 5px 5px 5px;
                                                            width: 1150px;
                                                            
                                                 }
                                #Gas {
                                                            margin: 5px;
                                                            padding: 5px 5px 5px 5px;
                                                            width: 720px;
                                        }
                                        #slider
                                        {
                                            margin-top: 0px;
                                            margin-left: 50px;
                                            width: 700px;
                                        }
                                        .x
  ...

JavaScript

$(window).load(function () {
    var textareas$ = $('#chartarea g');
    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 lastSelectedChartIndex;
        var chartAxis = document.querySelectorAll('#chartarea  .axis.x');

        var selectedCharts = document.querySelectorAll('#options input').forEach((elem, index) => {
            if (elem.checked) {
                lastSelectedChartIndex = index;
            }
        });

        //console.log(lastSelectedChartIndex)

        chartAxis
            .forEach((elem, index) => (index !== chartAxis.length - 1) && !(index == lastSelectedChartIndex) ? elem.style.display = 'none' : elem.style.display = 'block')

    });
});



var data = [
    {
        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
    },
    {
        date: "2014/08", Gas: 43, Retail: 34, Dining: 47
    },
    {
        date: "2014/09", Gas: 20, Retail: 54, Dining: 34
    },
    {
        date: "2014/10", Gas: 10, Retail: 34, Dining: 27
    },
    {
        date: "2014/11", Gas: 43, Retail: 8, Dining: 45
    },
    {
        date: "2014/12", Gas: 40, Retail: 26, Dining: 28
    },
    {
 ...