aljaz/twentyone-world.github.io
1
0
Fork 0
mirror of https://github.com/aljazceru/twentyone-world.github.io.git synced 2025-12-19 17:24:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: colorize countries

Browse Source 
WIP
This commit is contained in:
Gigi
2022-04-26 11:36:03 +02:00
parent 97e2675725
commit 5e411d88e0
2 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
data/countries.json
View File

@@ -100,7 +100,8 @@
"alpha3": "AUT",
"numeric": 40,
"latitude": 47.3333,
"longitude": 13.3333
"longitude": 13.3333,
"link": "https://einundzwanzig.space/meetups"
},
{
"country": "Azerbaijan",
@@ -631,7 +632,7 @@
"longitude": 9,
"city_name": "Munich",
"nb_visits": 456,
"href": "https://einundzwanzig.space/meetups"
"link": "https://einundzwanzig.space/meetups"
},
{
"country": "Ghana",

49
index.html
View File

@@ -2,7 +2,7 @@
layout: map
title: Twentyone.World
jsplugins:
qtip: '/js/jquery.qtip.min.js'
qtip: '/js/jquery.qtip.min.js'
---
<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
@@ -11,7 +11,7 @@ jsplugins:
<script type="text/javascript">
$(function() {
$(function () {
// initialize tooltips
$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
@@ -19,7 +19,7 @@ jsplugins:
var map = kartograph.map('#map');
map.loadMap('map/world.svg', function() {
map.loadMap('map/world.svg', function () {
map.addLayer('context', {
styles: {
stroke: '#aaa',
@@ -36,18 +36,18 @@ jsplugins:
});
map.addLayer('countries', {
title: function(d) { return d.name },
title: function (d) { return d.name },
styles: {
stroke: '#222',
fill: '#333'
},
mouseenter: function(d, path) {
path.attr('fill', Math.random() < 0.5 ? '#c04' : '#04c');
mouseenter: function (d, path) {
path.attr('fill', Math.random() < 0.5 ? '#735000' : '#BBB');
},
mouseleave: function(d, path) {
mouseleave: function (d, path) {
path.animate({ fill: '#333' }, 1000);
},
click: function(d, path) {
click: function (d, path) {
console.log(d.iso);
}
});
@@ -55,21 +55,44 @@ jsplugins:
$.ajax({
url: 'data/countries.json',
dataType: 'json',
success: function(countries) {
success: function (countries) {
var scale = kartograph.scale.sqrt(countries.concat([{ nb_visits: 0 }]), 'nb_visits').range([0, 60]);
var orangeCountries = countries.filter(function hasLink(c) {
var hasLink = c.link ? true : false;
return hasLink;
});
map.getLayer('countries').style('fill', function (data) {
console.log('gnaaa');
var germany = countries[0];
console.log(germany);
console.log('ORANGE COUNTRIES: ' + orangeCountries);
var orangeCountryCodes = orangeCountries.map(function(c) {
return c.alpha3;
});
console.log('ORANGE CODES: ' + orangeCountryCodes);
var isOrangeCountry = orangeCountryCodes.includes(data.iso)
return isOrangeCountry ? '#d00' : '#ccc';
});
map.addSymbols({
type: kartograph.Bubble,
data: countries,
location: function(country) {
location: function (country) {
return [country.longitude, country.latitude];
},
radius: function(country) {
radius: function (country) {
return scale(country.nb_visits);
},
tooltip: function(country) {
return '<h3>'+country.country_name+'</h3>'+country.nb_visits+' visits';
tooltip: function (country) {
return '<h3>' + country.country_name + '</h3>' + country.nb_visits + ' visits';
},
sortBy: 'radius desc',
style: 'fill:#F2A900; stroke: #000; fill-opacity: 0.5;',