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

wip: data bubbles, mouse events

Browse Source
This commit is contained in:
Gigi
2022-04-26 00:28:29 +02:00
parent 1204f801aa
commit bd93ea1722
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@@ -40,27 +40,36 @@ jsplugins:
styles: { styles: {
stroke: '#333', stroke: '#333',
fill: '#fff' fill: '#fff'
},
mouseenter: function(d, path) {
path.attr('fill', Math.random() < 0.5 ? '#c04' : '#04c');
},
mouseleave: function(d, path) {
path.animate({ fill: '#f6f4f2' }, 1000);
},
click: function(d, path) {
console.log(d.iso);
} }
}); });
$.ajax({ $.ajax({
url: 'data/countries.json', url: 'data/countries.json',
dataType: 'json', dataType: 'json',
success: function(cities) { success: function(countries) {
var scale = kartograph.scale.sqrt(cities.concat([{ nb_visits: 0 }]), 'nb_visits').range([0, 60]); var scale = kartograph.scale.sqrt(countries.concat([{ nb_visits: 0 }]), 'nb_visits').range([0, 60]);
map.addSymbols({ map.addSymbols({
type: kartograph.Bubble, type: kartograph.Bubble,
data: cities, data: countries,
location: function(city) { location: function(country) {
return [city.long, city.lat]; return [country.longitude, country.latitude];
}, },
radius: function(city) { radius: function(country) {
return scale(city.nb_visits); return scale(country.nb_visits);
}, },
tooltip: function(city) { tooltip: function(country) {
return '<h3>'+city.city_name+'</h3>'+city.nb_visits+' visits'; return '<h3>'+country.country_name+'</h3>'+country.nb_visits+' visits';
}, },
sortBy: 'radius desc', sortBy: 'radius desc',
style: 'fill:#800; stroke: #fff; fill-opacity: 0.5;', style: 'fill:#800; stroke: #fff; fill-opacity: 0.5;',