https://visit.impure.com/space/#/lichtwerk360/assignment/08

Julian Hildebrand, Harshad Sutar, Vittal Sridharan

The idea of this visualization is to take information on contemporary architecture from a book  and diaplay it using the versatile mapping tools of impure; in particular we intend to give an overview on contemporary architecture in barcelona and th etim eframe in which these building have been built to give an idea of the of construction activities and building type in time;

all information displayed in the graphics has been extracted from the following book title: barcelona architectura contemporanea  1979-2010 from edicions poligrafa;

cover image of book on contemporary architecture

…this draft has been composed in photoshop and is to be considered as a guideline while we are developing the current “impure” workspace further;

https://visit.impure.com/space/#/lichtwerk360/assignment/03

link to current “impure” workspace with visible data structure; the raw functions outlined in the draft are already active; color coding of building types and selection of images to be displayed are still to be refined.

current workspace with deactivated data structure; only visualizers are vsible to give an idea of the present appearance of the visualization.

in this area of the workspace we load the .csv file with a “CSVLoader” containing the data of the book; it contains the name of the building, year of compleation, duration of building process, area it is in and adress;

the content is visualized by connecting the loader to  a “Table Visualizer”;

by using the “GetElementFromList” component with the respective index we create several lists to process the information on year of completion and duration of the building process;

all time dependent information must first be concerted from a string to a date using the “StringListToDateList” respectively the “StringListToNumberList” component; by using the “GetMinMaxIntervall” we get the total time range which in combination with “AssembleDateAxis” provides the imput for the “InverseProjectionOnDateAxis” component; connected to an“IntervallSelector2″ its output can be used to control the “RulerVisualizator” and the DateIntervall node of the “ObjectsOnTime” visualizator;

With “GetElementFromList” we also get the list of adresses from the .csv file which afterwards are loaded into “GeocoderMultiGoogleMaps” component which output the corresponding geographic coordinate; in order to be able to display and use thes coordinates in the “Polygon2D SimpleVisualizator2″ they need to be converted into the adaquate projection using the “UniversalProjectionOnTransformationGeo” in combination with the “CreatesTransformationGeo” with a mercador projection.

A single “GeocoderGoogleMapsLoader” with a “barcelona” string is used to provide a point for the “GoogleMapsVisor” in which a map of Barcelona is displayed at a fixed zoom factor of  “13″; the output node of the Visor can then be used to synchronize the “Polygon2DSimpleVisualizer” with the Visor” using the previously mentioned transformation methods.

finally we intend to allow the user to click on a building dot in the time line or the google map respectively to get image information on the selected building; this is achieved with the “FlickrImagesSearch” linked to the output of the “ObjectsOnTime” visualizator; a “GetImageFromList” feeds into a “MultiImageLoader” which finally loads its content into a “ImageTransition” and shows the the respective images found on Flickr.

after we added the color scheme several existing components had to be reorganized.

First of all we defined a set often different colors to indicate one of each of the ten building catagories.

To do this we define all ten catagories devided by commas in a “string” ; after that th edata into a “splitString” and choose the “,” as the seperator to use in order to split up the string. The resulting data is connected to the second slot of  a “listAssembler5″, the first slot is fed like this: We create ten different “point3D” components and for each one we define a color as a RGB value, these colors are summarized in a “listAssembler10″ and finally translated from points to colors by using a “polygon3DToColorList”, the output of this is then finally connected to the fisrt slot as mentioned above; the “SimpleColorVisualizator” then shows the created color information together with the respective strings and can now be used as a legend for the visualization.

After that we needed to generate the new data structure allowing us to order all information according to the ten building catagories; this is achieved by getting the complete list with catagories from the “csv.loader” using “getElementFromList” and then searching the list for the indexes of each building catagory with an “indexesOfElement” component. After getting the number total number of elements inthe list with “lengthOfAList” each index position of one catagory is formated with the same color indormation from the previously created “Point3D” elements using “listWithSameElement”.

All of the ten lists with information of which color goes with which index are combined in a “listConcat10″ and after that are ready to use in input slots of the “ObjectsOnTime” and the “Polygon2DSimpleVisualizator2″.

After that we prepare the new set of indexes to organize the remaining data; we combine the output of all “indexesOfElement” components in a “listConcat10″; this is now our complete list of indexes which we can use to organize all other data.

By a combination of “getElementFromList”, “sortListByIndexes” and IndexOfElement” we sort the names of all buildings to match the order of the color code; the same procedure is applied to the dates in combination with a “stringToDateList” and to the numbers indicating the time for completion with a “stringListToNumerList”; even all adresses have been sorted with this method.

after the formatting work we could now feed the information into the visualizators again; we added some transparency to the point in the “Polygon2DSimpleVisualizator” by taking the total number of items with a ” lengthOfAList” and mapping a value for 0,7 for the alpha channel to all positions using “listWithSameElements”.

Instead of “ImageTransition” we combined a “Quandrification” and a “BitmapDataSimpleVisualizer” to view a preselection of images in smaller size and finally selecting a bigger image from a preview.

To complete the layout of the whole visualization we added a “TextVisualizator” with a “String” as a headder and highlighted part of the headder by combining a “string” and a “splitString”. The text color is set by a combination of “Point3D” definitions in black and a “listAssembler5″.