Srirangan

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.

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

Releas­ing a sim­ple, pow­er­ful and exten­si­ble Map com­po­nent devel­oped using Action­Script and Flex 3. The idea is that a map con­tains one or more poly­gons rep­re­sent­ing each sub-region. Each poly­gon can have mouse events attached to it and can have fur­ther prop­er­ties set. This con­cept is fur­ther extended in my sec­ond map com­po­nent i.e. the Choro­pleth Map that will be released later this week so stay tuned!

Demo | Source code

This com­po­nent extends the default Leg­end com­po­nent and adds to it few item high­light­ing related fea­tures. It works with all chart types and click­ing on a leg­end item will lead to its vis­i­bil­ity being tog­gled. Fur­ther­more mouse over leg­end item leads to reduc­tion of alphas of other chart series except the related chart series of the leg­end item on which the mouse is over.

Code:

<visualization:AdvancedLegend dataProvider="{lineChart}"/>

Screen­shot:

What’s next?
– Check­boxes based selec­table leg­end items 
– Chart series item style con­trols via legend 

Demo | Source code

This com­po­nent extends the default TitleWin­dow com­po­nent and add two very use­ful fea­tures which make the con­tainer resize able and mov­able. The AdvancedTi­tleWin­dow can be moved using the mouse drag on the title­Bar and it can be resized using the mouse drag on the bot­tom right region.

Code:

<containers:AdvancedTitleWindow width="400" height="300"/>

Screen­shot:
 

What’s next?
– Dock­ing
– Min­i­mize, Max­i­mize options
– Selec­table style patterns

Demo | Source code

This ver­sion (0.1) of the Dashed­Li­ne­Series com­po­nent is an exten­sion and imple­men­ta­tion of the won­der­ful code posted on Qui­etly Schem­ing by Ely Greens­field. The com­po­nent is an exten­sion of a reg­u­lar Line­Series except that it has a cus­tom Line­Series­Ren­derer that draws a dashed line instead of a straight line.

Screen shot:
 

Code:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:visualization="net.srirangan.visualization.*">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);]]></mx:Script>
<mx:Panel title="Line Chart With Strokes">
     <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true" seriesFilters="{new Array}">
        <mx:horizontalAxis>
           <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
        </mx:horizontalAxis>
        <mx:series>
           <visualization:DashedLineSeries yField="Profit" displayName="Profit"/>
           <mx:LineSeries yField="Expenses" displayName="Expenses"/>
           <mx:LineSeries yField="Amount" displayName="Amount"/>
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}" direction="horizontal"/>
  </mx:Panel>
</mx:Application> 

What’s next?
– Pre defined mul­ti­ple line pat­terns
– User defined line patterns 

Demo | Source code