water_sec

<!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);
        }

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v0.min.js