GeoVis
GeoVis est un composant d’analyse visuelle géographique, qui fait partie de la librairie open source BirdEye (http://code.google.com/p/birdeye/). Ce composant permet aux utilisateurs, de créer des interfaces de visualisation de données pour l’analyse de données géo spatiales. La librairie peut être téléchargée depuis l’adresse suivante :
http://code.google.com/p/birdeye/source/checkout
Le composant fournit des cartes géographiques avec divers projections tel que :
- Géographic
- Lambert equal area
- Mollweide
- Miller cylindrical
- WinkelTripel
- EckertIV
- EckertVI
- Goode
- Sinsoidal
- Robinson
Une projection en cartographie est un ensemble de technique permettant de représenter la surface de la terre sur la surface plane d’une carte. Le choix de la projection, dépends de l’usage que l’on veut en faire, car les projections peuvent avoir diverses propriétés :
- projection équivalentes : qui conserve localement les surfaces.
- Projection conforme : qui conserve localement les angles, donc les formes.
- Projection aphylactique : elle n’est ni conforme ni équivalente, mais peut être équidistante, c'est-à-dire conserver les distances sur les méridiens.
Une projection ne peut être à la fois conforme et équivalente.
Dans notre exemple, nous allons utiliser la projection Géographique :
<geomap:WorldMap projection="Geographic">
La balise « WorldMap » produit une carte géographique du monde vide. Il existe deux types de cartes pour l’instant, qui sont :
- WorldMap
- USStates
Il existe différentes région pour chacune de ces cartes qui sont:
- pour le monde :
- AfricaMap
- AntarticaMap
- AsiaMap
- CISMap
- EasternMap
- EuropeMap
- NorthAfricaMap
- NorthAmericaMap
- OceaniaMap
- SouthAmericaMap
- SouthEasternMap
- SouthernMap
- SubSaharaMap
- WesternMap
- WorldMap
- pour les Etats-Unis :
- ConusMap
- EastNorthCentralMap
- EastSouthCentralMap
- MiddleAtlanticMap
- MidwestMap
- MountainMap
- NewEnglandMap
- NortheastMap
- OconusMap
- PacificMap
- SouthAtlanticMap
- SouthMap
- USStates
- WestMap
- WestNorthCentralMap
- WestSouthCentralMap
Nous allons maintenant ajouter quelques fonctionnalités à notre application, que nous allons expliquer au fur et à mesure.
Nous allons tout d’abord mettre une image d’arrière plan à notre composant, pour cela nous utilisons la balise « RasterLoader » :
<raster:RasterLoader projection="Geographic" visible="true" source="@Embed(source='raster/worldtopobathy.jpg')" id="myRaster" />
Nous allons ensuite colorier les pays de notre carte, il existe pour cela deux possibilités :-« features » qui est un objet géométrique qui représente un pays, il faut définir cette balise pour chaque pays.
<features:Features foid="SAU" fillItem="0xFF0000" />
Vous verrez ainsi apparaître l’Arabie Saoudite en rouge sur votre carte.
- « choropleth » permet quand à elle de colorier plusieurs pays à la fois selon des schémas implémentés selon ColorBrewer (http://www.colorbrewer.org). ColorBrewer inclus 35 schémas qui peuvent être configurés selon 3 méthodes :
- Sequential
- Diverging
- Qualitative
Référez-vous à ColorBrewer pour les différents types de schémas.
<analysis:Choropleth id="choropleth" alpha="0.7" dataProvider="{myWorldMedals.regions.region.Countries}" foidField="@iso" colorField="@gold" scheme="RdPu" steps="4" dataTipFunction="customDataTip" highlighted="true" />
Ajoutons quelques symboles sur notre carte, il existe la aussi deux méthodes qui sont « Symbol » & « Symbols ».
L’utilisation de symboles permet d’annoter la carte avec une représentation multidimentionelle que ne permet pas la colorisation. Par exemple l’utilisation d’un pie chart permet de présenter de multiples valeurs.
Tout comme pour les « features », la première méthode ne permet de définir un symbole que pour un pays à la fois:
- « Symbol » :
<mx:Repeater id="r" dataProvider="{myWorldMedals.regions.region}"> <symbols:Symbol id="mySymbol" key="{r.currentItem.@iso}" > <quarks:PieSpark id="PS1" visible="true" dataProvider="{r.currentItem.Total.tot.medal}" dataField="@number" gradientColors="{medalsColors}" width="{sizePie(r.currentItem.@total)}" height="{sizePie(r.currentItem.@total)}" showDataTips="true" dataTipFunction="custDT" /> </symbols:Symbol> </mx:Repeater>
Comme le montre le code, il est possible d’utiliser un répéteur afin de s’épargner des lignes de codes inutiles.
-« Symbols » quand à lui permet d’afficher un même type de symbole sur plusieurs pays à la fois :
<symbols:Symbols id="mySymbols" dataProvider="{myWorldMedals.regions.region.Countries}" foidField="@iso" itemRenderer="renderers.MedalsRenderer" visible="true" />
Dans notre exemple, nous utilisons un « itemRenderer » pour présenter les médailles d’or de chaque pays. Dans votre « itemrenderer » vous pouvez bien entendu mettre tout ce que vous voulez (images, charts, etc…).
Ces deux méthodes placent les symboles au centre des pays, mais il existe également une méthode pour placer des objets selon la latitude et la longitude :
<locators:LatLong id="myLocators" visible="true" lat="40.78333333" long="-73.96666667" > <mx:Label color="0x777777" text="New York" /> </locators:LatLong>
Nous allons également tracer sur notre carte le trajet parcouru par la flemme olympic, pour ce faire, nous utilisons les « Flow » :
<analysis:Flow id="johFlows" dataProvider="{myFlows}" fromField="@fromID" toField="@toID" showDataTips="true" valueField="@desc" fill="0xFF6666" visible="true" includeInLayout="false" />
Nous allons finalement placer une légende correspondant à la coloration de notre carte :
<mx:Canvas width="100%" horizontalScrollPolicy="off" > <surrounds:Legend target="{choropleth}" x="{this.width/2-360}" y="780" width="720" height="20" /> </mx:Canvas>
Ce composant évolu très rapidement, c’est pourquoi je vous conseil de visiter l’explorateur régulièrement à l’adresse suivante :
http://birdeye.googlecode.com/svn/trunk/geovis/demo/GeoVisExplorer.html
Ainsi que les explorateurs des autres composants de la librairie :
http://birdeye.googlecode.com/svn/trunk/ravis/RaVisExamples/example-binaries/RaVisExplorer.html
http://birdeye.googlecode.com/svn/trunk/qavis/examples/bin/QaVisExplorer.html
Je vous joins le projet de l’application traitée dans notre exemple.
