IVFinalProject/map.js at main · ShallyLai/IVFinalProject · 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

// The svg
const map_margin = { top: 10, right: 10, bottom: 10, left: 10 };
const map_width = 500 - map_margin.left - map_margin.right;
const map_height = 320 - map_margin.top - map_margin.bottom;

const map_svg = d3.select("#myMap")
    .append("svg")
    .attr("width", map_width)
    .attr("height", map_height)
    .append("g")
    .attr("transform", `translate(${map_margin.left},${map_margin.top})`);

// Map and projection
const path = d3.geoPath();
const projection = d3.geoMercator()
    .scale(70)
    .center([0, 20])
    .translate([map_width / 2, map_height / 2 ]);

// Data and color scale
const map_data = new Map();
const ContinentsColor = ["#DF5777", "#F78C6B", "#FFD166", "#06D6A0", "#118AB2", "#8E74BF"];

const map_tooltip = d3.select("#myMap")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0)
    .style("background-color", "black")
    .style("border-radius", "5px")
    .style("padding", "10px")
    .style("color", "white");

// Load external data and boot
Promise.all([
    d3.json("https://raw.githubusercontent.com/ShallyLai/IVFinalProject/main/Continents.json")])
    .then(function (loadData) {

        let topo = loadData[0];

        let mapMouseOver = function (d) {
            d3.selectAll(".Country")
                .transition()
                .duration(200)
                .style("opacity", .3);
            d3.select(this)
                .transition()
                .duration(100)
                .style("opacity", 1);

            map_tooltip
                .transition()
                .duration(200)
                .style("opacity", .8);
            map_tooltip
                .style("left", d.pageX + 'px')
                .style("top", (d.page - 100) + 'px')
                .html(d.target.__data__.properties.region);
                //console.log(d.pageX-850,d.pageY)

        }

        let mapMouseMove = function (d) {

            map_tooltip
                .style("left", d.pageX + 'px')
                .style("top", (d.pageY - 100) + 'px')
                .html(d.target.__data__.properties.region);
               // console.log(d.pageX,d.pageY)

        }

        let mapMouseLeave = function (d) {
            d3.selectAll(".Country")
                .transition()
                .duration(100)
                .style("opacity", 1);
            d3.select(this)
                .transition()
                .duration(200);

            map_tooltip
                .transition()
                .duration(200)
                .style("opacity", 0);

        }

        let mapClick = function (d) {
            var thisContinent = d.target.__data__.properties.region;
            // console.log(thisContinent);
            FilterRegion(thisContinent);
        }

        // Draw the map
        map_svg.append("g")
            .selectAll("path")
            .data(topo.features)
            .enter()
            .append("path")
            // draw each country
            .attr("d", d3.geoPath()
                .projection(projection)
            )
            // set the color of each country
            .attr("fill", function (d) {
                // console.log(d.properties.region);
                switch (d.properties.region) {
                    case "Asia":
                        return ContinentsColor[0];
                        break;
                    case "Latin America":
                        return ContinentsColor[1];
                        break;
                    case "Africa":
                        return ContinentsColor[2];
                        break;
                    case "Oceania":
                        return ContinentsColor[3];
                        break;
                    case "North America":
                        return ContinentsColor[4];
                        break;
                    case "Europe":
                        return ContinentsColor[5];
                        break;
                }
            })
            .attr("class", function (d) { return "Country" })
            .style("opacity", 1)
            .on("mouseover", mapMouseOver)
            .on("mousemove", mapMouseMove)
            .on("mouseleave", mapMouseLeave)
            .on("click", mapClick);

    })