Hello,
Iam struggling with an animation of a worldmap where the size of markers should dynamically change over time. However, the markers always remain at the original size of the first frame and do not change. When using a choropleth map and dynamically changing colors it works without problems. So it seems to me that somehow the addFrames do not accept changing marker sizes? I have tried various things, but so far without success.
I would be very grateful for any help. Thx a lot!
HTML:
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='myDiv'></div>
<script src="world_map.js"></script>
</body>
JS:
d3.csv("https://raw.githubusercontent.com/cieb-unibas/innoscape-part-II-descriptive-analysis/master/report_en/trad_data.csv", function(err, rows){
function filter_and_unpack(rows, key, year) {
return rows.filter(row => row['year'] == year).map(row => row[key])
}
var frames = [];
var slider_steps = [];
var n = 21;
var num = 1990;
for (var i = 0; i <= n; i+=1) {
var value = filter_and_unpack(rows, 'value', num).map(x => x * 100)
var locations = filter_and_unpack(rows, 'par.code', num)
var text = filter_and_unpack(rows, 'Country', num)
frames[i] = {data: [{locations: locations, text: text, size: value}], name: num}
slider_steps.push ({
label: num.toString(),
method: "animate",
args: [[num], {
mode: "immediate",
transition: {duration: 500},
frame: {duration: 800}
}]
})
num = num + 1
}
var width_plot = 900;
var heigth_plot = 450;
var data = [{
hovertemplate: '<b>%{text}</b>' +
'<extra></extra>',
type: 'scattergeo',
locations: frames[0].data[0].locations,
text: frames[0].data[0].text,
marker: {
size: frames[0].data[0].size,
sizeref: 0.25
},
colorscale: [[0,'rgb(178, 24, 34)'],[1,'rgb(220, 220, 220)']], autocolorscale: false,
reversescale: true,
showscale: false
}];
var geo_var = {
scope: "world",
countrycolor: 'rgb(255, 255, 255)',
showland: true,
landcolor: 'rgb(217, 217, 217)',
showlakes: false,
lakecolor: 'rgb(255, 255, 255)',
subunitcolor: 'rgb(255, 255, 255)',
lonaxis: { range: [-200, 220] },
lataxis: { range: [-55, 80] },
showframe: false,
showcoastlines: false
};
var layout = {
dragmode: false,
xaxis: {fixedrange: true},
yaxis: {fixedrange: true},
autosize: true,
width: width_plot,
height: heigth_plot,
title: '',
yanchor: 'left',
xanchor: 'left',
margin: {r:20, t:0, l:0, b:20, pad: 0},
geo: geo_var,
updatemenus: [{
x: 0.1,
y: 0,
yanchor: "top",
xanchor: "right",
showactive: false,
direction: "left",
type: "buttons",
pad: {"t": -412, "r": 0, "l": 0},
buttons: [{
method: "animate",
args: [null, {
fromcurrent: true,
transition: {
duration: 10,
},
frame: {
duration: 1000, redraw: true
}
}],
label: "Play"
}, {
method: "animate",
args: [
[null],
{
mode: "immediate",
transition: {
duration: 0
},
frame: {
duration: 0, redraw: true
}
}
],
label: "Pause"
}]
}],
sliders: [{
active: 0,
steps: slider_steps,
x: 0.15,
len: 0.9,
xanchor: "top",
y: 0,
yanchor: "top",
pad: {t: -50, b: 10, r: 50, l:0},
currentvalue: {
visible: true,
prefix: "Year:",
xanchor: "right",
font: {
size: 18,
color: "#666"
}
},
transition: {
duration: 200,
easing: "linear"
}
}]
};
const config = {displayModeBar: false, responsive: true};
Plotly.newPlot('myDiv', data, layout, config).then(function() {
Plotly.addFrames('myDiv', frames);
});
})
