Adding a 3rd frame + Fading Past events

45 views
Skip to first unread message

Abraham Heinemann

unread,
Jun 18, 2015, 6:05:46 PM6/18/15
to timemap-d...@googlegroups.com
Hi,

Just to start I am not very good at programming but manage to work it out.

Timemaps works great for most of what I want to display but there are two features I wondered if anyone had worked out or has any suggestions:

(1) I plan to add a third frame in which certain statistical data applies to the whole map I am looking at. For example change in population. I know I could stick an expanding bubble onto map, but as there are a number of data sets like such as temperature over time for given map, I was wondering what people knew or could suggest in terms of a third parameter in which a simple bar chart could be placed that would change as the you scroll forward and backward in time?

(2) For certain reasons I would not simply like to show all or just a selected set of data when the timeline is hovering over a ceratin date. I would also like to show all the rest of the data not appearing at that time but faded out partially, or perhaps even fading out more as you move away from its position on timeline and vica versa. Any ideas of how to crack that?

Any suggestions or perhaps work you know of already done on this within the timemaps context would be helpful.

Thanks

Nick Rabinowitz

unread,
Jun 18, 2015, 6:24:41 PM6/18/15
to abrahamh...@gmail.com, Timemap.js Development
Hello Abraham -

1) You can access the currently visible data items via 

function getVisibleItems() {
  tm.getItems().filter(function(item) {
     return item.placemarkVisible;
  });
}

The resulting array could be used to update a bar chart, e.g. one made with D3 - see http://bl.ocks.org/mbostock/3885304 for an example.

You'd probably want to add this as an onScrollListener:

tm.timeline.getBand(0).addOnScrollListener(function() {
updateBarChart(getVisibleItems()); 
}); 2) I did this in the GapVis project here: https://github.com/nrabinowitz/gapvis/blob/master/app/views/TimeMapView.js#L205

It's been a while, but I think this worked by setting up an array of marker images at varying opacities, then selecting the right image depending on the timeline position.

Hope that helps -

-Nick

--
You received this message because you are subscribed to the Google Groups "Timemap.js Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to timemap-develop...@googlegroups.com.
To post to this group, send email to timemap-d...@googlegroups.com.
Visit this group at http://groups.google.com/group/timemap-development.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages