«
»

, , , ,

Choropleth Map Component (Adobe Flex 3)

Monday, June 22nd, 2009 - 08:05 - Code

As promised, releas­ing an Adobe Flex 3 com­po­nent for Choro­pleth Map. The Choro­pleth Map com­po­nent is an extension/implementation of my Map com­po­nent released earlier.

choropleth-map-example What is a Choro­pleth Map?
A choro­pleth map (Greek χωρα + πληθαίν:, (“area/region” + “mul­ti­ply”) is a the­matic map in which areas are shaded or pat­terned in pro­por­tion to the mea­sure­ment of the sta­tis­ti­cal vari­able being dis­played on the map, such as pop­u­la­tion den­sity or per-capita income.

The choro­pleth map pro­vides an easy way to visu­al­ize how a mea­sure­ment varies across a geo­graphic area or it shows the level of vari­able within a region. — Wikipedia

—

The com­po­nent does just that. It plots a map and then applies a theme to the var­i­ous regions of the map. Rel­e­vant data and leg­end infor­ma­tion needs to be pro­vided to the com­po­nent. (See exam­ple attached below!)

The com­po­nent also pro­vides tooltips on spe­cific regions and pro­vides an “Active Leg­end” that lets you high­light and hide/unhide spe­cific regions of the map based on the data and legend.

Demo | Source code


  1. Vlad says:
    2009/08/17 at 03:28

    That is very cool thing!
    Can you tell how you got coor­di­nates for districts?

  2. Dean says:
    2009/08/28 at 19:20

    I agree, very cool. But, how did you get the coor­di­nates? Do you have a tool that cre­ates the poly­gon coordinates?

  3. Srirangan says:
    2009/09/03 at 18:32

    Vlad/Dean, I got the co-ordinates from an SVG file posted on Wikipedia.

  4. Vlad says:
    2009/09/03 at 22:30

    Thanks, but can you post a link for SVG file?
    I can’t find it!
    One more…
    Does Flex sup­port SVG files?

  5. Srirangan says:
    2009/09/22 at 07:07

    Yeah, SVGs can be embed­ded into Flex as Assets.. http://www.adobe.com/devnet/flex/quickstart/embedding_assets/

  6. Danny Trejo says:
    2009/10/13 at 05:09

    Hey very cool exam­ple, I need to do the same but for the canada map.. How I obtain the poly­gon coordinates?

    can you give me a hand on this please ?

  7. Danny Trejo says:
    2009/10/13 at 06:01

    Hey when exe­cute the swf out of bin folder it doesnt work, it shows noth­ing, I put in the project prop­er­ties ” –locale en_US –use-network=false”

  8. Danny Trejo says:
    2009/10/13 at 06:03

    Hey it works !

  9. Srikanth says:
    2009/11/21 at 11:34

    Could you post the link to your svg file (with coor­diates)?
    Do you have the same for India with states?

    Thanks,
    Srikanth

  10. Srirangan says:
    2009/11/23 at 09:54

    Hi Srikanth,

    I’ll try to find the link for that file and post it here. It has been a while since I worked on this and locat­ing the file will take me some time.

    For the map of India, I would rec­om­mend the fol­low­ing:
    1. Use the iLog Elixir map com­po­nents since it has a shape­file con­verter
    2. The shape files for India is avail­able on the Elec­tion Com­mis­sion of India website

    - Sri

  11. Srikanth says:
    2009/11/23 at 21:32

    Thanks for the response sri­ran­gan. Sorry to bother you with fol­lowup ques­tion.
    I think my con­cern is not about find­ing SVG file, but how you are deter­min­ing the coor­di­nates. I’ve found an svg file in wikipedia for Pak­istan: (http://upload.wikimedia.org/wikipedia/commons/6/66/Pakistan_location_map.svg) and I checked the xml using fire­bug. I was able to see the path data, but it looks quite dif­fer­ent from what you’ve in your file.

    M 2330.6728,914.3584 C 2331.9409,914.64014 2333.6338,915.33203 2334.5864,916.25635 C 2335.5376,915.92041 2337.9995,915.66114 2338.9302,915.86768 L 2342.1411,916.93164 C 2342.7676,917.13916 2343.1558,917.17041 2343.7466,917.46338 C 2343.8227,917.50147 2346.1401,919.38086 2346.3613,919.55713 C 2346.9985,920.06787 2347.7476,920.29443 2348.4019,920.74609 C 2349.1699,921.27588 2350.4512,922.69384 2351.3477,922.84765 L 2353.687,922.49658 L 2354.7305,923.10058 L 2355.9805,923.08154 C 2356.1426,923.24023 2357.7598,924.84961 2357.8247,924.88867 C 2358.7764,925.45849 2361.1802,926.32666 2363.2842,927.00976

    Your coor­di­nates does not have any “C“s, “L“s and “M“s. Is it only because of dif­fer­ent SVG file? I searched for many svgs on wikipedia and almost all of them have C, L and M in the coordinates.

    Thanks for your response.

  12. vikas says:
    2010/03/17 at 13:31

    i want link all dis­trict to main pak­istahn map.just give me some hint now

  13. vikas says:
    2010/03/18 at 15:04

    i m creat a india map n all state map but i got some prob­lem i still search­ing the how to link all state to the india map.
    i m cre­at­ing the all map with the help of ur code

  14. sanj says:
    2010/03/25 at 20:42

    wow! this is a great hint but it took me so long to fig­ure out how to get the coor­di­nates in cor­rect format.

    After 2 hours I have finally fig­ured out. Thanks

  15. Nirav says:
    2010/06/14 at 13:40

    Hi Sir,

    Can you post coor­di­nates for india? I’ve tried from ur code but, I’m not get­ting the right .svg.

Leave a Reply