D3 Examples - nations-line-v3

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">
​
    <style>
        .circle {
            fill: SteelBlue;
            fill-opacity: 0.5;
        }
​
        .circle:hover {
            fill: #808080;
            fill-opacity: 0.75;
            stroke: White;
        }
​
        .title {
            font-size: 20px;
        }
​
        div.tooltip {   
            position: absolute;
            text-align: center;
            width: 160px; 
            height: 48px;
            padding: 2px;
            font: 12px sans-serif;  
            background: #f0f0f0;
            border: 0px;
            border-radius: 2px;
            pointer-events: none;
            color: #000;
        }
​
        .domain {
            stroke: #c0c0c0;
        }
​
        .tick > line {
            stroke: #c0c0c0;
        }
​
        .line1 {
            fill: none;
            stroke: pink;
            stroke-width: 3px;
        }
​
        .line2 {
            fill: none;
            stroke: darkseagreen;
            stroke-width: 3px;
        }
    </style>
</head>
<body>
    <div class="container" style="width: 960px;">
        <div id="menu" class="row">
            <div class="col-md-4 col-xs-4">
                <p>Select nations to explore data.</p>
                <select id="menu-1">
                    <option value="null" selected>Nation 1</option>
                </select>
            </div>
            <div class="col-md-4 col-xs-4">
                <p>&nbsp;</p>
                <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: 0, right: 20, bottom: 20, left: 72 };
        var width = 960 - margin.left - margin.right;
        var height = 430 - margin.top - margin.bottom;
​
        // =====================================================
​
        // populates dropdown menus with numeric values from numVals list
        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; });
        }
​
        // setters ---------------------------------------------
​
        function setDomain(data1, data2) {
            var xExtent;
            var yExtent;
​
            if (data1 && data2) {
                xExtent = d3.extent(data1.map(function(d) { 
                    return d[0]; 
                }).concat(data2.map(function(d) { 
                    return d[0]; 
                })), function(d) { 
                    return d; 
                })
​
                yExtent = d3.extent(data1.map(function(d) { 
                    return d[1]; 
                }).concat(data2.map(function(d) { 
                    return d[1]; 
                })), function(d) { 
                    return d; 
                })
            } else if (data1) {
                xExtent = d3.extent(data1, function(d) { return d[0]; })
                yExtent = d3.extent(data1, function(d) { return d[1]; })
            } else if (data2) {
                xExtent = d3.extent(data2, function(d) { return d[0]; })
                yExtent = d3.extent(data2, function(d) { return d[1]; })
            }
​
            return {
                x: xExtent,
                y: yExtent
            }
        }
​
        function setRange() {
            return {
                x: [0, width],
                y: [height, 0]
            }
        }
​
        function setScale(domain, range) {
            return {
                x: d3.scaleLinear()
                    .domain(domain.x)
                    .range(range.x),
                y: d3.scaleLinear()
                    .domain(domain.y)
                    .range(range.y)
            }
        }
​
        function setAxis(scale) {
            return {
                x: d3.axisBottom()
                    .scale(scale.x)
                    .tickFormat(d3.format("d")),
                y: d3.axisLeft()
                    .scale(scale.y)
            }
        }
​
        function setLabel() {
​
        }
​
        // getters ---------------------------------------------
​
        function getNationData(data, nation, series) {
            var result = data.find(function(d) {
                if (d.name === nation) {
                    return d;
                }
            })
            return result[series];
        }
​
        // append axes, title, svg -----------------------------
​
        function appendX(svg) {
            return svg.append("g")
                .attr("id", "axis-x")
                .attr("transform", "translate(0, " + height + ")");
        }
​
        function appendY(svg) {
            return svg.append("g")
                .attr("id", "axis-y");
        }
​
        function appendSVG() {
            var svg = d3.select(".graph")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + ", " 
                + margin.top + ")");
            return svg;
        }
​
        function appendLabel(svg) {
            svg.select("#axis-y")
                .append("text")
                .text("")
                .attr("transform", "translate(15, 0) rotate(-90)")
                .attr("text-anchor", "end")
                .attr("fill", "black")
                .attr("class", "label-y");
        }
​
        function updateLabel(svg, series) {
            var label;
​
            if (series == "income") {
                label = "Income (USD$)";
            } else if (series == "lifeExpectancy") {
                label = "Life Expectancy (Years)";
            } else if (series == "population") {
                label = "Population";
            }
​
            svg.select(".label-y")
                .text(label);
        }
​
        // update ----------------------------------------------
​
        function update(data, svg, axisX, axisY, line1, line2) {
            var nation1 = d3.select("#menu-1").property("value");
            var nation2 = d3.select("#menu-2").property("value");
            var series = d3.selectAll(".series:checked").property("value");
            var nation1data = (nation1 !== "null") 
                ? getNationData(data, nation1, series) 
                : undefined;
            console.log("nation1data = ", nation1data);
            var nation2data = (nation2 !== "null") 
                ? getNationData(data, nation2, series) 
                : undefined;
            console.log("nation2data = ", nation2data);
​
            // console checks
            if (nation1) {
                console.log("nation1 = ", nation1); 
                console.log(nation1data);
            }
            if (nation2) { 
                console.log("nation2 = ", nation2); 
            }
            if (series) { 
                console.log("series = ", series); 
            }
​
            var domain = setDomain(nation1data, nation2data);
            var range = setRange();
            var scale = setScale(domain, range);
            var axis = setAxis(scale);
​
            axisX.transition()
                .duration(1000)
                .call(axis.x);
​
            axisY.transition()
                .duration(1000)
                .call(axis.y);
​
            updateLabel(svg, series);
​
            var line = d3.line()
                .x(function(d) { return scale.x(d[0]) })
                .y(function(d) { return scale.y(d[1]) });
​
            if (nation1 !== "null") {               
                line1.datum(nation1data)
                    .transition()
                    .duration(1000)
                    .attr("d", line);
            }
​
            if (nation2 !== "null") {
                line2.datum(nation2data)
                    .transition()
                    .duration(1000)
                    .attr("d", line);
            }
​
        }
​
        // main ------------------------------------------------
​
        d3.json("nations.json", function(error, data) {
            if (error) return error;
            console.log("data = ", data);
​
            var nations = data.map(function(d) { return d.name; });
​
            // set initial dropdown menu values
            setMenu(nations.sort(d3.ascending), "#menu-1");
            setMenu(nations.sort(d3.ascending), "#menu-2");
​
            var svg = appendSVG(svg);
            var axisX = appendX(svg);
            var axisY = appendY(svg);
            var labelY = appendLabel(svg);
            var line1 = svg.append("g")
                .append("path")
                .attr("class", "line1");
            var line2 = svg.append("g")
                .append("path")
                .attr("class", "line2");
​
            d3.select("#menu")
                .on("change", function(d) {
                    update(data, svg, axisX, axisY, line1, line2);
                });
        })
    </script>
</body>
</html>
    