How can I create an interactive map like this: http://se.deltasd.bc.ca/vision/ while using HTML5?
However no matter which method is used, it will not work in IE8 and below, (and smooth transitions do not work in IE9).
Thank you for the advice, PZ.
I downloaded and installed Adobe Edge and then I imported my chart into the main screen.
Do you have any tips on how to make certain sections "pop up" and "clickable"? How can I incorporate video/pictures/audio?
All these are possible using the Edge interface. Your best course of action would be to check out the various videos associated with using Edge, and post specific questions on the Edge forum - http://forums.adobe.com/community/labs/edge , (links to videos and tutorials are also on this page).
One question though. Why do you wish to use Edge, (or html5/css) to create the interface?
If it is for use on Tablet or Smartphone devices then it will not work. The reason for this is that none of the effects will actually be usable/viewable as shown, as the link will be activated immediately the user 'moves' over it with their finger, (touch screen). It is possible to 'capture' the onclick event and prevent it actually going to the page that is linked to, but then you would have to actually create your own event action for the user to do so, and it is unlikely that a user would even consider learning a new event that is custom to your site.
Which program do you recommend I use in order to create a similar interactive chart? Edge? Flash? HTML5?
I would like for this chart to be viewable on every web browser/tablet/mobile phone possible.
A page that works across all devices with an interactive chart as shown in your link, would be impossible to use on touch devices, sorry!
This is one of the problems that many people face when they first start to convert to html5/css3, (or create new) a flash type animation, (with embedded links) that works on touch devices such as tablets and smartphones, and for many it requires a radical re-think of how the interface should work.
Without very specific info, my advice can obviously only be of the general variety, but as an example of the problems with doing this x-device -
If you were to create one page to do this and a user with an iPhone, (or similar) was to try and use the page, it is highly likely that the page would not fit on the screen at a sufficient size to be usable. Yes, the user can 'zoom' the page, but in order to do so they must touch the screen, and it is highly likely that a link would be activated to another page in doing so.
Europe, Middle East and Africa