Historical Unit Browser



Historical Unit Browser Overview

Bill Ferster

The Historical Unit Browser (HUB) allows users to interactively browse historical events in a number of ways. It is a generative browser, allowing users to not only view preset collections of events, but to construct their own views of the events based on selected criteria. HUB makes it easy to construct complex queries about historical events, weaving maps, timelines, and data visualizations to encourage insight.

HUB is a tabbed-based collection of views of historical events and data that can be interactively shown within a time period using the timeline tool. Views can contain event descriptions, primary source documents and imagery, maps, digital movies and audio, animations, charts and graphs of historical data.

Each view represents the result of choices of what to show in that view. The views can show events that match certain criteria, ranging from “show all events in Antioch, Virginia” to a sophisticated query such as “show all events where Jefferson bought more than 3 trees from 1796 to 1820, but not ones from Thomas Mayne.”

These views can be fixed for demonstration purposes, or left open, for people to explore various relations between the elements provided allowing for both purposeful and serendipitous discovery of complex interrelations.

[pic]

Resources Supported

There are three basic kinds of information (resources) HUB can display and search for:

1. Historical events which contain information about a particular event such as the date, title, brief descriptive narrative, NCSS standards, links to primary source documents and imagery, location information (latitude and longitude) and key words that help aid finding events. The source of the card’s data comes from any database. A translation layer (lens) provides a mechanism to convert data in its native format into the internal format.

2. HUB contains a fully interactive geographic information viewer to display three basic kinds of maps. 1) Scans of historical maps, 2) vector-based maps from GIS systems such as arcGIS, and 3) maps delivered from Internet-based web services, such as Google Maps. All maps can be easily panned and zoomed, with an option to see an overview inset. Shape data can come from specified tables in a SQL/mySQL database, a link to an XML file, or from Internet-based web service.

3. A rich array of historical data can be imported into HUB from a database as a table. This data can be displayed as a layer on a map, shown as a chart, table, or graphic element, and most importantly, used to include or omit events in the views. Data can come from specified tables in a SQL/mySQL database, a link to an XML file, or from Internet-based web service.

View Constructor

An unlimited number of views can be constructed from these three basic resource elements. Views can be interactive, enabling users to change how the various resources interact, or static, allowing for a didactic interpretation of the events.

The infrastructure for a view contains a procedural description of how the information is displayed with conditional comparisons and loops so that very sophisticated queries can be performed. These queries are easily constructed using pull down menus for the various options desired indicating the relationships between the various resources.

ControlPanels

Each View has its own pull-out area docked to a side of the screen that can be expanded or collapsed as needed and contains a number of collapsible check boxes to toggle on and off various features of the map, such as data overlays, roads, rainfall, town names, etc. Various map features, such as the overview navigation insert and map legend can be turned on and off here as well.

Designers can elect to allow users to add their own views, and even change (during their session only) factors in existing views. The presence or absence of the items in this drawer is easily controlled by setting options in the view constructor described above.

Annotations and Graphs

Areas on the map can be identified by to highlight particular sections, provide clickable links to pull up a web page, draw graphical elements, or popup window showing some information:

1. A particular section of the map can be highlighted by overlaying a rectangle, ellipse, or circle surrounding a particular latitude and longitude. This shape can darken, lighten, tint, or texture the underlying area, and can be dynamically positioned and sized based on data query relationships.

2. Graphical elements such as lines, boxes, arrows, etc. can be drawn using a latitude and longitude positions and can be dynamically positioned and sized based on data query relationships.

3. Links can be assigned to cause a webpage to open in a new browser window when the area within a particular latitude, longitude, and radius is clicked.

4. A popup window can open when the area within a particular latitude, longitude, and radius is clicked. This popup can contain text, graphics, table data, charts and graphs, movies, audio, or images. The contents of the popup are dynamically defined by the data query relationships.

HUB Schema

The Historical Event Browser (HUB) is an empty vessel for interacting with historical information. Its entire functionality and “look and feel” is controlled by an XML data structure. This flexibility will allow it to be effectively used in a wide variety of projects, while still maintaining a common internal structure. The HUB’s XML data structure is centered on a number of key objects:

Project / Browser

The topmost level on the hierarchy is the project. The project contains any number of browsers and timelines. This will allow for multiple interactive representations to be shown simultaneously, making for easy comparisons, with a shared timeline for control.

View

Each browser may contain any number of views. These views are represented as tabbed areas on the screen. Clicking on any of the tabs will bring up a different view. Each view contains descriptors of the resource to display, or use as data to change the display. There is one timeline for each view, which makes it easy to set the temporal aspect of that view.

• Resource

The resource could be a map, some media, a table of data, or a graphic. Each resource item contains a query instruction as how to find the data for that resource. For example, a map may be a URL to a bitmap, a SQL query for a collection of shape files in a database, or a URL to an online web service, such as Google maps. A data table from a SQL database, from an XML file or a web service can be similarly used.

• Glue

Glue (The General Language to Unite Events) is a procedural description of how the various resource elements connect with one another and are displayed. HUB knows how to render a number of types of resource, such as tables, charts, text area, movies, audio clips, vector and raster maps, and the Glue language contains elements to cause them to display. The Project and ControlPanel rely on Glue to know how to display the views and sub-views.

Glue also contains elements for linking user-generated actions, such as clicking on the screen with actions. Glue also provides an opportunity to calculate tables and fields in resources based on a simple script in the tag. Many common types of operation can be defined between these elements, so that HUB is able to relate rich data relationships between them and visualize them on a special and temporal basis.

• ControlPanel

Each view contains an control panel that can be populated with a number of interface items, such as checkboxes, radio buttons sliders and header elements. This panel can be docked anywhere in the view or be free-floating. It can be always present, or opened and closed like a drawer.

HUB XML SCHEMA

// Topmost level

// logo

textformat // default text attributes

browser … * // browser object(s)

timeline // to control > 1 browser

// Browser object

textformat // default text attributes

frame // frame of browser

// size of tabs

view_1-n … // tabbed view(s)

// Tabbed views of data

textformat // default text attributes

resource … // resources(s) for this view

controlPanel … // control panel(s) for view

timeline // timeline for this view

glue … // connection mapping

graph … // graph display

// max zoom (% /100)

// width and box color

src="inset.jpg" /> // inset map image

* Italics indicate link to another XML object

… indicates there may be multiples of these objects

underlined option in [ multiple | choices ] indicates default

glue ** // glue object to run if clicked min=value max=”value” // slider only- min/max values

maxChars=”number” // textbox only

// Timeline controller

min=”years | days” max=”years | days” // dates (leading 0 for days¹)

start=” years | days” end=” years | days” // current slider dates

dateFormat=”[ yr | mo/yr | dy/mo/yr | mo/dy/yr | daily ]” // default date format

col=”0xrgb” wid=”pixels:0” // color and line width

majorTick=”pixels:0” // major tick make length

minorTick=”pixels:0” // minor tick make length

showValues=”[ true | false ]” // show values

valueCol=”0xrgb” // color of values

player=”[ true | false ]” // show play button

speed=”[ true | false ]” // show play speed controller

textformat // specific text attributes

frame // box of timeline

// style of timeline slider

style=”[ single | dual ]“ // one date or start/end date

canMove=”[ true | false ]” // fixed or movable

*legends can specify bitmap icons in the def attribute

**built-in glue objects ”legend” & “inset” toggle on/off if in a “checkbox”

¹Specifying date at 0664669 will represent January 4, 1821 in days

Define a resource to get the arcGIS converted vector map from an XML file:

Define some glue to connect the map to the screen, and change the map’s internal color table based on population data from the data resource:

There are three lines used in this script. The first two are list creators, with the first creating a list of number that will determine which population numbers should be grouped together called slots. The second list, called colors, contains the colors the categories will use when drawn. The final line contains a method called segment, which take 4 parameters; the data source, the criteria by which the data will be clustered, the destination where to write the results, and the

Actual.

SCRIPTABLE METHODS

LIST

This method will create an array of elements (numbers, colors, or strings) under a named id for use in other methods.

list(id,element1, element2, … elementN)

id:String Name of list

element:[ number | color | string ] … List element(s)

The example below will create a list of four numbers and makes that list available to other methods under the ID name called slots.

list(slots,0,25,50,75)

SEGMENT

This method will sort data into a number of preset categories and use those as criteria to create a new list.

segment(sourceID, destID, filters, values)

sourceID:String ID of source data resource

destID:String ID of destination data resource

filters:String ID of list of numbers to segment data

values:String ID of list of values to assign segmented data

As an example, suppose we wanted to color a map so that populations of different area are drawn in different colors. Areas with no people should be colored white, populations from 0-25 colored light red, 25-50 medium red, 50-75 red, and population greater than 75 colored bright red:

list(slots,0,25,50,75)

list(colors,0xffffff,0x330000,0x990000,0xff0000)

segment(myData.pop, myMap.col, slots, colors)

MOVE

This method will move a resource over time. If the timing is set to null, the resource will always be positioned at the starting positions specified.

move(resourceID, startX, startY, endX, endY, timing, eases)

resourceID:String ID of resource

startX:Number starting horizontal position

startY:Number starting vertical position

endX:Number ending horizontal position

endY:Number ending vertical position

timing:String ID of timing source (i.e. timeline, var, null)

eases:Number motion slows (0=none1=start 2=end 3=both)

TWEEN

This method will set a resource field to some position over time. If the timing is set to null, the resource will always be positioned at the starting positions specified.

tween(fieldID, start, end, timing, eases)

fieldID:String ID of field, with ’.’ modifiers

start:Number starting value

end:Number ending value

timing:String ID of timing source (i.e. timeline, var, null)

eases:Number motion slows (0=none1=start 2=end 3=both)

SCRIPTABLE RESOURCE FIELDS

Images

Standard MovieClip properties // Flash MovieClip properties

Movies/Audio

Standard MovieClip properties // Flash MovieClip properties

start stop volume // play times and volume

Vector Maps

Standard MovieClip properties // Flash MovieClip properties

col[]* // feature interior color table

alpha[] // feature alpha table

col[] // feature interior color table

label[] // feature label name table

Graphs

Standard MovieClip properties // Flash MovieClip properties

highStart // start of highlight in (0-1)

highWid // width of highlight in pixels

data#[] … // data set table (# = 1-8)

Data

data#[] … // data set table (# = 1-8)

Shape

Standard MovieClip properties // Flash MovieClip properties

x[] // x coordinate table

y[] // y coordinate table

timeline

min max now // range and current time

screen // Flash MovieClip properties

zoom // zoom control (0-100)

Standard MovieClip Properties

_x / _y:Pixels // horizontal / vertical position

_width / _height // width / height

_alpha:Opacity // 0-100

_rotation:Degrees // 0-360

* [] indicates a list (array) of items

… indicates there may be multiples of these object

DATA GRAPHING

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download