Get my new tutorials in your inbox every week

HTML5 – SVG Demographic Map Dashboard Example

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.

Live Demo: http://jsphkhan.github.io/html5_svgmap/.
Source Code: https://github.com/jsphkhan/jsphkhan.github.io/tree/master/html5_svgmap

Demographic Choropleth Map Example

Pls 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.

  1. Imran

    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

  2. Android Games

    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.

  3. Aubrey Bellomo

    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

  4. Vijay Rajan

    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

    • joseph

      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

  5. Swetha

    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.

    • joseph

      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

Write a Comment

Your email address will not be published. Required fields are marked *