Add timeline to explore map at previous times

[corradio]

• [x] Store wind/solar in database to be able to fetch previous times. Should fix #41
• [ ] Add picker to pick previous dates
• [x] Fetch last 24h async after loading to be able to play the timeline
• [ ] Add playback behavior

[ThierryOllivero]

Oh, I did not see that one. Fully agree. With ENTSOE and the work from Adam it should be doable.

[corradio]

It's already doable in principle, because we store historical data in a database. Another option is to show sparklines for each country, where we can show a short timeseries of the last X hours

[martindaniel4]

@corradio, @ThierryOllivero - For that one, I was thinking of a timeline graph that would display the average emissions per kwh produced in Europe. You can click on the graph and the map updates to that date.

Here are few design ideas / inspiration :

• In this article from the NYT, the timeline on the left serves as time selector. The map on the right updates as you move your cursor from left to right.

For our case, mouseover might be too subtle, but I like the overview first and details on demand. I understand that 2012 and 1988 where the two worst drought for corn. I can then drill down to understand what's happening at the geographic level.

• Same with Crossfilter, where the user can brush a timeline series and updates all other graphs.

Brushing might not be the best behavior for us as we are not really interested in aggregating over a long period, but I think the datetime graph is what we are looking for :

I also like the ability to click on an hyperlink and update the map. Like when you click on what happened on Jan 12 :

[corradio]

Very good input. I definitely think we should show a timeline / graph of co2 on which you can click to see the situation. A small player would also be nice, to animate through time, but it might be CPU intensive. The first thing to do here is to start designing or coding the timeline with random data. Then I can go ahead and make a time series of EU average of co2, fetch all the relevant data, and plug things together

[corradio]

We could also use something like that: https://bl.ocks.org/mbostock/4063318

[ThierryOllivero]

Yeah, this is more useful when you have that strongly vary every day, between "None, A little, A lot".

Veloviewer uses it for sports activities:

It shows all the day during which I ran the last 3 years. Very useful to see patterns, but not to navigate from a day to another.

We could have some kind of drill down:

First you click on a period, like 3 months, then drill down to 2 weeks, then the exact day, then the exact time. Not sure if everyone likes it though.

[corradio]

In order to show a time series of CO2 data, certain things have to be done on the backend. Firstly, we need to compute the CO2 timeseries, and store it somewhere. As this is not done for now, I suggest that we keep the first version simple. For a first version, what about showing a datetime picker like http://www.malot.fr/bootstrap-datetimepicker/demo.php ? Play around with it and let me know what you think. It's quite a quick win to implement such a picker, and the frontend logic for going back in time is already there. Let's act quickly!

[aknvictor]

I'll work on this simplified version

[corradio]

@Viktour19 any updates?

Also, here's an interesting comment that we got:

• There should always be a time stamp on the map. The map is being misused by the nuclear and coal lobbies - they display only night-time maps, without time stamp, to argue that solar power is not important in Europe. Your map enables this.
• adding a clock would be useful (for those of us not in Europe)

[corradio]

I'll start to work on this.

[corradio]

I'm experimenting with something like that:

We would of course remove the white input box, and either have a link or an icon next to the current time and date to edit each of them separately.

[martindaniel4]

@corradio - Love it.

To simplify, would it be possible to make the clickable / expand in the calendar ?

Something like in Google Analytics, with an arrow on the right :

[corradio]

The picker is fairly limited: https://chmln.github.io/flatpickr Feel free to look at the doc! However we will have to code our own picker at some point..

[corradio]

Also, because there is not "submit" button, I think I will add an "edit" button next to both time and date, and we will be able to change each separately.

[ThierryOllivero]

I was more thinking about something like that:

But with months instead of years, or something like that. Would it be too complicated or too heavy for the server?

[martindaniel4]

@ThierryOllivero - what's the value of a picker like this ?

If this usage is to pick a specific date, I like oli proposal. Simple enough.

@corradio - sorry did not mean to build the whole GA picker. I just mean that you have one displayed date on the top AND one date to pick your date. I think you can combine both in one date displayed.

This is for instance what Airbnb is doing on the search page :

Also you can just push it and we will tweak it afterwards

[ThierryOllivero]

The value is to quickly change from a date to another and see directly the change on the map.

A bit like here: https://earthengine.google.com/timelapse/

People find the map fun and entertaining, they want to play with it, to see the color change quickly, they want to find when Germany was Green, when France was orange, when Denmark was black. They want it to be quick.

[ThierryOllivero]

@corradio : What happened to your idea of using this: http://www.malot.fr/bootstrap-datetimepicker/demo.php ?

[corradio]

@martindaniel4 yes indeed this is what I was thinking of!

@ThierryOllivero totally agree, we should be able to go with a timeline and fast switches. I have some ideas about a more advanced picker, but it needs more thinking. Specifically, we need to both be able to navigate to a specific date, and to navigate smoothly between them. At Snips I had developped this kind of UI:

It's a timeline with a calendar. You can drag the current "dot" horizontally (to see same time of day across days) or vertically (to slide through a particular day), or you can use the big slider to slide across time without constraints. Background colors represent some kind of state (could be mean CO2 over Europe for example). Something like that could be a good next step. For now I want to do a quick win with a simple picker. More advanced UI can be done later.

About the malot timepicker, it had too many dependencies and was too big in size. Flactpickr is easier and more configurable in that sense.

[ThierryOllivero]

I like your timeline, without the colors.

OK to start with a simple picker, we'll improve later :)

[corradio]

I've played a bit around with it, and the picker is hard to customise. What I did for now, is that I added a flag so you can pick another time: http://electricitymap.tmrow.co/?timeline=true

We need to think harder about this. For now I see two ways:

• We show the calendar when an "edit" button is clicked on the top date
• We have a ventusky style timeline on the bottom, maybe with a panel containing co2 curves over time that appears when you hover above it in order to drag around. But we need to make room for it. Not easy for now.

[corradio]

Do we still need this, now that we are able to see the last 24h as a graph?

[ThierryOllivero]

I believe so. At some point, people might want to see how it is in Winter, in the summer, on their birthday, etc.

[corradio]

I'm closing this because this is an advanced feature for which we don't have the resources to execute on

[corradio]

For inspiration, we could use something like this to explore days: http://echarts.baidu.com/gallery/editor.html?c=calendar-effectscatter and then use the history graph to explore within a day.

[corradio]

Lots of good ideas, but closing due to inactivity. I also think we got it covered :)

[nielsle]

It could be great to have aggregate data for the last month grouped by time of day.

This would reveal that countries like Denmark rely on windy weather to be eco-friendly. And as AFAICS this feature would only require minor changes to the GUI.