Interactive map with MapboxGL - variable switching

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
        <link href='main.css' rel="stylesheet"/>
    </head>

<body>

<h1>Building a map with MapboxGL.js</h1>
        <h2>Interactive web map tutorial - part 6</h2>

<div id='layer-switch'>
                <span class="title">Demographic Origin:</span>
                <div id='layers'></div>
                <div id="legend"></div>
            </div>

</div>

// Variable buttons
        const var_names = [
                            { varname: "asian_percent", name: "asian"},
                            { varname: "black_percent", name: "black"},
                            { varname: "hispanic_percent", name: "hispanic"},
                            { varname: "pacific_percent", name: "pacific islander"},
                            { varname: "white_percent", name: "white"},
                            { varname: "other_percent", name: "other"},
                          ];

// Populate the layer div automatically
        document.getElementById("layers").innerHTML =
            var_names.reduce((innerHtml, l) => {
            return (l.name === "white")
            ? innerHtml + '<label><input type="radio" name="layers" value="' + l.varname + '" checked>' + l.name + "</label>"
            : innerHtml + '<label><input type="radio" name="layers" value="' + l.varname + '">' + l.name + "</label>"
            }, '');

// Event listener  to switch between variables
        document.getElementById("layers").addEventListener("click", layerSwitch, false);

function layerSwitch(e) {
            if (e.target.value && e.target !== e.currentTarget) {

console.log(e.target.value)

// TODO: make it into an array map
                map.setPaintProperty('county', 'fill-color', {
                        property: e.target.value,
                        stops: color_scale
                });

map.setPaintProperty('tract', 'fill-color', {
                        property: e.target.value,
                        stops: color_scale
                });

map.setPaintProperty('state', 'fill-color', {
                        property: e.target.value,
                        stops: color_scale
                });
            }

e.stopPropagation();
        }

const svg = d3.selectall("#legend")
                        .append("svg")

</script>

</body>
</html>

https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js