aljaz/twentyone-world.github.io
1
0
Fork 0
mirror of https://github.com/aljazceru/twentyone-world.github.io.git synced 2025-12-21 16:34:25 +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: {
stroke: '#333',
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({
url: 'data/countries.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({
type: kartograph.Bubble,
data: cities,
location: function(city) {
return [city.long, city.lat];
data: countries,
location: function(country) {
return [country.longitude, country.latitude];
},
radius: function(city) {
return scale(city.nb_visits);
radius: function(country) {
return scale(country.nb_visits);
},
tooltip: function(city) {
return '<h3>'+city.city_name+'</h3>'+city.nb_visits+' visits';
tooltip: function(country) {
return '<h3>'+country.country_name+'</h3>'+country.nb_visits+' visits';
},
sortBy: 'radius desc',
style: 'fill:#800; stroke: #fff; fill-opacity: 0.5;',