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.

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.

About these ads

29 thoughts on “HTML5 – SVG Demographic Map Dashboard Example

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

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

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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s