D3 Examples - nations-line-v3-menu

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="container" style="width: 990px;">
        <div id="menu" class="row">
            <div class="col-md-4 col-xs-4">
                <select id="menu-1">
                    <option value="null" selected>Nation 1</option>
                </select>
            </div>
            <div class="col-md-4 col-xs-4">
                <select id="menu-2">
                    <option value="null" selected>Nation 2</option>
                </select>
            </div>
            <div class="col-md-4 col-xs-4">
            <form id="series">
                <input class="series" type="radio" name="series" value="income" checked /> Income<br/>
                <input class="series" type="radio" name="series" value="lifeExpectancy" /> Life Expectancy<br/>
                <input class="series" type="radio" name="series" value="population" /> Population<br/>
            </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-12 graph"></div>
        </div>
    </div>
​
    <script>
        // global variables ------------------------------------
​
        var margin = { top: 60, right: 50, bottom: 20, left: 50 };
        var width = 960 - margin.left - margin.right;
        var height = 500 - margin.top - margin.bottom;
​
        // =====================================================
​
        // populates dropdown menus and targets an id
        function setMenu(data, menuID) {
            var dropdown = d3.select(menuID);
            dropdown.selectAll("option")
                .data(data)
                .enter()
                .append("option")
                .attr("value", function(d) { return d; })
                .text(function(d) { return d; });
        }
​
    // gets nation data based on a series
        function getNationData(data, nation, series) {
            var result = data.find(function(d) {
                if (d.name === nation) {
                    return d;
                }
            })
            return result[series];
        }
​
        // update ----------------------------------------------
​
        function update(data, nations) {
            var nation1 = d3.select("#menu-1").property("value");
            var nation2 = d3.select("#menu-2").property("value");
            var series = d3.selectAll(".series:checked").property("value");
​
            // console checks
            if (nation1) { 
                console.log("Nation 1:", nation1); 
            }
            if (nation2) { 
                console.log("Nation 2:", nation2); 
            }
            if (series) { 
                console.log("Series:", series); 
            }
            if (nation1 != "null") {
                var nation1data = getNationData(data, nation1, series);
            }
            if (nation2 != "null") {
                var nation2data = getNationData(data, nation2, series);
            }
        }
​
        // main ------------------------------------------------
​
        d3.json("nations.json", function(error, data) {
            if (error) return error;
            console.log(data);
​
            var nations = data.map(function(d) { return d.name; });
​
            // set initial dropdown menu values
            setMenu(nations, "#menu-1");
            setMenu(nations, "#menu-2");
​
            d3.select("#menu")
                .on("change", function(d) {
                    update(data, nations);
                });
        })
    </script>
</body>
</html>
    