Networks / Pajek
Package for Large Network Analysis

Proposal (ESRI gis/Pajek Interface)
to combine SVG networks with Background gis pictures in a new interface that is interactive and provides a batch mode so as to make 100s of standardized time series images, e.g., for dynamic gifs

In this hint we explain how to combine a series of Pajek's network picture in SVG with bitmap background pictures of GIS images (made with ESRI software for example).

Suppose that we would like to overlay the following bitmap picture, stored in the file Capitals.jpg


with a SVG picture, stored in the file 299BG.svg (only upper right corner seen; use Alt + mouse movement to move the picture)

First we determine the size of the bitmap picture - by importing it into some viewer (IrfanView). The size of Capitals.jpg is 957 x 749.

We also determine the size of the SVG picture - by opening it in a text editor and looking at the parameters in the tag <svg>. The size of 299BG.svg is 1608 x 1170. If the SVG picture was not exported from Pajek with the transparent background setting in the Draw/Export/Options we have to comment out (or simply delete) the background rectangle (7th line)

<!-- rect width="1608" height="1170" style="fill:rgb(255,...,127);" / -->

We save this SVG picture to 299w.svg. Then we combine both pictures using the following 'template'

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" ""> <svg xml:space="preserve" viewBox="0 0 478 374" preserveAspectRatio="xMidYMid meet"> <g id="bitmap" style="display:online"> <image x="0" y="0" width="478" height="374" xlink:href="./Capitals.jpg"/> </g> <g id="PajekSVG" style="display:online"> <g transform="translate(100 50)"> <g transform="scale(0.5,0.5)"> <image x="0" y="0" width="1608" height="1170" xlink:href="./299w.svg"/> </g> </g> </g> </svg>

We set the size of the viewBox and the bitmap image to the half of its original size, thus providing detailed background picture also after (the first) zooming. Using the transformations scale and translate we can control the size and position of SVG picture on the background picture.

We save the combined picture as 299withBGw.svg. To include it into a HTML page we use the 'template'

<EMBED WIDTH="478" HEIGHT="374" SRC="./299withBGw.svg" NAME="networkBG" type="image/svg-xml" PLUGINSPAGE="">

And here is the result

  • these two images were adjusted so that the cities in the GIS align -- nearly -- with those in the Network. Most of the misalignment is due to the projection used in making the map.
  • colors of the lines were changed in Pajek to ones more visible (white) more visible against the GIS background
  • in general, all the image adjustment once the match is made and viewed is done in respective packages (e.g., ArcView/Pajek)
      • the proposed software interface for image adjustment is just to align the geographic matching of images
      • but if there are 140 GIS images (e.g., 14 time periods by 10 industries - such as green highlights for Capitals shown here - these images are made easily on a PC using ArcMap with a spreadsheet for city attributes, for example)
      • and three networks to be overlaid on these images
      • and each set of images are of a constant dimension
      • the batch mode would make 140 x 3 images perfectly aligned based on a single interactive fitting of the first pair of images
      • The network images will typically have nodes (here, cities) with lat/long coordinates, transformed to [0,0 - 1,1]
      • The GIS map however, may have been made in a projection rather than straight lat/long coordinates
      • So for the GIS side we want to have the capabilities of stretching and coordinate transformation
      • And the capability of marking nodes in either image that are out of alignment once the overall alignment is made
      • These markings will be saved and printed in order to check the accuracy of the original coordinates (Pajek/GIS spreadsheet) that made the respective images. The analyst goes back to these original databases to edit if errors are found or adjustments are needed
      • The optimal practice is to make first just a few images in each modality (Pajek/GIS), do the adjustments
      • The adjustment parameters are saved to a file
      • Then all the GIS images are made (with corrected data)
      • and all the Network images are made (with corrected data)
      • Batch mode consists of one window for entering the file names from GIS (all same size)
      • Another window for entering the file names from Pajek (SVG exports)
      • A third window for titles composed of two parts (a) GIS label (b) Network label
      • And finally, loading the parameters for merging adjustments and transformations
      • THen just click and the cross-product merges are made
      • Accomplished very simply by assigning subdirectories or filenames such that certain series of output files can be located in an input file menus in a series
      • Then a dynamic gif menu such as Animation Shop from JASC software can click the series (each image having a text label inserted beforehand) and set the transition timing, so we have a moving image of network and GIS background evolution.

      How to?; Pajek; Vlado/Networks