D3 Examples - water

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Water Security</title>
    <style>
        h1 {
            text-align: center;
        }
        h3 {
            text-align: center;
        }
        #bars {
            position: absolute;
            top: 250px;
        }
        #map {
            position: absolute;
            top: 250px;
            left: 700px;            
        }
        #background {
            fill: white;
        }
        path {
            stroke: white;
            stroke-width: 0.5px;
        }
        #controls{
           text-align: center;
        }
        #tooltip {
            position: absolute;
            top: 0px;
            left: 0px;
            visibility: hidden;
            font-size: 14px;
            background-color: beige;
            padding: 10px;
            box-shadow: 3px 3px 3px #cccccc;
            border-radius: 3px;
            text-align: left;
        }
    </style>
    
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v0.min.js"></script>
    
    <script type="text/javascript">
        drawMap(1996);
        var data;
        var year, datatype, continent
        var mapTarg1 = 60;
        var mapTarg2 = 30;
        var mapScale = 100;
        var projection = d3.geo.mercator()
            .center([mapTarg1, mapTarg2])
            .scale(mapScale);
        var path = d3.geo.path().projection(projection);
        const t = d3.transition().duration(750);
        
        
        function choose_cont(choice_c){
            continent=choice_c;
            if(continent == 'Africa') {
                mapTarg1 = 40;
                mapTarg2 = 10;
                mapScale = 400;
            } else if (continent == 'Europe') {
                mapTarg1 = 40;
                mapTarg2 = 55;
                mapScale = 400;
            } else if (continent == 'Asia') {
                mapTarg1 = 130;
                mapTarg2 = 45;
                mapScale = 250;
            } else if (continent == 'Oceania') {
                mapTarg1 = 180;
                mapTarg2 = -20;
                mapScale = 300;
            } else if (continent == 'Americas') {
                mapTarg1 = -60;
                mapTarg2 = 20;
                mapScale = 230;
            }
        }
​
        function mapRescale(targ1, targ2, scaler) {
            projection = d3.geo.mercator()
                .center([targ1, targ2])
                .scale(scaler);
        }
        
​
            
        function getData(year) {
            d3.csv('Complete.csv', function (d) {
                data = d;
                //d3.select('#bars > *').remove();
                listContinent();
                mapRescale(mapTarg1, mapTarg2, mapScale);
                drawData(year);
                //drawMap(year);
                color(year);
                document.getElementById('yeartext').textContent=year;
            })
        }
        
        function update(year) {
            svg = d3.select('#bars');
            svg.remove();
            svg = d3.selectAll("body").append("svg");
            drawData(year);
        }
        function drawData(year) {
            var target = d3.select('#bars');
            //d3.select('#bars > *').remove();
            d3.selectAll("o_rect > *").remove();
            target.selectAll('o_rect')
                .data(data)
                .enter().append('rect')
                .filter(function(d) {return d.Continent == continent})
                .attr('x', 5)
                .attr('y', function(d) {
                    return +d['Index'] * 4;
                })
                .attr('width', function(d) {
                    return +d[year + '_O_W'] * 6 + 5;
                })
                .attr('height',3)
                .attr("class",function(d) {
                    return d["Country_Name"] + " " + d["Continent"] + " " + d[year + '_O_W'];
                })
                .on("mouseover", line_highlight)
                .on("mouseout", line_unhighlight);           
            target.selectAll('u_circle')
                .data(data)
                .enter().append('circle')
                .filter(function(d) {return d.Continent == continent})
                .attr('cx', function(d) {
                    return 5 + (+d[year + '_U_W'] * 6);
                })
                .attr('cy', function(d) {
                    return +d['Index'] * 4;
                })
                .attr('r', 3)
                .attr('fill', 'red')
                .attr("class",function(d) {
                    return d["Country_Name"] + " " + d["Continent"] + " " + d[year + '_U_W'];
                })
            target.selectAll('u_circle')
                .data(data).transition();
            target.selectAll('u_circle')
                .data(data)
                .exit().remove();
​
            target.selectAll('r_circle')
                .data(data)
                .enter().append('circle')
                .filter(function(d) {return d.Continent == continent})
                .attr('cx', function(d) {
                    return 5 + (+d[year + '_R_W'] * 6);
                })
                .attr('cy', function(d) {
                    return +d['Index'] * 4;
                })
                .attr('r', 3)
                .attr('fill', 'green')
                .attr("class",function(d) {
                    return d["Country_Name"] + " " + d["Continent"] + " " + d[year + '_R_W'];
                })
​
        }
            
        function drawMap(year) {
            var svg = d3.select("#map");            
            var g = svg.append("g");
​
            d3.json("countries.json", function(error, topology) {
                g.selectAll("path")
                    .data(topojson.object(topology, topology.objects.units).geometries)
                .enter()
                    .append("path")
                    .attr("d", path)
                    .attr("id", function(d) { return d.id})
                    .attr("class",function(d) {
                        return d["Country_Code"];
                    });
                    //.on("mouseover", map_highlight)
                    //.on("mouseout", map_unhighlight);
            })
            //color(year);
            getData(year);
        }
        
        function color(year) {
            var maxWater = d3.max(data, function(d) { return +d[year + '_O_W']});
            var minWater = d3.min(data, function(d) { return +d[year + '_O_W']});
            var colorScale = d3.scale.linear().domain([minWater, maxWater]).range(["#8CFCFF","#0E067F"]);     
            
            data.forEach(function(d) {
                    var country = d["Country_Code"];
                    var water = +d[year + '_O_W'];
​
                    d3.select("#" + country)
                        .style("fill", function(d) {
                            return colorScale(water);
                    });
            });
​
        }
        
        function listContinent() {
            d3.select("#continent").selectAll("option")
                    .data(d3.map(data, function(d) {return d["Continent"];}).keys())
                .enter().append("option")
                    .text(function(d) {return d;})
                    .attr("value",function(d) {return d;});
        }
        
        function map_highlight(d,i) {
            var line = d3.select(this)
            
​
            d3.select("#countryID").text(data[i]["Country_Code"]);
            d3.select("#overallPct").text(data[i][year + "_O_W"]);
            d3.select("#urbanPct").text(data[i][year + '_U_W']);
            d3.select("#ruralPct").text(data[i][year + '_R_W']);
​
            d3.select("#tooltip")
                .style("top", d3.event.pageY + 5 + "px")
                .style("left", d3.event.pageX + 5 + "px")
                .style("visibility","visible");
        }
        
        function map_unhighlight(d,i) {
            d3.select("#tooltip")
                .style("visibility","hidden");
        }
        
        function line_highlight(d,i) {
            var i = d['Index'];
            var rect = d3.select(this)
                .attr("height","5");
​
            d3.select("#countryID").text(data[i]["Country_Name"]);
            d3.select("#overallPct").text(data[i][year + "_O_W"]);
            d3.select("#urbanPct").text(data[i][year + '_U_W']);
            d3.select("#ruralPct").text(data[i][year + '_R_W']);
​
            d3.select("#tooltip")
                .style("top", d3.event.pageY + 5 + "px")
                .style("left", d3.event.pageX + 5 + "px")
                .style("visibility","visible");
        }
        
        function line_unhighlight(d,i) {
            var rect = d3.select(this)
                .attr('height','3');
            
            d3.select("#tooltip")
                .style("visibility","hidden");
        }   
​
    </script>
    
    
    
</head>
<body onload='drawMap(1996)'>
    <h1>World Water Security</h1>
    <h3><span id='yeartext'>1996</span></h3>
    
    <div id='visuals'>
        <svg id='bars' width='620' height='600'>
            <line x1=605 x2=610 y1=0 y2=600 style=stroke-width:3;stroke:black></line>
            <line x1=302.5 x2=302.5 y1=0 y2=600 style=stroke-width:3;stroke:black></line>
            <line x1=5 x2=5 y1=0 y2=600 style=stroke-width:3;stroke:black></line>
        </svg>
        
        <svg id='map' width='620' height='600'>
            <rect x="0" y="0" width="900" height="600" id="background" />
        </svg>
    </div>
​
    <div id='controls'>
        <p>
            <input type='range' id='year' min='1996' max='2015' style='width:550px' onchange='getData(this.value);'>
        </p>
        
        <p>
            <strong>Filter by Continent:</strong> <select id="continent" onInput="choose_cont(this.value)"></select>
        </p>
    </div>
​
    <div id="tooltip">
        <span id="countryID" style="font-weight: bold"></span><br />
        Overall: <span id="overallPct"></span><br />
        Rural: <span id="ruralPct"></span><br />
        Urban: <span id="urbanPct"></span><br />
    </div>
</body>
</html>
    