Web GIS in practice II: interactive SVG maps of diagnoses of sexually transmitted diseases by Primary Care Trust in London, 1997 – 2003

Background The rates of Sexually transmitted diseases (STDs) in England have been rising steadily since the mid 1990s, making them a major public health concern. In 2003, 672,718 people were diagnosed with an STD in England, and around one third of those cases were diagnosed in London. Results Using GeoReveal v1.1 for Windows, we produced Web-based interactive choropleth maps of diagnoses of STDs by Primary Care Trust (PCT) in London for the years from 1997 to 2003 . These maps are in Scalable Vector Graphics (SVG) format and require a freely available Adobe SVG browser plug-in to be displayed. They are based on data obtained from the House of Commons Hansard Written Answers for 15 October 2004. They show steadily rising rates of STDs in London over the covered seven-year period. Also, one can clearly see on the maps that PCTs located in central London had the highest numbers of STD diagnoses throughout the mapped seven years. A companion bar chart allows users to instantly compare the STD figure of a given PCT for a given year against the average figure for all 25 mapped PCTs for the same year, and also compare those figures across all seven years. The maps offer users a rich set of useful features and functions, including the ability to change the classification method in use, the number of ranges in the map, and the colour theme, among others. Conclusions Wizard-driven tools like GeoReveal have made it very easy to transform complex raw data into valuable decision support information products (interactive Web maps) in very little time and without requiring much expertise. The resultant interactive maps have the potential of further supporting health planners and decision makers in their planning and management tasks by allowing them to graphically interrogate data, instantly spot trends, and make quick and effective visual comparisons of geographically differentiated phenomena between different geographical areas and over time. SVG makes an ideal format for such maps. SVG is a World Wide Web Consortium non-proprietary, XML-based vector graphics format, and is an extremely powerful alternative to Macromedia® Flash and bitmap graphics.


Background
Sexually transmitted diseases (STDs) have become a major public health concern in the UK during recent years. The rates of STDs in England have been rising steadily since the mid 1990s. In 2003, the number of STDs in England rose by 4% compared to 2002. Overall, 672,718 people were diagnosed with an STD in England in 2003, and around one third of those cases were diagnosed in the London area alone [1,2].  (Table 1 - [2]).
Though the table presents all the requested data, it remains very difficult for the reader to fully appreciate the patterns and trends buried in them, or make quick and effective comparisons between the figures for different PCTs or between the seven data sets for the years from 1997 to 2003.
Such data patterns, trends and comparisons derived from this Hansard table and other sources, e.g., demographic, deprivation/social exclusion, transport and existing GUM (Genito-Urinary Medicine) clinic data sets, are crucial for the decision maker wanting, for example, to: -improve access to GUM clinics and make decisions regarding the expansion or closure of existing clinics, or the creation of new ones; -channel resources and target STD prevention programmes to areas with the most need, or scale such programmes according to the magnitude of the problem in different areas (this is especially important in a climate of finite resources); and/or -monitor the impact of such programmes in a given area over time. In this paper, we describe a much better way of presenting the same Hansard table data in the form of interactive Web maps in Scalable Vector Graphics (SVG) format to further support health planners and decision makers in their planning and management tasks.

Results
Using GeoReveal, a tool from Graphical Data Capture Ltd (http://www.graphdata.co.uk/prod uct.asp?product_id=GeoReveal -see 'Methods' section below), we produced Web-based interactive choropleth maps of diagnoses of STDs by PCT in London for the years from 1997 to 2003, which readers can browse at http:// healthcybermap.org/PCT/STDs/ ( Figure 1). These maps and companion bar chart ('Chart Panel') are based on the data in Table 1, and show steadily rising rates of STDs in London over the covered seven-year period. Also, one can clearly see on the maps that PCTs located in central London, e.g., Camden PCT and Lambeth PCT, had the highest numbers of STD diagnoses throughout the seven years from 1997 to 2003.
As the mouse cursor is moved around the main map window, the 'Chart Panel' changes to display statistical data about the currently highlighted PCT. Each row of the bar chart represents data for one year and has two bars; a red bar that shows the value for the highlighted PCT, and a transparent blue bar which shows a mean value of this piece of data (or year) for all 25 mapped PCTs (when both bars overlap, a purple colour is produced - Figure 1).
Additionally, clicking a PCT area on the map will display an information box with all available data for that PCT ( Figure 2).  Figure 2).

From complex raw data to valuable decision support information
Turning raw tabular data into much more useful and accessible visual information in the form of interactive Web maps is much needed to support and empower decision makers, and even members of the general public. Such maps help us understand the relationships, patterns and trends buried in the original data sets and also enable instant visual comparisons to be made between different geographical areas and over time (when data sets for successive periods of time are available) [3].
We believe this transformation of raw data into valuable decision support information is very evident in the London STD example described in this paper. Readers only have to compare the original Hansard table (Table 1) with the corresponding interactive Web maps we have produced http://healthcybermap.org/PCT/STDs/ to see the difference for themselves and appreciate the value of interactive maps.

SVG: an ideal format for interactive Web maps
SVG is a non-proprietary language for describing rich, stylable two-dimensional graphics and graphical applications in XML (eXtensible Markup Language). SVG is fully endorsed by the W3C (World Wide Web Consortiumhttp://www.w3.org/Graphics/SVG/). It is rapidly becoming a popular choice for delivering interactive Web maps, being designed to work effectively across platforms, output resolutions, colour spaces, and a range of available bandwidths. It offers a rich modern graphics format providing the ability for better map display, and advanced graphical features such as transparency, arbitrary geometry, filter effects (shadows, lighting effects, etc.), scripting, and animation [4].
All these features have made SVG a direct competitor to the proprietary Macromedia ® Flash format [5]. Vectorbased images (describing shapes and paths), such as those in SVG and SWF (Macromedia ® Shockwave/Flash File) formats, will keep their sharp character when enlarged, while raster-based images (storing information about each and every pixel in the image), such as those saved in GIF (Graphics Interchange Format) or JPEG (Joint Photographic Experts Group) formats, will show jagged edges.  Visitors will be automatically prompted to download it on their first visit to the site, if they don't already have it installed on their machine. Scripting must also be enabled in Internet Explorer. We also presented a quick review of some of the tools available today for creating interactive vector graphics maps from desktop GIS projects.

Tools for producing interactive SVG and Flash maps from desktop GIS projects
Wizard-driven tools like GeoReveal have made it very easy to transform complex raw data into valuable decision support information products (interactive Web maps) in very little time and without requiring much expertise. The resultant interactive maps have the potential of further supporting health planners and decision makers in their planning and management tasks by allowing them to graphically interrogate data, instantly spot trends, and make quick and effective visual comparisons of geographically differentiated phenomena between different geographical areas and over time.
SVG makes an ideal format for such maps. SVG is a W3C non-proprietary, XML-based vector graphics format, and is an extremely powerful alternative to Macromedia ® Flash and bitmap graphics.

Methods
We used GeoReveal v1.1 for Windows to create the interactive SVG maps described in this paper. GeoReveal runs under Windows 98/NT/2000/XP and requires Microsoft ® .NET framework v1.1 to be installed on the production machine. We started by extracting London PCT boundaries from a larger data set of all England (2001 Census PCT -post April 2002 change), which is the copyright of the Crown/ Ordnance Survey http://www.ordsvy.gov.uk/, and is freely available in both ArcView and MapInfo formats to the UK academic community from EDINA UKBORDERS service with the support of the ESRC and JISC http://edina.ac.uk/ ukborders/. We also prepared a spreadsheet containing data about the number of STDs recorded in each London PCT between 1997 and 2003 using data from [2]. The two files were merged using MapInfo Professional v7.5 http:// www.mapinfo.com/, creating a MapInfo .TAB file. This file was exported to MID/MIF format, the format that files need to be in, in order to be used by GeoReveal.

Screenshots of two information boxes from our interactive Web map interface
We created our presentation (the interactive SVG Web maps) using the GeoReveal Wizard; an eight-step process that allows users to create a fully interactive SVG page.

Introduction: setting the output directory
The first Wizard dialog that must be completed is the 'Introduction' dialog, which is used to specify the directory to which the final GeoReveal output files will be saved ( Figure 3).  To select the output directory, we clicked the 'Browse' button and in the resulting file browse dialog, we selected the required directory and clicked 'OK'. To move to the next step, we clicked 'Next'.

Wizard step 1: choosing the template
The first Wizard step is the 'Choose Template' dialog (Figure 4). This dialog is used to specify general settings for a GeoReveal presentation.
We selected the template to be used. Ten templates are provided; four that include a bar chart, four that include a pie chart and two that have no chart. With our London PCT STD data, the most appropriate is a bar chart template.
We selected a logo image to be added to the top-left corner of our GeoReveal page. We clicked the 'Browse' button and selected the required file -in this instance, a University of Bath logo has been used.
We then specified the title of the GeoReveal page. This title is placed next to the logo at the top of the output page (see the logo and title at http://healthcybermap.org/PCT/ STDs/.
Finally, we selected the title colour and page background colour. To move to the next step, we clicked 'Next'.

Wizard step 2: selecting the main map data
The second step is the 'Select Main Map Data' dialog (Figure 5). This dialog is used to specify settings for the main GeoReveal map.
We selected the MID/MIF file that contains the statistics that will form the main map in our GeoReveal page by clicking the 'Browse' button and choosing the required file.
We selected the field from this MID/MIF file that will be used for ToolTips. A ToolTip (or MapTip) is the piece of text that is displayed when the mouse cursor is hovered over a region in the map. In this instance, the PCT Name field has been selected.
Users can also choose to turn the information box on or off. When it is turned on, a user can click a region in the map to display a dialog containing all information held within the MID/MIF file about that region ( Figure 2).
Finally, we selected the background colour and highlight colour for the map. The highlight colour is the colour a map region (an individual PCT area in our case) will be displayed in when the mouse cursor hovers over it. To move to the next step, we clicked 'Next'.

Wizard step 3: selecting the overview map data
The third step is the 'Select Overview Map Data' dialog ( Figure 6). This dialog is used to specify settings for the GeoReveal overview map. We selected the MID/MIF file to be used for the overview map by clicking the 'Browse' button and selecting the required file. It is possible to use the same MID/MIF file for both the main and overview maps.

Screenshot of the 'Choose Template' dialog
We selected the overview map colour and the overview rectangle colour (this rectangle shows a user where they are currently zoomed in on the main map). Additionally, users can select the background colour and border colour for the overview map panel. To move to the next step, we clicked 'Next'.

Wizard step 4: selecting options controls
The fourth step is the 'Select Options Controls' dialog ( Figure 7). This dialog is used to specify settings for the 'Options Panel' in the presentation.
First, we selected the background map image that is to be used. We ticked the top 'Checkbox Visible' box to activate the background map option and then clicked the top 'Browse' button to select the file that will be used. This file must be a JPEG or GIF image and information is needed about its width and height in real terms, and also the bounding coordinates.
Once the required file is selected, the 'Background Image Settings' dialog is displayed (Figure 8). In this dialog, we entered the bounding coordinates of our selected image, the height and width of the image in real terms, and specified how opaque the background map will be in the presentation. We then clicked 'OK' to confirm and return to the previous dialog (Figure 7).
In the 'Select Options Controls' dialog, it is also possible to: -enable a vector map option; and Screenshot of the 'Select Overview Map Data' dialog -select the text colour, border colour, background colour and control colour (the colour in which the fields are rendered) for the 'Options Panel'.
To move to the next step, we clicked 'Next'.

Wizard step 5: setting the bar chart
The fifth step is the 'Set Bar Chart' dialog ( Figure 9). This dialog is used to specify settings for the bar chart in the presentation. This dialog will differ depending on the template that was selected. In this dialog, one can: -specify the bar colour, grid colour (if the grid is enabled), text colour, background colour and border colour; -add or remove a % sign to the figures that are shown at the end of each bar. As the data being used in this presentation are absolute, the 'Show %' box should be unchecked; and -specify the opacity of the bars in the bar chart.
After specifying our settings for the bar chart, we clicked 'Next' to move to the next step.

Wizard step 6: setting the legend
The sixth step is the 'Set Legend' dialog ( Figure 10). This dialog is used to specify settings for the legend panel in the presentation. Users can: -specify a title and subtitle for the legend. Rather than specifying a main title, we checked the 'Use Dynamic Legend' box. When this box is checked, the title will be determined by the topic that the GeoReveal map is based on (a year from 1997 to 2003 in our case); -enable or disable the 'Highlight Range' option. If this option is enabled (as is the case in our presentation), when the mouse is hovered over a map region (PCT), the legend range that this region falls into will be highlighted; and -specify the text colour, background colour and border colour for the legend panel.
After specifying our settings for the legend, we clicked 'Next' to move to the next step.

Wizard step 7: setting the 'Information Panel'
The seventh step is the 'Set Information Panel' dialog ( Figure 11). This dialog is used to specify settings for the 'Information Panel' in the presentation. In the presentation, this panel displays information about the region in the map (PCT) that the mouse cursor is currently over. Users can: -enable or disable each of the information panels and select the fields from the MID/MIF file that will be used to populate each panel. A title can also be entered for each panel (in our instance, Panel 1 was enabled, has been given the title 'PCT Name' and will display the PCT Name field from the MID/MIF file); and -specify the text colour, background colour and border colour for the 'Information Panel'.
We then clicked 'Next' to move to the next step.
Screenshot of the 'Set Bar Chart' dialog

Wizard step 8: setting the 'Navigation Panel'
The eighth step is the 'Set Navigation Panel' dialog ( Figure  12). This dialog is used to specify settings for the 'Navigation Panel' in the presentation: the text colour, background colour, border colour and button colour.
We then clicked 'Next' to move to the final step.

Generating the presentation
Lastly, we saved the settings for our presentation and generated an initial presentation page ( Figure 13). The 'Wizard Final Step' dialog enables users to: -save the settings they have just made by clicking 'Save Settings', then in the resulting dialog, browsing to the required directory and clicking 'Save'. The saved settings file enables users to restore their settings and edit the presentation at a later date; and -generate the presentation by clicking 'Finish'. A message is displayed to confirm that the presentation has been successfully generated (Figure 13). Clicking 'Yes' on the message box will open the page in Internet Explorer.
When the presentation is created, the 'Advanced View' window is also opened. This can be used to add the finishing touches to the presentation. It contains all the options that the wizard does, along with a few advanced options.

'Advanced View': 'Legend' tab
The 'Legend' tab can be used to select the legend colour schemes that will be available ( Figure 14). In this tab, users can add and remove colour schemes using the 'Add' and 'Remove' buttons, and ensure that the legend to be first loaded is at the top. Legend schemes are provided with the GeoReveal installation, and additional ones can be created using this tab. Moreover, the number of decimal places used in the legend can be changed. For this presentation, it has been set to 0.

'Advanced View': 'Bar Chart' tab
The 'Bar Chart' tab can be used to edit the bar chart ( Figure  15). It is possible to add average value bars to the bar chart. When enabled, a second bar is added to each row of the chart which shows the mean value of all the data in that field, as opposed to the first set of bars showing values for the currently selected map region (PCT) alone. To enable this: -we ticked the 'Show Average Value Bars' box to add average value bars to the bar chart; and -set the average bar colour and specified the opacity of the bars.

'Advanced View': 'Navigation Toolbar' tab
Finally, we used the 'Navigation Toolbar' tab to edit the 'Navigation Panel' (Figure 16). In this tab, it is possible to add a button to the 'Navigation Panel', which when clicked, will open a simple HTML (HyperText Markup Language) page that contains information on how the