aljaz/twentyone-world.github.io
1
0
Fork 0
mirror of https://github.com/aljazceru/twentyone-world.github.io.git synced 2025-12-19 15:34:26 +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", "alpha3": "AUT",
"numeric": 40, "numeric": 40,
"latitude": 47.3333, "latitude": 47.3333,
"longitude": 13.3333 "longitude": 13.3333,
"link": "https://einundzwanzig.space/meetups"
}, },
{ {
"country": "Azerbaijan", "country": "Azerbaijan",
@@ -631,7 +632,7 @@
"longitude": 9, "longitude": 9,
"city_name": "Munich", "city_name": "Munich",
"nb_visits": 456, "nb_visits": 456,
"href": "https://einundzwanzig.space/meetups" "link": "https://einundzwanzig.space/meetups"
}, },
{ {
"country": "Ghana", "country": "Ghana",

51
index.html
View File

@@ -2,7 +2,7 @@
layout: map layout: map
title: Twentyone.World title: Twentyone.World
jsplugins: jsplugins:
qtip: '/js/jquery.qtip.min.js' qtip: '/js/jquery.qtip.min.js'
--- ---
<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css"> <link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
@@ -11,7 +11,7 @@ jsplugins:
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function () {
// initialize tooltips // initialize tooltips
$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap'; $.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
@@ -19,7 +19,7 @@ jsplugins:
var map = kartograph.map('#map'); var map = kartograph.map('#map');
map.loadMap('map/world.svg', function() { map.loadMap('map/world.svg', function () {
map.addLayer('context', { map.addLayer('context', {
styles: { styles: {
stroke: '#aaa', stroke: '#aaa',
@@ -36,18 +36,18 @@ jsplugins:
}); });
map.addLayer('countries', { map.addLayer('countries', {
title: function(d) { return d.name }, title: function (d) { return d.name },
styles: { styles: {
stroke: '#222', stroke: '#222',
fill: '#333' fill: '#333'
}, },
mouseenter: function(d, path) { mouseenter: function (d, path) {
path.attr('fill', Math.random() < 0.5 ? '#c04' : '#04c'); path.attr('fill', Math.random() < 0.5 ? '#735000' : '#BBB');
}, },
mouseleave: function(d, path) { mouseleave: function (d, path) {
path.animate({ fill: '#333' }, 1000); path.animate({ fill: '#333' }, 1000);
}, },
click: function(d, path) { click: function (d, path) {
console.log(d.iso); console.log(d.iso);
} }
}); });
@@ -55,21 +55,44 @@ jsplugins:
$.ajax({ $.ajax({
url: 'data/countries.json', url: 'data/countries.json',
dataType: '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 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({ map.addSymbols({
type: kartograph.Bubble, type: kartograph.Bubble,
data: countries, data: countries,
location: function(country) { location: function (country) {
return [country.longitude, country.latitude]; return [country.longitude, country.latitude];
}, },
radius: function(country) { radius: function (country) {
return scale(country.nb_visits); return scale(country.nb_visits);
}, },
tooltip: function(country) { tooltip: function (country) {
return '<h3>'+country.country_name+'</h3>'+country.nb_visits+' visits'; return '<h3>' + country.country_name + '</h3>' + country.nb_visits + ' visits';
}, },
sortBy: 'radius desc', sortBy: 'radius desc',
style: 'fill:#F2A900; stroke: #000; fill-opacity: 0.5;', style: 'fill:#F2A900; stroke: #000; fill-opacity: 0.5;',
@@ -87,4 +110,4 @@ jsplugins:
<div id="map" style="border:0px solid #999; margin-bottom:1em"> <div id="map" style="border:0px solid #999; margin-bottom:1em">
</div> </div>
<p>Lorem ipsum, add your stuff.</p> <p>Lorem ipsum, add your stuff.</p>