The previous month I was busy with experimenting a dashboard which had choropleth/thematic maps, charts, interactivity, also dynamic data reading. Here is what I came up with. This one is a HTML5 based dashboard. Looks like a Flex application isn’t it? The map is of United States and the demographic data are just demo data although they are read from XML files. What’s good is that this application can scale, in the sense that the data can be fed to it by services running on remote servers and the map can display that. Also the data distribution has two categories a) Equal Distribution b) Quantiles method. Had to look up the statistic book again for these two. Play with the application and let me know if you like it.
The application is meant for computer browsers that support HTML5 Canvas and Inline SVG. You can best view it in Chrome, FF and Safari.
Click the image to see the live demo.
(The demo link has slight problems at the moment. I am fixing this right now. But you can view the source code in the browser and download it if needed.)
Note: The script code needs a bit of re-factoring. I am working on it partially due to time constraints. Once you have the code, you can modify it as per your needs.
Issue: I am noticing some issues with the select lists on the top. The Equal Intervals/Quantiles select list some times does not make any changes in the map. I will look into this, but you might want to test it.
Hi Joseph,
This is amazing! It really helped me a lot with a project I’m working on for UK postcodes. With the equal interval classification of data wouldn’t there be issues with data that has outliers?
Thanks
Hi Imran,
Good to know that it helped you. To be honest I have not worked on it for around 8 months now so lost a bit of touch. In case I have something I will let you know.
Thanks.
No problem Joseph. Thanks for looking into it.
You are welcome Imran.
Totally a new thumbs upwards. Excellent luck!
Thank you!! It was quite helpfull, i am going to give it a try with my individual 1st live journal website.
Thanks Naomi……
Nice post at HTML5 – SVG Map Example Joseph's RIA Lab. I was checking constantly this blog and I am impressed! Extremely useful information particularly the last part
I care for such information much. I was seeking this particular information for a very long time. Thank you and best of luck.
I’ll book mark your web web site and consider the rss feeds in addition?I am glad to obtain so several helpful specifics the following inside the submit, we would like create added techniques on this regard, thanks for revealing
Hi Joseph,
Can I get the source code for the above sample. If so please mail it to the given mail id.
Thanks,
Pavan
Pavan,
Just right click the demo. You can view the source and save it. To download the .js and .css files click on the hyperlinks.
Thanks.
Thanks for this data
This post might be extremely useful in my expertise. I’ve merely started out out a new self-hosted blog and This report assisted a good deal. thank you!
Hi, Do you know if I can display data on an SVG that I pull from my database or does it have to be hardcoded?
Hi,
Yes, you can pull data from DB, store them in XML files and then display them in the SVG map. The example that I created is in fact using XML files. You can also follow some other way for eg. JSON files and in that case you need to modify the code accordingly.
Thanks.
Joseph
Thanks Joseph!
Hi Joseph,
Do you mind if I can see just a small sample of your XML files. I’ve never worked with XML before and would like to see how you have set it up in terms of tags and so on. I would really appreciate that.
Farha
Farha,
You can check out the XML that I used for the demo: http://jbk404.site50.net/html5/svgmap/data/mapXML.xml
Open the link in a browser and you will see the tags and the attributes.
Thanks.
Joseph
Awesome, pleased it had been helpful.
Thanks so much Joseph. I really appreciate it.
Great to know that it helped you.
Regards.
Joseph
Thanks a lot(!), but where did you get the SVG for this? It’s missing the upper peninsula of Michigan…
Hi Daniel,
I got the SVG from Wikipedia – http://en.wikipedia.org/wiki/File:Blank_US_Map.svg
You can download blank maps.
The application I did was just for a demo cause. So i did not really check what was missing.
Thanks.
Hi Joseph,
Really excellent work!. This is what exactly i have searched across many websites and tutorials. After walk through you demo, you make me very impressed and happy. I am using this concept for my project its perfectly working in Firebox and not working in Chrome(XML not loaded) & IE(data table not loaded) browsers. I’m fighting with the code to fix the issues. Where can I get Pennsylvania map? Can you guide be please?. I am planning to upgrade the concept little more user friendly with some other interactive information.
Again, Thanks for your awesome workaround!. Keep it up.
Regards,
Vijay
Hi Vijay,
Thanks for writing.
The demo should work in Chrome. Make sure if you are running the demo locally, you run it from a web server, since it is using Ajax and if you drag your html file to Chrome, the Ajax calls will not be made.
IE will not run the charts since they are built using HTML5 Canvas. Moreover I used a library for the charts – RGraph. So you might want to look at their docs.
For the maps, I downloaded them from Wikipedia. Just search in Google for Blank SVG map of USA or any state. You should be able to find out.
And you can use the code to modify it. My code is not that re-factored very well. So you might want to put your own way.
Thanks.
Joseph
Thanks for your reply Joseph!
Got the Pennsylvania map.
Vijay
Great!!
Hi Joseph,
Really nice post,
In my case it is little different,I am having US map with counties.So if i place inside the tags and when i try to run my application i am getting error like “Compiler Error CS1647″. (http://msdn.microsoft.com/en-us/library/92855ayd%28v=vs.80%29.aspx). So it mean i cannot hard code my SVG data paths.Is there a way i can achieve this.?I also wanted map to be interactive.So that if i click on a state/county i want to perform some action(may be like showing tooltip messages,highlighting that particular state or something like that.).
please let me know if i am not clear to you.
Swetha,
Yes, you have to provide me more details. I am confused on what you are looking for. Did you get the map?? You can look for US map with counties in Wikipedia.
Regarding interactivity, you can do that. I have done that already in my demo, when you hover your mouse over a state, you can see it provides more details. You can definitely do that.
Thanks