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)