Choropleth Map Component (Adobe Flex 3)

As promised, releasing an Adobe Flex 3 component for Choropleth Map. The Choropleth Map component is an extension/implementation of my Map component released earlier.

choropleth-map-example What is a Choropleth Map?
choropleth map (Greek χωρα + πληθαίν:, (“area/region” + “multiply”) is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income.

The choropleth map provides an easy way to visualize how a measurement varies across a geographic area or it shows the level of variable within a region. — Wikipedia

The component does just that. It plots a map and then applies a theme to the various regions of the map. Relevant data and legend information needs to be provided to the component. (See example attached below!)

The component also provides tooltips on specific regions and provides an “Active Legend” that lets you highlight and hide/unhide specific regions of the map based on the data and legend.

Demo | Source code


  1. Vlad says:

    That is very cool thing!
    Can you tell how you got coordinates for districts?

  2. Dean says:

    I agree, very cool. But, how did you get the coordinates? Do you have a tool that creates the polygon coordinates?

  3. Srirangan says:

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

  4. Vlad says:

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

  5. Danny Trejo says:

    Hey very cool example, I need to do the same but for the canada map.. How I obtain the polygon coordinates?

    can you give me a hand on this please ?

  6. Danny Trejo says:

    Hey when execute the swf out of bin folder it doesnt work, it shows nothing, I put in the project properties ” -locale en_US -use-network=false”

  7. Danny Trejo says:

    Hey it works !

  8. Srikanth says:

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

    Thanks,
    Srikanth

  9. Srirangan says:

    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 locating the file will take me some time.

    For the map of India, I would recommend the following:
    1. Use the iLog Elixir map components since it has a shapefile converter
    2. The shape files for India is available on the Election Commission of India website

    - Sri

  10. Srikanth says:

    Thanks for the response srirangan. Sorry to bother you with followup question.
    I think my concern is not about finding SVG file, but how you are determining the coordinates. I’ve found an svg file in wikipedia for Pakistan: (http://upload.wikimedia.org/wikipedia/commons/6/66/Pakistan_location_map.svg) and I checked the xml using firebug. I was able to see the path data, but it looks quite different 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 coordinates does not have any “C”s, “L”s and “M”s. Is it only because of different 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.

Leave a Reply