GeographicalDataProject/d3relig.html at master · addiboyer24/GeographicalDataProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>

<head>
	<script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
</head>

<style>
    .header{
        position:fixed;
        top: 0;
        width:100%;
    }
</style>

<body style="background-color:darkblue;">
    <h2 class="header" id="country" style="color:white; font-size:40; text-align:center;">World</h2>
    <div id="map-case"></div>

</body>

<script>
// Make the header sticky to move with the map
window.onscroll = moveHeader;
var countryLabel = document.getElementById("country");
var offset = countryLabel.offsetTop;

// Set the height and width of the canvas
var countryLocations;
var height = 900, width = 1500;
var countrySelect;
var strokeWidth = .4;
var group, path;
var zoomDuration = 1000;
var canvas = d3.select("body").append("svg").attr("width",width).attr("height",height);

// Make a color scale for economy
var color = d3.scale.linear().domain([1,7]).range(["darkgreen","white"]);

// Read in the files, use a queue to load asychronously
queue().defer(d3.json, 'custom.geo.json').defer(d3.csv,'WRP_national.csv').await(makeMap);

function makeMap(error, data, otherData){
    // The data after loading
    console.log(otherData);
    console.log(data);
    group = canvas.selectAll("g").data(data.features).enter().append("g");

    var projection = d3.geo.stereographic().scale(150).translate([600,450]);
    path = d3.geo.path().projection(projection);

    var areas = group.append("path").attr("d",path).attr("class", "area").attr("fill", function(d){return color(d.properties.economy[0]);}).attr("stroke","black").attr("stroke-width",strokeWidth).on("click",zoomOnClick);

    //console.log(countryLocations);
    /*var areas = group.append("path").attr("d",path).attr("class", "area").attr("fill", function(d){return color(d.properties.income_grp[0]);}).attr("stroke","black").attr("stroke-width",strokeWidth);*/

    //Appending text to the countries
    /*group.append("text").attr("x", function (d){ return path.centroid(d)[0];}).attr("y", function (d){ return path.centroid(d)[1];}).text(function(d){return d.properties.economy[0];});*/

    // Mouseover and Mouseout functions
    areas.on("mouseover", function(e){ //Get the event
    strokeWidth = 1;    d3.select(this).transition().duration(500).style("cursor","pointer").attr("stroke-width",strokeWidth);

    d3.select("h2").text(e.properties.name + " " + e.properties.economy);

    });


    areas.on("mouseout", function(e){ //Get the event
    strokeWidth = .4;
        d3.select(this).transition().duration(500).style("cursor","pointer").attr("stroke-width",strokeWidth).attr("stroke","black").attr("stroke-width",strokeWidth);
        d3.select("#country").text("World");
    });

}

function zoomOnClick(d){
    var xCoord, yCoord, k;
    console.log(d.properties.abbrev);
    if(!(d && countrySelect != d)){
        xCoord = width/2;
        yCoord = height/2;
        k = 1;
        countrySelect = null;
    }
    else{ // Set the zoom to middle of the screen
        var coordArray = path.centroid(d);
        if(countrySelect!=null){
            xCoord = coordArray[0];
            yCoord = coordArray[1];
        }
        else{
            xCoord = d3.event.x;
            yCoord = d3.event.y;
        }

        k = 4;
        countrySelect = d;
    }

    group.selectAll("path").classed("active", countrySelect && function(d){ return d == countrySelect;});

    group.transition().duration(zoomDuration).attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -xCoord + "," + -yCoord + ")").style("stroke-width", strokeWidth/k + "px");

}

function moveHeader(){
    if(window.pageYOffset > offset){
        countryLabel.classList.add("sticky");
    }
    else{
        countryLabel.classList.remove("sticky");
    }
}

</script>

</html>