Workshops

Workshops will be held on Thursday, October 20, after the main conference.

There are six workshops, each is 150 minutes in length (2.5h), with two parallel tracks. Participants are encouraged to bring along their own laptops for hands on exercises. The workshop fee is $75.- per person. This includes participation in up to three 150 minute workshops, lunch and coffee breaks. Please note that the workshop list may still change slightly.

List of Workshops:


Creating Interactive SVG Visualizations and Maps

Jon Frost (SVGElves.com, Software Engineer) and Michael Bostock (Square, Inc.)

One of SVGs sweet spots is the visualization of interactive graphs and maps, however, at present there are only a few open source libraries that facilitate the creation of SVG-powered graphs and maps.

D3.js

D3[1] provides extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG so that users do not have to learn a new intermediate proprietary representation. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3 was designed with a functional programming ECMAScript API that requires rudimentary programming skills to add basic interactivity, while more seasoned programmers are able to add customized logic to the visualizations.

PolyMaps

The PolyMaps[2] library is geared toward the creation of SVG-enhanced maps which can be interactively visualized from a world-view scale all the way down to cities and street level views. Map tile data can be pulled from a local image data source or just as easily from many different image-based web map providers: Bing, Google, OpenStreetMap, or CloudMade.

Summary

In this hands-on course we will explore at least these two free open source libraries in some depth. And best of all, with SVG now well-supported in most browsers, plugins are not necessary for either of these libraries. In addition, a few other excellent open source libraries are emerging such as Pergola [3] and SVG Replicate [4] which we will explore as time permits through a series of practical exercises and demos such as integration with HTML5, GeoLocation, and CSS3 features. Please join this fun and practical mini-course.

References

[1] Project from Mike Bostock (online: http://d3js.org) [Last accessed: July 2011]

[2] Project from SimpleGeo, Mike Bostock and Stamen (online: http://polymaps.org/docs/) [Last accessed: July 2011]

[3] A Project from Dotuscomus (online: http://dotuscomus.com/pergola/ [Last accessed: July 2011]

[4] "SVG , a proposal for extending SVG" (online: http://code.google.com/p/svg-replicate/ [Last accessed: July 2011]


Declarative Animation in SVG

Dr. David Dailey (Slippery Rock University, Professor)

SVG animation (or SVG-SMIL) provides one of the most expressive aspects of SVG. It has several major benefits:

•It simplifies the process of writing code for animation (requiring less code and less complexity)

•The code is more portable to different hardware platforms (like mobile)

•It can facilitate learning about certain complex features in SVG.

•It gives us insights into models of declarative programming that are likely to be sprouting in many contexts in coming years.

This workshop will present basic mechanisms of using the various aspects of SMIL animation in SVG: the , , and other basic SMIL tags. Herewith a tentative outline:

1.Overview of SMIL

2.Comparison with JavaScript animation

3.Basic SMIL animation

4.Multiple animations and timing ◦keyTimes

◦keySplines

5.Varieties of animation

6.animation of multi-valued attributes

7.Following paths

8.Animation of transformations

9.Animation of non-numeric attributes

10.Starting an animation, with time or events, and using to set the value of an attribute

11.Stopping an animation

12.Interaction between SMIL and JavaScript


JavaScript and SVG

Dan Bogaard (Rochester Institute of Technology, Associate Professor)

JavaScript is the ubiquitous programming language for the web. This workshop will give the participants the ability to create, control and alter SVG with JavaScript using methods that will work in all current web browsers. We will begin writing all of the code by hand and move to adjusting jQuery to work for our needs.

Suggestions:

  • Having some programming background would help you get more out of the workshop, but no previous JavaScript experience is necessary.

  • A computer with a text editor and a current browser.

Outline:

  • SVG and (X)HTML in XML vs. HTML5
  • Namespaces
  • JavaScript

    • Events
    • Finding elements
    • Controling/Changing elements

      • getAttributeNS()/setAttributeNS()

    • Creating elements

      • createElementNS()

  • JQuery

    • Events
    • Finding elements
    • Issues

      • Plugin help


Mapping time in SVG

Barend Köbben (University of Twente – Faculty of Geo–Information Science and Earth Observation (ITC))

In this workshop we will explore the use of SVG for mapping time. SVG is especially useful for this, because the SVG specification includes the use of the Synchronized Multimedia Integration Language (SMIL - a declarative XML–based language well suited for building data driven animations), as well as JavaScript, which offers interactivity.

We are interested in animation, because interactive animated mapping is the only technique generically applicable to visually analyze the dynamic nature of real world phenomena.

We want to facilitate the production of animated maps from spatio–temporal data to a format suitable for internet dissemination, automatically and directly. To achieve that, we look specifically into the possibilities of the loose coupling of distributed webservices with animated, interactive vector maps. This we achieved with our TimeMapper Web Map Service.

TimeMapper was developed as prototype for an OGC–compliant Web Map Service implementation that serializes spatio–temporal data from a database backend as Scalable Vector Graphics. The SVG is used in a web browser to show animated maps with a built–in advanced user–interface. This interface allows the user to interact with both the spatial and the temporal dimensions of the data.

In this workshop we will introduce the SVG SMIL animation principles. We will explain the principle of Web Map Services, and then present the setup and deployment of the TimeMapper WMS. We will concentrate on practical and useful application of the software to achieve results without having to program SVG ‘by hand’. The emphasis will be on the deployment of the system on a web server and the setup of the data and parameters.


OpenLayers SVG workshop

Harris Hudson and Andreas Neumann (City of Uster)

Course:

OpenLayers is an open source GIS client that supports building slippy maps from many different data sources. The first part of this workshop will step through how to get started with OpenLayers and covers main topics such as constructing a basic map, understanding map properties, adding overlays, using different map projections with third party layers and adding vector layers.

The latter part of the workshop will focus on options available for adding SVG layers to maps.

Target Audience:

Beginner (basic javascript knowledge helpful)

Outline:

- Apache install and OpenLayers config

- A basic map

- A look at map properties and functions

- WMS layers and overlays

- Web mercator layers

- Using controls

- Adding vector layers

- A WFS example

- A WMS GetfeatureInfo example

- Adding SVG layers


SVGo: Programming Pictures

Anthony Starks

Using SVGo, a Go programming language library for the generation of SVG, students will explore the programmed generation of graphics within a web browser. The tool, modeled after Processing, allows immediate feedback and facilitates learning and experimentation.

The course is geared toward programmers and designers who want to explore SVG and generative art.

Through a series of examples, the course will introduce the students to SVG elements and concepts through writing simple programs for manipulating, styling and displaying SVG.

Students are encouraged to bring in samples of illustrations, artworks and graphics for inspiration.

Outline:

-- What is means to "Program Pictures"

-- Introduction to SVGo

-- Introduction to the Go programming language

-- Using SVGo and goplay in a Web browser

-- "Hello, SVG" your first Picture

-- SVG Elements

-- Styling

-- Colors and Gradients

-- Applying Programming to Objects and Styles

-- Grouping

-- Transformations

-- Open time creating artworks and illustrations using submitted pictures