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

Capitals

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' that is copied, pasted and saved with an *.SVG extension and should be viewed with Internet Explorer. This file achieves the fusion of the *.jpg (or other graphic) background with an SVG image forground, assuming that the SVG has been made transparent. NOTE THAT YOU WILL OPEN THE SVG in internet explorer on your disk drive not on the web. For the web it must be embedded in an html like this one.

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <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="./299withBGy.svg" NAME="networkBG" type="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/">

And here is the result (right click image to zoom further into a region)

  • These two images were combined without translating the network to the Mercator projection. We had to transform the Lat/Long in our worksheet into Mercator x,y coordinates and rescale into [0,1] values for Pajek. When adjusted so that the cities in the GIS aligned -- nearly -- with those in the Network. most of the misalignment is due to the fact that the city locations on the map were made with slightly different coordinates than those for the cities in the network. The best way to resolve these discrepancies was to have the background be PURELY geographic with no cities and city coding, and to put all the attribute data into the pajek node size and coloring. Then Export from Pajek would make all the networks at once with different partitions or, if wanted, changing the network if it is thru time, etc. This would give a series of SVGs. All I then have to do is read a single template and have an automated procedure to change only the name of the SVG image contained therein as well as the name of the copy and presto! All my work is done with no messyness.
  • colors of the lines were changed in Pajek to ones more visible (white for banking and maritime links; black for land links) against the GIS background
  • NOTE YOU CAN NOW RIGHT CLICK TO ZOOM IN ON THE MAP. The SVG viewer, however, does not rescale node size. When we make dynamic svg, however, there can also be nodes that move continuously over space, and that carry their links with them. This framework, then, will be good for the results of simulations or longitudinal studies that superimpose movement behavior on the background map. The Pajek team is working on a visualization component that will manage the construction of dynamic SVG presentations.
  • in general, all the image adjustment once the match is made and viewed is done in respective packages (e.g., ArcMap/Pajek)
      <EMBED WIDTH="478" HEIGHT="374" SRC="./299withBGx.svg" NAME="networkBG" type="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/">

      And here is the second result on a cleaner basemap

    • PROPOSAL:
      • 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
    • FOCUS ON ALIGNMENT
      • 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
    • GOOD PRACTICE
      • 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
    • FOCUS ON BATCH
      • 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
    • FOCUS ON TIME OR COMPARATIVE SERIES
      • 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