twentyone-world.github.io/index.html at main · sifrant/twentyone-world.github.io · 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
---
layout: default
title: Twentyone.World
---

<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>


<script type="text/javascript">

    $(function () {
        // Colors
        const cOrange = '#F79621';
        const cGray = '#333';
        const cWhite = '#777';
        const cDarkGray = '#222';
        const cDarkOrange = '#735000';
        const cDarkWhite = '#555';

        // initialize tooltips
        $.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
        $.fn.qtip.defaults.style.def = false;

        var map = kartograph.map('#map');

        map.loadMap('map/world.svg', function () {
            map.addLayer('countries', {
                id: 'bg',
                styles: {
                    stroke: '#000',
                    'stroke-width': 6.15,
                    'stroke-linejoin': 'round'
                }
            });

            $.ajax({
                url: 'data/countries.json',
                dataType: 'json',
                success: function (countries) {

                    var basedCountries = countries.filter(function hasLink(c) {
                        var hasLink = c.link ? true : false;
                        return hasLink;
                    });
                    var basedCountryCodes = basedCountries.map(function(c) {
                        return c.alpha3;
                    });
                    function isBased(iso) {
                        return basedCountryCodes.includes(iso);
                    }
                    function getColor(iso) {
                        let country = countries.find(c => c.alpha3 == iso);
                        if (country && country.link) {
                            return country.external ? cWhite : cOrange;
                        }
                        return cGray;
                    }
                    function basedName(iso) {
                        let country = countries.find(c => c.alpha3 == iso);
                        if (country && country.country && country.name) {
                            return country.country + ": " + country.name;
                        }
                        return "";
                    }

                    map.addLayer('countries', {
                        title: function (d) {
                            if (isBased(d.iso)) {
                                return basedName(d.iso);
                            } else {
                                return d.name;
                            }
                        },
                        styles: {
                            stroke: cDarkGray,
                            fill: cGray
                        },
                        mouseenter: function (d, path) {
                            if (!isBased(d.iso)) {
                                path.attr('fill', Math.random() < 0.5 ? cDarkOrange : cDarkWhite );
                            }
                            return;
                        },
                        mouseleave: function (d, path) {
                            if (!isBased(d.iso)) {
                                path.animate({ fill: getColor(d.iso) }, 1000);
                            }
                            return;
                        },
                        click: function (d, path) {
                            let country = countries.find(c => c.alpha3 == d.iso);
                            if (country.link) {
                                window.open(country.link);
                            } else {
                                window.open('/fork');
                            }
                        }
                    });

                    map.getLayer('countries').style('fill', function (data) {
                        return getColor(data.iso);
                    });
                }
            });

        }, { padding: -5 });

    });

</script>

<div id="map" style="margin:1em 0;">
</div>

<center>
    <a href="/concept">
        <img src="/images/concept.svg" width="69%"/>
    </a>
</center>