Readme.txt - Description of a course in urban geography: "Social Patterns in Vienna"
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
Author:
Andreas Neumann
Date of first prototype:
Februar/März 2000, course in urban geography (summer 1998)
Data:
Arc-Austria from Gerhard Hatz, originally in Arc/Info-format, originally converted from ungenerate-files with self-written perl-scripts.
Goal:
Course in Urban Geography: Interactive cartographic visualization of socio-economic data from Vienna within the WWW - if possible in vector format.
Approach:
SVG (Scalable Vector Graphics), html with Cascading Style Sheets, javascripts
Files:
* index.html: general Layout in HTML and with style-sheets
* scripts.js: javascripts
* styles.css: style-sheet-definitions
* vienna.svg.gz: geometry data of Vienna's districts and sub-districts
* legend.svg.gz: maps legend
* svgvalues.svg.gz: for displaying polygon data
* overviewmap.svg.gz: for linked overview-map
* readme.txt: this readme
-------
-------
History
-------
-------
Version:
1.0 (10.3.2000)
Remarks:
current version only functional with Internet-Explorer 5 with the SVG-Plugin from Adobe (see http://www.adobe.com/svg/)
-------------------------
Version:
1.1 (12.3.2000)
Changes:
* port to Netscape
* Dynamic CSS reduced (for variable display) and replaced by a third SVG-File cause Netscape crashes on changing CSS dynamically
Remarks:
Tested on Netscape 4.7 (Windows NT), Internet Explorer 5.0 (Windows NT) and Netscape 4.7 (Mac OS9). Netscape in colouring map is a lot slower than Internet-Explorer. Netscape 4.7 on Mac mouse-over is not functioning.
-------------------------
Version:
1.2 (21.6.2000)
Changes:
* introduced dynamic table for displaying statistic data (in separate window), fired on "onClick"-Event
Remarks:
Netscape 4.73 crashes on using the "onClick"-Event
-------------------------
Version:
1.21 (9.7.2000)
Changes:
* fixed above Netscape bug by disabling the above feature - it's a pity
Remarks:
Hopefully I can find a workaround without having to cut the Netscape version
-------------------------
Version:
1.22 (27.9.2000)
Changes:
* fixed above Netscape bug by setting a short time out - thank you Andre (andre.mw@gmx.net)
Remarks:
Netscape crashed because we opened a new document in a window that didn't exist. Now after a short time-out everything works fine.
function showDetailData() now split: showDetailData() and writeDetailData() - because of setTimeOutFunction
-------------------------
Version:
1.30 (08.10.2000)
Changes:
* introduced linked overview-map for enhanced zooming and panning - thank you Gaëtan GABORIT (gaetan.gaborit@wanadoo.fr)
Remarks:
New functions see below (section Javascript-functions), fired with mousedown, mousemove, mousemove and mouseout events.
-------------------------
Version:
1.31 (18.06.2001)
Changes:
* some layout changes (fonts appeared to need more space in x-direction with adobe svg 2.0 plugin)
* changed to highlight-colour green (instead of changin transparency)
-------------------------
Version:
1.32 (18.06.2001)
Had problems with Adobe SVG viewer v3, crashed with beta 1 and beta 2; with beta 3 it worked but crashed when using CSS attribute "font-weight:bolder;"
Did not check Netscape so far.
Iex 5.5 on Win2k still has problems when reloading the example ... Need to test more, or send bug-report to Adobe.
Thank you Tobias for the hint on
Changes:
* in "svgvalues.svg" and "legend.txt" we changed CSS-attribute font-weight from "bolder" and "lighter" to "bold" and "light"
* some cleaning up of unused CSS-entities ...
-----------------------
-----------------------
Features of the system:
-----------------------
-----------------------
* Display within the WWW in vector format
* Zoom-in and panning with the plugin
* Choice of variable
* number of classes is flexible
* Hide and show layers
* map legend is adjusted automatically
* displays statistical-data in table in separate window
* linked overview map for enhanced zooming and panning
----------------
----------------
Data Preparation
----------------
----------------
The data, originally in arcview-shape files and arcinfo coverages, had been exported with ungenerate export (geometry data). The attribute-data had been exported from the info-database. The common variable of both files is the polygon- or arc-id. Self written perl-scripts convert those files to svg.
------------------
------------------
SVG-File-Structure
------------------
------------------
SVG is an xml-based 2D vector format, that has a lot of possibilities in fields of visualization, interaction and animation. It is an open W3C standard that is documented at http://www.w3.org/TR/SVG/. Adobe developed a plugin-viewer that works in both netscape and internet-explorer. Furthermore there is a tutorial at Adobes website at http://beta1.adobe.com/svgpreview_alpha/SVG/demonstrations/main.html.
the following elements had been used in the vienna-project:
Header with Stylesheet-definitions:
--------- snip -------------------
]>
--------- snap --------------------
1. row is header.
2. row dtd referenced
individual style-sheet definitions for the different groups: f.e. fill and stroke.
Color-values are referenced with hexadecimal values, like in html. There is a comfortable color picker at http://www.webmaster.bham.ac.uk/colorpicker/ that can be used for choosing hexadecimal rgb-values.
Comments:
--------- snip -------------------
--------- snap --------------------
like in html ...
Groups:
--------- snip -------------------
... some elements ...
--------- snap --------------------
quite similar to the layer concept in graphics software. Each element can hold an id-value, that can be used to attach attribute-data to the object and manipulate with javascripts.
Polygonelements:
--------- snip -------------------
--------- snap --------------------
Polygon as path: mouseevents can be used, the path starts with "M", is continued with "L" and ends with an "z".
The following 4 Layers exist:
* District borders: id "bezgrenze"
* Sub-District borders: id "bebaut" (those are coloured)
* Gruenderzeit-borders: id "grundzeitgrenze"
* unpopulated areas: id "unbebaut"
------------------
------------------
HTML-Filestructure
------------------
------------------
Within the header one can find the pixelvalues for positioning with CSS. Furthermore there are references to the external CSS and javascript-files.
Certain form-elements allow interaction with SVG Elements via javascript.
On loading the html-file the javascript-function "colorIt()" is called, that colors the map according to the selected variable and number of classes.
--------------------
--------------------
Javascript-functions
--------------------
--------------------
first all variable-values within arrays and the global variable definitions
function compareNumbers(a, b): sort-function of an array (numerical)
function colorit(): color the map according to selected variable and nr of classes
function toggleSVGElements(id,checkVal): hide and show the layers
function showDistrict(zbzid,showFlag): show polygon-data on mouse-over
function emptyDistrict(): hide polygon-data on mouse-out
function showDetailData(id): open window for showing detailed data in tabellaric form
function writeDetailData(id): write detail data in tabellaric form
function zoomIt(): resizes draggable rectangle and sets new viewport in main map
function beginPan(evt): starts panning, initializes variables
function doPan(evt): drags rectangle and restricts to outer boundaries of map
function endPan(): ends panning and sets new viewport in main map
-----------------------------
-----------------------------
Further possible improvements
-----------------------------
-----------------------------
* More classifying-methods: equal steps and manual
* color choice of all elements via the map legend
* Search function for polygon-names (similar to http://svgmap.free.fr/)
* Dynamic Generation of Diagrams (similar to http://www.carto.net/papers/svg/eu/)
* indicate statistical values such as range, variation, median, average, etc
* histogram of variables
--------------------------------
--------------------------------
how to add additional attributes
--------------------------------
--------------------------------
* in the file "index.html" you must add to the selection-field "myVar" your new record in exactly the same order than within the attribute-data.
* variable-data must be included within the first part of the file "scripts.js" at the end of the existing data (can be done via perl-scripts, spreadsheet or manually)
* add the variables in function showDetailData (within the table)