Conference Schedule

You can download a printed version of the schedule (PDF) or use the listing below.

Listing of all Presentations and Courses

Quick jump to: keynotes | regular presentations | workshops

Keynotes

• Ambient maps, how personalisation is redrawing cartography

  Ed Parsons (Google, Geospatial Technologist)

  Ed Parsons is the Geospatial Technologist of Google, with responsibility for evangelising Google’s mission to organise the world’s information using geography. In this role he maintains links with Universities, Research and Standards Organisations which are involved in the development of Geospatial Technology. Ed is based in Google’s London office, and anywhere else he can plug in his laptop. Ed was the first Chief Technology Officer in the 200-year-old history of Ordnance Survey, and was instrumental in moving the focus of the organisation from mapping to Geographical Information. He came to the Ordnance Survey from Autodesk, where he was EMEA Applications Manager for the Geographical Information Systems (GIS) Division.

  Abstract

  Key technological developments in internet browsers and the increased sharing of personal information online are allowing a new generation of maps to created online and now more often than not on mobile devices. This new cartography is powered by user context and may lead to the map of the future not being a map !

  Presentation Video

• Building Earth: an animated map of global wind and weather

  Cameron Beccario

  Cameron Beccario is most recently the developer of earth.nullschool.net, an animated map of global wind and weather. Previously, he was manager of the core services team at TradingScreen, a global trading platform, and a compiler engineer on the Visual Basic (.NET) team, helping to ship the first version of the .NET Framework. He received his bachelor's degree from Iowa State University in computer engineering. On Error Resume Next. @cambecc

  Abstract

  Earth (earth.nullschool.net) is a cheap to run, fast to use, and responsively designed single-page interface to a repository of public domain weather data. In its first month, Earth supported 1.5 million unique users at an operational cost of $11. This presentation discusses the technology behind Earth, the sourcing and processing of the data, and the reception of the visualization on social networks and in the media.

  Genesis to launch

  In the beginning, Earth was a fun way to learn JavaScript that quickly evolved into a passion for making weather visualizations accessible and beautiful. Decisions about the design had two constraints: a user interface that could be easily understood by people from any country and a scalable architecture capable of serving hundreds of gigabytes of data on a hobbyist’s budget. Designing to these constraints was made possible by open source technologies such as D3, Backbone.js, When.js, and Node.js, and free or low cost services from CloudFlare and Amazon Web Services.

  Weather data

  Earth sources its data from the Global Forecast System (GFS), a numerical weather model produced by the US National Weather Service and run every six hours on supercomputers. Each GFS run produces several gigabytes of files, all released to the public domain and thus free to use without restriction (great for small hobbyists). Only a small fraction of this data is used by Earth. After the files are downloaded to the server, they are converted from a binary format to JSON using the open source NetCDF-Java library, and then fetched by the browser where the computationally expensive work of wind field interpolation, projection, and animation is performed using D3 and Canvas operations. Careful use of caching, compression, and data transformation helps keep resource sizes small enough for mobile devices.

  Impact

  After launching Earth with a tweet in December, 2013, traffic grew quickly as the site received attention from popular news sites and social networks. Some feedback highlighted areas where the site failed to communicate clearly or connect with its audience. At times, addressing these concerns was technologically or aesthetically unfeasible. But the majority of feedback was very positive, and the diversity of the audience was astounding: sailors, birdwatchers, teachers, cartographers, moviemakers, each using the site for their own unique and surprising purposes. The power of visual storytelling is not necessarily to express a particular viewpoint, but to serve as a platform for an extended and organic conversation.

  Presentation Video

• Geometric Madness

  Jason Davies

  Jason Davies is a freelance programmer and is co-author of D3, an open-source visualisation library. His work and interests revolve mainly around mathematics and algorithms. Jason has a BA in Computer Science from the University of Cambridge.

  Abstract

  I will talk about my implementation of various computational geometry algorithms for the Web. Geometry is often beautiful - visually and algorithmically - as well as practical. I believe geometric thinking should be accessible to all, and I hope to provide some inspiration.

  Paper | Presentation | Presentation Video

• The Keys to a Successful Data Design Process

  Scott Murray (University of San Francisco, Assistant Professor)

  Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is an Assistant Professor of Design at the University of San Francisco, a contributor to Processing, and author of “Interactive Data Visualization for the Web: An Introduction to Designing with D3.” His work can be seen at alignedleft.com.

  Abstract

  Design is a process, not a product. Yet it is clear that some data design teams produce consistently outstanding visualizations, while others create mostly mediocre ones. So what is the secret? Are some people just “better” designers, or have they established better processes, which tend to result in “successful” designs more often than not? I’ll identify several key elements in a successful data visualization design process, as illustrated through several case studies, ranging from my personal experiences as a freelancer and collaborator to others’ stories collected in qualitative research.

  Presentation | Presentation Video

• Visual Storytelling at the BBC

  Amanda Farnsworth (BBC News, Editor, Visual Journalism)

  Amanda Farnsworth is the Editor, Visual Journalism at BBC News. The Visual Journalism team brings together high-end multimedia interactive projects for online with TV designers across all domestic and global outlets within BBC News. She is currently planning some major innovations in the BBC’s data journalism and use of virtual reality and 3D graphics. Amanda has held high-profile roles in the BBC including Editor of the TV One and Six O Clock News, Deputy Editor of Newsnight and Bureau Chief in Washington DC.

  Abstract

  Amanda’s keynote speech at The Graphical Web conference will look over some of the highlights of her team’s recent output including the award-winning interactives the Secret Life of Cats and the BBC’s Class Calculator.

  Presentation | Presentation Video

Quick jump to: keynotes | regular presentations | workshops

Regular Presentations

• A Carto Dashboard for Distributed Statistical Data

  Barend Köbben (ITC-University of Twente, Senior Lecturer)

  Show Abstract

  This paper describes a Cartographic Dashboard for Statistical Data in the Dutch Spatial Data Infrastructure. That is, a system that can consume a combination of data services from the SDI, and cartographically integrate them, so that visual comparison of data from different providers or different data from a single provider is optimized. The Carto Dashboard can be considered as a smart data viewer that “Thinks like an Atlas”. In order to realize the Carto Dashboard with atlas–quality output, a conceptual change is needed in the way the mapping from the SDI is arranged. Firstly, to achieve more control over the mapping process, we consume data services (using GeoJSON) instead of portrayal services. Secondly, we created an Atlas Map Viewer component as a web application, using HTML5 technology and the D3 javascript library.

  Hide Abstract

  Presentation Video

• A new way to stories with maps

  Sergio Álvarez Leiva (CartoDB, Chief Product Officer)

  Show Biography

  Sergio is co-founder and Chief Product Officer of CartoDB. An engineer by training and designer in his daily life, Sergio researches data visualization-applied UIs and storytelling tools for non-technical people. During the last few months he and his team have been working on Odyssey.js, a new open source javascript library that tells stories with maps. Sergio also teaches at the European Institute of Design in Madrid

  Hide Biography

  Show Abstract

  Maps and stories go together like two peas in a pod. Why is that and how do we take advantage of it? Through our work at CartoDB, we have been able thinking deeply about the role of storytelling for today's map makers. We have learned that map based data visualization often is enough to tell a compelling story, but regularly more is needed. Carefully weaving maps, data visualizations, narrative elements, and multimedia a storyteller can use a map to craft and support more compelling and engaging stories. That is why we began working on Odyssey.js, an open source JavaScript library for building interactive stories using maps. The library allows the user to carefully craft how data and maps are displayed relative to diverse other story elements. We also worked to make the controls disappear into the background, allowing the action of reading a story, either scrolling or panning, change the state of maps and other story elements easily. Odyssey.js is ready to help users make immersive stories with their data. In this talk, we'll show you the library and what it does, we'll also show you how journalists, developers, and storytellers are using the library to create stories for the web.

  Hide Abstract

  Presentation Video

• Animating 2D Digital Puppets using motion capture and Vectorial Graphics

  Alberto Pacheco (IT Chihuahua, Professor)

  Show Biography

  Director of Mobile-Learning Laboratory Mobile Apps Developer (iOS) Web Application Developer (HTML5, SVG)

  Hide Biography

  Rene Cruz (Centro Universitario UAEM Valle de Chalco, Researcher)

  Show Abstract

  Puppetry can be great for storytelling and a very interesting way of learning. From a pedagogical perspective, an animated character can unleash the "persona effect", which can go along with the student either as a tutor, presenter, helper, narrator, guide or companion pet. Furthermore, for a visual or kinesthetic learner, this is a very suitable tool, specially if a child can interact directly with digital puppets for things like learn by doing, role-playing, gaming and storytelling. In this case, we are interested in providing educational content and activities for elementary school students covering some topics from mathematics, history, art and science.

  Unfortunately, producing character animation with keyframe-based animation techniques is a complex and time-consuming process that requires sophisticated and costly software handled mostly by expert animators. With the advent of high-speed, low-cost depth cameras, digital puppetry as become accesible to everyone. Motion capture methods represents an affordable alternative for making a puppet reactive to the motion of the performer in real-time.

  From a technical and aesthetic point of view, our proposed 2D digital animation model has two distinctive properties: we use only a frontal and sagittal plane, reducing on this way some capture occlusion problems and this also simplifies the 2D vectorial mapping process and allows us to approach a kind of shadow puppet animation style (front view for main acting and profile view for distinctive actions like walking, running, sitting and fighting). Secondly, we also constraint our 2D model to animate a rigid bone posing animation, namely all body parts are represented as constant magnitude vectors, in order to elicit much less computations and a smaller streaming data flow.

  We will describe a detailed method to control digital characters in real-time by mapping user movements to the character. This method was implemented as a proof of concept prototype using a low-cost depth camera and diverse software languages and tools as Processing, the open natural interaction framework (OpenNI), Javascript, Canvas, DOM, Node.js, Paper.js, SMIL and SVG. Our method estimates joint orientation from body motion to control a digital puppet updating its corresponding puppet joint angles. We also describe the suggested SVG data structure for an efficient and flexible way to manipulate and visually represent a 2D digital puppet animation.

  In a concise way, we promptly describe here the complete process where each real-time motion capture cycle becomes a digital puppet animation running at 30 frames per second. For each cycle, our scripted solution retrieves from the depth camera skeleton every 3D joint element to perform a 2D angular projection for each joint vector pair. With this computed value, we derive an angular displacement for each joint and used them to rotate the corresponding digital puppet vectorial graphic representation. Finally, the updated SVG digital puppet is displayed on the screen canvas and optionally, can be stored in a frame buffer for later analysis, distribution or playback.

  We also present diverse experiments performed in order to improve or try different tools and configurations such as a fast and rough pose detection algorithm to classify and project motion capture as front or sagittal views, optimize motion sequences for smoother and cleaner character animation, an embedded SVG script for stand alone image animation, a broadcasting session using a server process for motion capture using a low-cost depth camera capable of streaming SVG frames or angular data for rendering animations in mobile computer clients and finally we propose and SVG streaming extension to enable optimal, non-scripted, parametric and declarative SMIL-based vector graphic animations.

  Finally, from all this preliminary work we can conclude that these kind of affordable motion capture solution can be used by non-experts and children, as an easy and intuitive way to animate characters for artistic, entertainment and educational purposes like storytelling. We hope that these kind of tools represents different opportunities to create interactive and fun learning environments and open a whole series of technical and research aspects in order to find technical improvements such as SVG streaming, real-time and interactive cartoon character animations, detailed hand and facial motion capture, audio, voice and 3D visualization of digital puppet animations, collaborative reality augmented environments among other possibilities.

  Hide Abstract

  Presentation | Presentation Video

• Animations on Fire

  Brian Birtles (Mozilla Japan, Software Engineer)

  Show Biography

  I work on the Gecko rendering engine for Firefox in the areas of animation, SVG, and layout. I have also been editing the Web Animations specification and participating in the SVG working group.

  Hide Biography

  Show Abstract

  Animation gives the illusion of movement, transforming comics into cartoons, and clunky interfaces into seamless experiences that delight users. However, that illusion can be easily destroyed by animations that stutter and stammer along. This is particularly common and particularly challenging with Web content which runs on different browsers and different, often resource-constrained, devices. However, armed with a little understanding of the internal operations of browsers and with a handful of new Web technologies, we can help browsers to produce animations that never skip a beat.

  In this session we will follow the journey from animation content represented by markup and script to the point where it reaches the user's eyeballs. At each stage--parsing, layout, rendering and compositing--we will consider how to make each step faster or skip it all together to keep the pixels flowing. We will also look at developer tools to evaluate performance and new features like 'will-change' that give us more control over how the browser handles the content.

  Apart from sheer frame-rate we will look at how to avoid random stuttering by allowing the browser to offload the work of animation to another process that can press on uninterrupted even when the browser has its hands full by making use of optimized markup and the upcoming Web Animations API.

  Hide Abstract

  Paper | Presentation | Presentation Video

• Augmenting Animations and Interactivity in SVG

  Devina Coutinho (Adobe Systems, User Experience Designer)

  Show Biography

  I am a User Experience Designer at Adobe Systems working in the web space for the past 3 years. I am responsible for the User Experience of products like Dreamweaver and Inspect. My expertise include information architecture, pattern identification, interaction design, data visualisation and web design. I like drawing, cooking, tailoring, travelling, socialising and reading in my free time.

  Hide Biography

  Priyanka Herur (Adobe Systems, Software Engineer)

  Prashant Singh (Adobe Systems, Computer Scientist)

  Show Abstract

  The web is interactive. With good in-built graphical support for shapes, bezier curves, patterns, gradients, text etc; SVG is optimal for web graphics today. Nearly every graphical property like the element’s shape, stroke, fill, position etc can be declaratively animated in SVG. You can use interpolated time-based animations or frame-based animations to transform any SVG element in a webpage. Moreover, with the ability to add SVG inline, you can make full use of the DOM structure. Web animations and interactivity can now be enhanced with the goodness of HTML5, CSS3, Javascript and the SMIL model. We have explored these opportunities and designed an enticing web experience at http://www.svgstories.com/ that takes SVG interactivity to the next level. Our presentation will demo multiple tricks of the trade including : - Transformations: Rotate, 3D Rotate, Scale,Translate and Skew - Repeat SVG elements in a grid or along a path. - CSS transitions, CSS animations and SVG animations - Line Drawing - Image Maps and Image filters. - Use of media query to intelligently scale a graphics and hide details - Boolean operations like union, intersection and difference. - ARIA support - Web component to show infographics - Geo location - Video masks - Creation of path with the ability to edit bezier curves. - Simple SVG elements like Rounded rectangle and in-place option to control the radii of all its corners. - Text wrap and word wrap to prevent text running off the screen - Ability to animate text on a path. - Styles: Gradient, Pattern, SVG filters - Visual and Semantic grouping - Support for Masks and Clip paths - Web Components to create reusable svg assets - Automation of a Spirograph to help draw interesting patterns on the fly - Camera movement and lighting effects - Improved node-link diagrams to let a user play with a diagram without changing its semantic content & logical structure. - Infinite zooming & semantic zooming techniques - Adding equations to help create see-saw, trajectory and parabolic animations We will talk about the do’s & don’t’s while adding animations/ interactivity to SVG and the various performance issues. The challenges faced in scripting and manipulating the DOM will also be covered in this talk.

  Hide Abstract

  Presentation | Presentation Video

• Building Internet Explorer for great web graphics

  Frank Olivier (Microsoft, Senior Program Manager)

  Show Abstract

  Today's web is increasingly graphical, with more technology options than ever for creating rich interactive content. At the same time, the web is available in more places on an ever-growing variety of devices from smartphones to powerful desktops.

  The Internet Explorer team at Microsoft has been hard at work building a great browser for graphical web content like CSS3, SVG, HTML5 canvas and WebGL.

  Come learn about the best practices for creating amazing content for all devices.

  Frank Olivier from the Microsoft Internet Explorer team will cover

  • Lessons learned from building three versions of Internet Explorer for desktop and mobile devices
  • Current work in the W3C and other standards bodies
  • Best practices for making your content blazingly fast on all devices

  Hide Abstract

• Colourful, graphical fonts in OpenType

  Cameron McCormack (Mozilla, Software Engineer)

  Show Abstract

  A new revision of the OpenType specification is currently being worked on. One of the major new features in the specification is the ability to define coloured glyphs in a font. Three proposals for this were submitted to the committee that works on the OpenType specification:

  1. defining glyphs with colour bitmaps (from Google)
  2. defining glyphs using a sequence of regular CFF (Bézier curve) glyphs painted in different colours (from Microsoft)
  3. defining glyphs using SVG (from Mozilla and Adobe)

  These different glyph formats have various advantages and disadvantages in particular situations, and as a result, the committee decided to allow all three approaches in OpenType.

  In this presentation, I will describe the three different approaches, with an emphasis on the SVG glyph proposal.

  Hide Abstract

  Paper | Presentation | Presentation Video

• Data Storytelling Beyond the Hype

  Robert Kosara (Tableau Software, Research Scientist)

  Show Abstract

  The term "storytelling" is becoming a bit of a buzzword, but using data and visualization to communicate based on data is a very worthwhile thing to do. Data journalism is doing that very effectively, and we have seen some efforts that have been extremely effective outside of journalism, like Hans Rosling's talk at TED 2007. The goal of this presentation is to show the gamut of existing stories, define some criteria for what stories are, and then extrapolate from the current state of the art to explore new ideas for how to tell stories. Examples from data journalism show some of the ideas for how to lead people through an argument based on data, and how to introduce them to both the data and the visualization. Many news visualizations are not actually stories though, so it is important to draw a clear distinction here. For the definition and criteria of story, I will draw from a large literature on traditional storytelling. The main criteria for stories that all have in common, are: there have to be facts, they have to be related through some sort of causal relationships between them, and there has to be a narrative sequence. This sounds abstract, but it’s quite easy to show them in examples, and also that in their absence, there is no story. In visualization, it is easy to mistake an evocative data display or a well-designed graphic with a story. But it is important to understand when a story is actually being told, as opposed to the audience being able to make up stories themselves given some interesting facts. Finally, given existing work, it is easy to see some new developments that will take storytelling with data further. These are based on existing ideas like paged views that can be much more flexible, or based on the panel layout of comics that can transform between different types of layout depending on the device or the way the data is embedded in the text. Interaction between text and a visualization can also be enriched using hover-links or scroll-spies to trigger changes in the visualization (or visualization interactions highlighting or changing text). I will draw from the work I have done over the last several years to talk about what I have learned and show some of the ideas about where I think things are going. The examples will be live demonstrations, with prototypes of new ideas created using D3.js.

  Hide Abstract

  Presentation Video

• Data visualisation at the nexus of science and the public

  Nikola Sander (Wittgenstein Centre, Vienna Institute of Demography, Research scholar)

  Show Biography

  I'm a population geographer focussing on quantitative studies of internal & international migration and population projections. I'm interested in open science, research communication using digital media, and data visualisation. I hold a PhD in Geography from the University of Queensland, Australia, (2011) and joined the Vienna Institute of Demography / Wittgenstein Centre in 2010.

  Hide Biography

  Guy Abel (Wittgenstein Centre, Vienna Institute of Demography, Research scholar)

  Ramon Bauer (Vienna Institute of Demography (Wittgenstein Centre))

  Johannes Schmidt (Null2 )

  Show Abstract

  The digital age has blurred the lines between science, journalism and the public, creating new challenges and opportunities for science communication. Online (social) media makes research that used to hide behind paywalls and journal subscriptions more accessible to the public, but it also raises new challenges for researcher wanting their findings to be featured in digital news outlets, re-tweeted and liked. University education and post-graduate training courses rarely touch on how to condense complex and technical research into non-jargon, eye-catching messages that can be understood by a wider community. Yet how researchers communicate their findings becomes increasingly important in the digital age when the attention of journalists and social media users needs to be grabbed in a blink of an eye. It is well established that visualising information can make a dramatic difference on journalists’ and the public’s understanding and engagement. Data visualisation and online interactives are valuable tools that facilitate data discovery and exploration, and they tend to be more effective than traditional reporting of research results. But concerns have also been raised about whether digital media coverage and Twitter/Facebook commentary is beneficial to scientific progress. Moreover, researchers are given very few incentives for science communication, although more and more grant schemes now require an outreach component. In this paper, we discuss how data visualisation can indeed create mutual benefits for both scientists and interested members of the public. We provide a review of the relevant literature on science communication, discuss examples of successful outreach in a range of scientific disciplines, introduce our d3-driven visualisation of global migration flow data, and reflect on our own experience in communicating research. We recently published an article on global international migration flows in Science. The visual representation of the global flow of people that we present in the article attracted considerable attention among science journalists, but our communication effort didn’t stop there. We developed a d3-based interactive visualisation of our new dataset on human mobility, and provided download links for our data, source code, and printable poster and background papers. Our data visualisation at www.global-migration.info attracted more than 200,000 visitors in the first week, and many more Tweets and Likes. Online comments and feedback provided valuable insights into how effective communication can cause users to reflect on conventional wisdom and earlier perceptions about global migration. For instance, several tweets criticised the nationalist rhetoric of French politician Marine Le Pen, stating that “African migrants aren't invading us, and here's the data to prove it”. Overall, data visualisation can create mutual benefits for scientists and the public. It enables the interested public – formally addressed as readers (of literature) or visitors (of static web pages) – to literally become users of scientific findings. The topics of discussion among members of the public provide a starting point for future research. The experiences gained from our visualisation on global migration flows highlights how new tools for data visualisation on the web can help us to turn interactions between researchers and the public into a win-win situation.

  Hide Abstract

  Paper | Presentation | Presentation Video

• Dynamic Text Effects in HTML5

  Catherine Arizan (Animatron, Marketing Manager)

  Dmitry Skavish (Animatron, CEO & Cofounder)

  Show Biography

  Dmitry Skavish is CEO at Animatron. He has been passionate about computer graphics and animation since the days when you needed to punch your game into the machine before you play it. He worked in the software industry for more than 25 years, from hacking VRML browser in C to writing analytic software in Java for a hedge fund. He worked at JetBrains for several years on Fabrique, a project that never got finished. Last decade he had been trying to start his own venture (with mixed results). Animatron is his latest baby.

  Hide Biography

  Show Abstract

  Animatron is a browser-based visual editor for HTML5 animation, built to make designing animated and interactive content accessible to everyone. The tool allows users to bring together images, vector graphics, audio files, and text to create dynamic visual stories.

  One of the major building blocks of design and communication is typography - but even though there are thousands of different fonts out there in the world, only a handful of them are supported in all browsers and across all operating systems. Whether or not a non-standard font will display correctly on a user’s screen depends on whether or not the user has that font installed on their local machine - designers can’t control this, so there’s no guarantee of consistency.

  Animatron allows users to make use of open standard downloadable fonts, like Google Fonts or Adobe Typekit, in their projects. Users can also upload font files (.ttf) to the Animatron Editor, where they’ll be stored on our servers and included in the published project. This guarantees that in the final product, the text will display identically anywhere that the project is viewed, regardless of installed local fonts, operating systems, or browsers.

  Since we have access to the font file, we have access to all of the assets it contains. So, we can give users the opportunity to convert their text characters into vector shapes ... and then provide users with a predefined set of dynamic effects that they can apply to those shapes. With a few mouse clicks, a user can create animated text that scatters across the screen, for example, or shows one letter following another - and publish it in HTML5. These dynamic text effects can also be combined with predefined interactivity effects, so the aforementioned text scattering across the screen can be set into motion only on mouseover, for example, or upon the pressing of a certain key.

  These text effects can be displayed in runtime, which allows a user to fill in the form fields of a template and see how a chosen effect looks on the text that they entered. So, for example, a designer can create an infographic template and make it publicly available; users can input their own text and communicate their personal message.

  We’ve designed the user interface of these features to give anyone the opportunity to use dynamic text effects and interactivity to enhance their storytelling - no coding knowledge is required, and the runtime ability allows users to see exactly what their text will look like simply by typing their content. Finally, with publishing options that include HTML5 and animated SVG, we hope to help users spread their content across the modern web!

  Hide Abstract

  Presentation | Presentation Video

• Getting started with WebGL and three.js

  Jaume Sanchez Elias

  Show Abstract

  WebGL is a JavaScript API that lets developers implement hardware-accelerated 3D graphics in the browser, both at interactive and non-interactive framerates. WebGL is based on the HTML <canvas> element and on OpenGL ES 2.0, which means that it is possible to run WebGL on many different devices, such as desktop computers, mobile phones and TVs.

  Today, WebGL is fairly widely supported on most platforms and browsers: Firedox, Chrome, Safari, Opera and even Internet Explorer; on Windows, OSX, Linux and Android.

  Learn how to build a project to put 3D content on a browser from scratch. In an almost-live coding session you will learn:

  • how to set up a project and understand the struture of a WebGL project
  • add a renderer and know what it does and how three.js abstracts that idea
  • add a scene, a camera and an object with a default material
  • create an animation loop and modify the geometry using JavaScript
  • change default materials to shaders and create your own custom shaders
  • how to add postprocessing to polish the render result

  Hide Abstract

  Presentation Video

• GPU Acceleration for the Web – State of the Union

  Neil Trevett (NVIDIA, Vice President Mobile Ecosystem)

  Show Abstract

  This presentation provides up-to-the-minute updates and insights into initiatives that are unlocking the power of the GPU for web applications, including:

  • WebGL, the widely established web API bringing foundational, GPU-accelerated 3D to browsers across a wide diversity of platforms and devices
  • WebCL, an emerging JavaScript binding to OpenCL, enabling web applications to compile and execute C kernels across parallel CPUs and GPUs
  • NVIDIA path rendering extension to OpenGL for full GPU acceleration of vector based web graphics, particularly critical on mobile devices that need rapid touch responsiveness.

  Hide Abstract

  Presentation | Presentation Video

• How we do data visualization at Twitter

  Nicolas Garcia Belmonte

  Show Abstract

  At Twitter, the Visual Insights team has been working with the Media, Comms and Government teams on different visualizations for big events that happened around the world. Combining storytelling, data analysis and advanced graphics techniques, we aim to translate the way people around the world have reacted on Twitter to an event into images. These visualizations include political engagement during the State of the Union Address, the world's response to the Typhoon Haiyan in the Philippines, Twitter's IPO roadshow videos, the celebration of the 50 year anniversary of Doctor Who, tweets during the Euro Soccer Cup, the Olympics, and more. Each event poses new challenges for us at different levels. One of our goals is to show how Twitter echos the pulse of the planet at any given moment via the unique conversational and real-time aspects of our platform. We also focus on engagement, whether it is about playfulness, storytelling, interaction or deep insights. Finally, the adoption factor is key: for our visualizations the Web is the best delivery platform and we use all graphics standards: 2D Canvas, WebGL, SVG and HTML based on the requirements of each visualization and accounting for factors like: number of elements in the screen, shape complexity, interaction, mobile support, libraries available and more. Through the exposition of some of our work, we will describe the workflow we use to create interactive public-facing visualizations at Twitter. We will go through a pipeline which includes stages of research of novel visualization techniques, design and planning for an event, data gathering and processing, prototyping and publishing visualizations.

  Hide Abstract

  Presentation | Presentation Video

• Invisible Visualization

  Doug Schepers (W3C, Developer Relations Lead)

  Show Biography

  Doug Schepers is Developer Relations Lead at W3C, and is a project coordinator for the SVG, WebApps, Touch Events, and Audio Working Groups, and the project lead for WebPlatform.org. He has been developing SVG applications for over a decade, and still tries to code in his copious spare time.

  Hide Biography

  Show Abstract

  Data visualizations have become increasingly common on the Web, usually as a way to simplify or draw attention to information in a world where we are bombarded with data.

  These data visualizations include bar, line, scatter-plot, bubble, and pie charts, various kinds of maps, graphs showing connections between entities, and many other techniques. Many of these may help people with cognitive disabilities, but sometimes are used to the detriment of accessibility. A piece of information that might have been presented as text is too frequently hidden away in a raster image, and too infrequently enhanced with alternative text or a longer description. This trend toward using visualization risks shifting information from a friendly text-based representation to an opaque black box not available to screenreaders.

  For raster graphics, the only solution is to offer text alternatives. But often, data visualizations are generated using SVG or Canvas, graphics technologies that have become more popular as browser support has improved. This offers unprecedented opportunities not only to present the data as text, but also to structure it in a way that allows for exploration of the data. If used correctly, SVG (and even Canvas) allow data visualizations to be accessible, usually with little extra effort on the part of the creator.

  This one-hour session takes a hands-on approach to accessibility. It will survey the range of browsers, mobile devices, ebook readers, screenreaders, and more, and will feature demonstrations and discuss techniques that work today. It will discuss support for features in various user agents, and will offer guidelines in authoring tools and resources, including popular script libraries.

  This presentation will focus on the pragmatic aspects of usability and accessibility, with simple tips you can follow that work in browsers today to make their content available to everyone. Going beyond visual impairment, this talk will cover various areas of accessibility, and delve into the science behind data visualization to show why and how it improves the user experience, and how to convey information for multiple senses. The aim of this presentation is not merely to inform developers and designers about accessibility, but also to excite and inspire them.

  Background information will be mixed with examples, demos, and instructions, as well as pointers to applications and script libraries to ease the task of authoring amazing and accessible content.

  Attendees will become familiar with various accessibility considerations, and learn how to use SVG, Canvas, CSS, and ARIA to make their data visualizations accessible. They will also learn the basics of the Web Audio API and Web Speech API, and hear about emerging accessibility features of SVG2.

  Finally, this presentation will discuss future enhancements to make SVG even more accessible, including SVG2 and the SVG Connectors module proposal, which will allow authors to easily build interactive SVG node-line graphs for flowcharts, org charts, and more.

  Hide Abstract

  Presentation Video

• Learning to program graphics - a key to unlocking innovation:

  Alan Smith (Office for National Statistics, Principal Methodologist, Data Visualisation)

  Show Biography

  Alan Smith created the ONS Data Visualisation Centre in 2007 and is passionate about the intelligent, engaging presentation of statistics on the web. A cartographer by background, Alan won the inaugural Royal Statistical Society Award for Excellence in Official Statistics in 2010 and was appointed an Officer of the Order of the British Empire (OBE) in the 2011 Queen's Birthday Honours List.

  Hide Biography

  Show Abstract

  Programming graphics is potentially a liberating educational experience. For example, Neumann [1] notes that “students are usually motivated if they can graphically visualize what they program”. Our experience at the Office for National Statistics (ONS) is that this motivational impact can be transferred into the corporate workplace, driving not only skills development, but product innovation. ONS is the UK’s largest independent producer of official statistics and is the recognised national statistical institute for the UK. As a producer of data and a supplier of information, graphical methods have an important role to play in communication with our users but have traditionally been under-utilised. This paper will discuss the organisational opportunities and challenges arising from creating a dedicated data visualisation team within a large public sector organisation. It will discuss why, with an inter-disciplinary team lacking formal backgrounds in computer science and programming, our approach has nevertheless centred on custom programming with open web standards (as opposed to off-the-shelf solutions). It will reason that developing skills in graphics programming is a way of unlocking unique expertise from other parts of the office (for example, statistical research and analysis) and bringing them together in an inter-disciplinary environment. Open standard web skills have formed the core plank of team skills development. These include HTML, CSS, Ecmascript/javascript and, more recently, open libraries like jQuery, d3js and Modernizr which aid rapid cross-platform development. As impressive as these tools are, the most important challenges for the Data Visualisation Centre have not necessarily been technical: While many private sector organisations leading in the web technology arena have grown up and thrived in a world of rapid technological change, large public sector organisations generally have not. As the web becomes increasingly visual, personal and social, organisations with a remit for broadcasting information need to develop a capability for credible content production that can add value and differentiate itself in the online information marketplace, for example through syndication and social media referrals. This paper will discuss the practicalities of developing that capability in house as a key part of the corporate skills agenda. It will borrow heavily from examples and lessons learned from the 7 year lifespan of the ONS Data Visualisation Centre. [1] Neumann, A (2005) USE OF SVG AND ECMASCRIPT TECHNOLOGY FOR E-LEARNING PURPOSES. ISPRS Workshop Commissions VI/1 – VI/2 Tools and Techniques for E-Learning, Potsdam, Germany, June 1-3

  Hide Abstract

  Presentation | Presentation Video

• Open Standards and Disruptive Innovation

  Jet Villegas (Mozilla, Sr. Engineering Manager)

  Show Abstract

  My work on the Mozilla Firefox Platform Rendering team includes the Layout, Graphics, and Audio/Video Playback components of the web browser engine used on desktop and mobile devices. Before I joined Mozilla 2.5 years ago, I served as Sr. Engineering Manager on the Adobe Flash Player and Flash Authoring teams. I've seen many media technologies come and go, and the elements that enable success and ubiquity aren't always logical. In this talk, I'll cover new ways for open standards to evolve and innovate where propriety formats have led the way. I'll go over the following technologies and what we're doing at Mozilla to push the standards forward: CSS Transforms, Animations and Transitions SVG vs. SWF vs. PDF Video, Encrypted Media, and Codecs Canvas, WebGL, and Games HTML5 Audio/Video and Media Source Extensions The talk will cover current state, future directions, and tales from the trenches over my 20 years in the Interactive Media industry.

  Hide Abstract

  Presentation Video

• Pimp that choropleth map

  Michael Neutze (Federal Statistical Office Germany)

  Show Biography

  Michael is a geographer and has been with the Federal Statistical Office of Germany (destatis.de) since 1998. Starting in the publishing and dissemination department (implementing InDesign based workflows) he developed interactive visualisations such as animated population pyramids in the early 2000s. Since 2006 he's been responsible for the housing and dwelling part of the Census 2011 in Germany. In 2014 Michael combines his interest in D3 and SVG with data from the census.

  Hide Biography

  Show Abstract

  Thematic mapping has been an early use-case of Scalable Vector Graphics (SVG). However during the first decade after its inception the format had to fight for adoption rather than being embraced by the web. Fortunately in 2014 one can count on vector graphics as being pervasive and tools like the D3.js library take a lot of headaches out of the authoring of data visualisations. So let’s revisit the choropleth map. While its use as part of a standard compliant web is well established and examples are plenty, it may be questioned if it is as well understood by a wider audience as other graphic types. Even the name choropleth is a lot less visual compared to bar-, line-, pie- or bubble charts.

  Meanwhile thematic maps have been extended with all kinds of additional charts, map projections can now be calculated instantaneously in the browser and visualisations are getting ever more complex. For official statistics however it is important to not only display data to the experts but to reach a much wider and less statistically trained part of the population. Hence it is time to simplify again for those audiences, help explain the background story and use animation where it helps understanding.

  Part of the difference between thematic maps and bar charts is how data drives the visual representation. Where bar charts’ scaling is similar to measuring people’s height, a useful choropleth has to respect colour theory as well as statistical classification schemes. Convincing colour schemes have been popularized by Cynthia Brewer’s Colorbrewer and Gregor Aisch’s Chroma.js.

  When it comes to data classification however, interactive maps typically offer equal distance and quantiles as methods, often visualizing them with an added histogram. While offering choice is an advantage of the web over print, users understandably ask which of the options the correct one is and rarely welcome “it depends” as an answer.

  Observing novice users it became clear that the data classification choice took away emphasis from the visualisation message, namely the regional patterns of the mapped variable. In fact these graphics for classification and their UI take away screen real estate and lead to smaller maps than desirable. People instinctively get that darker colours represent higher values but they not necessarily want to recap their math lessons about skewed distributions. In looking for an ‘objective’ classification method some experimentation showed that one is often well advised using “Jenks Natural Breaks”, an algorithm “that tries to maximize the similarity of numbers in groups while maximizing the distance between the groups”.

  Given a thematic map that observes the aforementioned aspects readers still need a lot of geographic knowledge, to come to conclusions one would otherwise not arrive at. Secondary knowledge of underlying facts, e.g. urban-rural distribution, historical settlement patterns and many more. We therefore suggest guiding the novice user through an interactive map by giving (con-)textual explanations.

  Moreover we try to derive the background story together with the user by offering tools that show correlation between variables, but without the prerequisite of knowing the term or concept. This is done by filtering regions (a standard D3.js technique as part of the selection method) according to user-adjustable thresholds of e.g. population density, the variation of which usually explains a lot of other socio-demographic patterns.

  Apart from the regional distribution, people are very much interested in the extremes and “Top 10” lists of anything never seem to tire. But having taken away the histogram from the map and offering a minified key that doesn’t even display the minimum and maximum, how can we satisfy the desire for showing outliers?

  In studying “Animated Transitions in Statistical Data Graphics” by Jeffrey Heer & George Robertson where they researched the “efficacy of various transition types, [and] finding that animated transitions can significantly improve graphical perception” we tried to make use of D3’s path tweening capabilities and derived at an animation that finally morphed a thematic map into a bar chart. And while many see just a wow-effect in this, further testing shows a subtle understanding of the regional distribution of those outliers as the bars are created from the map shapes and then arranged according to their value.

  The resulting map was published with data form the German Census 2011 for topics regarding housing and dwellings (as of April 2014 German only).

  Presentation Slides

  vis.uell.net/tgw2014

  Hide Abstract

  Presentation | Presentation Video

• Rapid prototyping of web site generation

  Deborah Whitfield (Slippery Rock University)

  Tyler Bassett (Slippery Rock)

  Nicholas Botzer

  David Dailey (Slippery Rock University, Professor of Computer Science)

  Grant Denmead (Development Dimensions International, Intern)

  Zachary Petrusch

  Show Biography

  Junior Computer Science major at Slippery Rock University.

  Hide Biography

  Show Abstract

  Site development is haphazard at best – some start by designing a page, others add pages to existing sites. Rarely is the navigability of the site considered. We have created a tool using SVG for the rapid prototyping of web site structures. The tool permits the user to design a web site by either a graph or via a spreadsheet. The user can create a graph that represents the connectivity of the web site and then export the structure to a skeleton website or import the structure into a spreadsheet. Or the user can create the web pages completely in the spreadsheet by specifying links, colors, images, and text for each page. Then the rapid prototype generates a test site for the user to walk through and see the structure. Researchers may then test the navigability of the site as a function of various properties of connectivity. The tool uses SVG, XML and simple spreadsheet (http://www.simple-groupware.de/cms/spreadsheet/home – an open-source spreadsheet software for use in browsers). It is built on Grapher (as previously presented at SVG Open 2009). Grapher is used to create graphs for page interconnections and generates XML code that can be input into the spreadsheet so that the designer can add data to pages. This work also includes force-directed layout of the graphs to help visualize both the connectivity and visitors’ traffic in graphs. Central to much of the design has been the use of graph theoretic metaphors for navigability, namely graph gravity, landmarks and vantage points. Previous work has shown that graph gravity can be used to facilitate users’ navigation of the connective structure of a web site.

  Hide Abstract

• Remarks on Visualizing BNF Grammars using Interactive SVG

  Jürgen Höhe (CreativeCologne UG)

  Show Biography

  Worked in many IT fields since 1963 as developer, consultant and manager.

  Hide Biography

  Show Abstract

  Remarks on Visualizing BNF Grammars using Interactive SVG

  Visualization might raise critical questions. Here are some of them:

  • is visualization more comprehensive than written text?
  • is it precise?
  • is it intuitive?
  • does its interaction provide a better understanding?
  • is it worthwhile (cost effectiveness)?
  • is it more than a toy?
  • what are the limits?
  • is the technical base – Javascript, HTML plus embedded SVG - sufficient?

  During the presentation of interactive BNF diagrams some of these questions will be answered. Here is a short story instead of an abstract:

  EBNF

  BNF (Backus Naur Form) is a meta language to define exactly the grammar of a context-free language. Often parsers are derived from the BNF. Most of the time an extended form (EBNF) is used for this purpose. The metalanguage can easily be adopted. It needs one page of explanation.

  In brief: An EBNF grammar consists of production rules. A rule starts with its name followed by an assignment "::=". The rule consists of clauses: Pure text - terminals, references to other rules - nonterminals, options enclosed in brackets "[]", alternatives separated by bars "|". repetitions indicated by three dots "…" and nameless rules in curly braces "{}". That's all one has to know of the metalanguage used here.

  EBNF is also used to document a language. Many times you will find it in the appendix of a handbook. And there it stays unused because it consists of rules in rules. This nesting forces you to thumb through the appendix. At the end you do not know where you came from. This is a big drawback.

  Highlighting and Links

  Highlighting of metacharacters distinguishes them from language characters, no escapes or quotes are necessary any more. It helps if the grammar is in HTML format with links to rules. Then the thumb is replaced by the mouse. It's faster but not better.

  Syntax Diagrams

  The transformation of a syntax rule into a diagram, known as raiload diagrams, improves the comprehension of a BNF notation. It is obviously easier to grasp the format of the diagram rule without losing precision. This is still a static approach. It could be part of a manual. Oracle's DB documentation is a good example for this approach.

  Drop Down Diagrams

  Dynamics come in with the interactive exploded view of the subrules if they become clickable. One might call them drop down diagrams. The rules are visualized in their individual context. This approach could be implemented by using pictures of each rule in a grammar. The clicked subrule is placed directly under the rule reference in order to visualize the link.

  Inner Expansion of Diagrams

  The best presentation will be an inline expansion of a rule. But here we stumble against the limits of conventional HTML. Because of the multitudinous combination of rules the diagrams have to be redrawn. The tool of choice for doing that is SVG.

  One can see at a glance how e.g. a SQL statement should be written. Of course, it should be possible to draw nested diagrams to arbitrary depth.

  Interactive Reduction of Complexity

  Instead of exploding rules, they can be collapsed by selecting alternatives or dropping options. As a reminder of a collapsed clause a colored rectangle will appear. There are hidden rectangles in front of options and alternatives. If the mouse moves over it, they will appear. If clicked, the option or alternative will be selected.

  An option can either be dropped or selected.

  The colored rectangles – ocher for option and red for alternatives - are reminders of the reduction. If clicked, the original will be redrawn.

  If only one line of clauses is left, a statement template will be printed with placeholders for lexical elements like <table:name>.

  Redundancy Reduction

  A BNF and even an EBNF notation can be lengthy. Therefore an algorithm has been developed to reduce redundancy. Depending on the specified depth rules can be automatically reduced to their lowest term.

  Discussions

  The above questions will be discussed during the interactive presentation. Especially, whether such an application is worthwhile and not just another toy.

  The experience with published grammar diagrams of a licencefree database will be shown.

  Some hundred BNFs on various languages were collected. The intention is to convert them various different notations to a standard BNF format, generate the diagrams and make them available to the public.

  Hide Abstract

  Paper | Presentation |

• Storytelling in data visualisation

  Tobias Sturt (Graphic Digital Agency, Head of Creative)

  Adam Frost (Guardian Digital Agency)

  Show Biography

  I'm Head of Data Visualisation at the Guardian Digital Agency, making graphics, interactives and websites for a range of private sector and public sector clients.

  Hide Biography

  Emma Whitehead (Graphic Digital Agency, Managing Director)

  Show Abstract

  Storytelling is a crucial element in the successful presentation of data. Without effective storytelling the best technology and the most beautiful visual design will not have the impact it could have.

  Storytelling helps explicate difficult information to an audience, creates a structure through which the audience understands the data and gives them the structure to find their own insights. It is, more vitally, an inevitable product of the visualisaton of data: by patterning, arranging and visually analogising data we create stories.

  This makes the understanding of the mechanisms of storytelling all the more important.

  At Graphic we do data visualisation and infographic work as a commercial practice, and understanding how we tell stories around and through data, how they work and the effect they have on the audience is vital. Our aim is to talk about our approach and experience of visual storytelling with data to try and understand how and why these approaches work they way they do.

  Hide Abstract

  Presentation | Presentation Video

• SVG 2 For the Artist and Developer

  Tavmjong Bah (Inkscape, Developer, documenter.)

  Show Biography

  Inkscape developer and documentor. Invited expert representing Inkscape to the SVG working group.

  Hide Biography

  Show Abstract

  This presentation will cover new features in SVG 2 and in the many CSS specifications that it references which are of particular interest to artists and developers. Many of these new features can already be found in SVG implementations. When possible, the new features will be demonstrated either in web browser or in Inkscape. An implementation status report will be given.

  A sample of new features to be covered include:

  • CSS based text layout:
    • Multi-line text.
    • Auto-wrapped text.
  • Marker improvements:
    • Auto-reverse.
    • Knock-outs.
    • Positioning.
    • Auto-matching marker fill to stroke color.
    • Markers on shapes.
    • Better filling/stroking:
      • New blend modes.
      • Modified paint order (fill over stroke).
      • Extrapolated line-join.
      • Multiple fills.
    • New "paints":
      • Mesh gradients.
      • Hatched fills.
      • Named colors.
    • Pseudo-3d transforms.
    • CSS transitions.

    Hide Abstract

  Presentation | Presentation Video

• SVG: Storytelling & Visualisation in Government

  Robert Fry

  Show Abstract

  Over the past few years we have witnessed a boom in “Data Journalism”. The overwhelming aim of journalists in this field is to engage and inform their readers with data-driven evidence based reporting. A whole range of data sources are used to tell these stories, but a common theme is the use of government data, which is often used to hold government policy to account.

  There are strong parallels with what data producers within UK Government are encouraged to do. In particular the Data Visualisation Centre of the UK Office for National Statistics has worked with data producers across government and has sought to:

  • provide insight into the main findings in government data (explanatory analysis)
  • provide easier ways for users to find insights relevant to them (exploratory analysis)

  As in data journalism our work has harnessed the huge power that the web can offer. The team uses d3js and other javascript libraries to create dynamic interactive visual graphics.

  This talk will explore some of the teams recent projects (unpublished at the time of writing); it will compare the different forms that these projects have taken (data-exploration, story-telling and our first steps into gamification) and will look at the different technologies used, offering reflection on how libraries such as d3js have helped produce better content.

  It will offer insight into how the visualisations have been structured and what different forms of visualisation can offer – including thoughts on where we see ourselves focusing our efforts in the future, and what we think makes a successful visualisation – successful in terms of our stated aims, to provide real insight and to engage the user.

  The talk will also consider our position within government, the advantages and disadvantages it can bring. It will reflect on how our coordinated interactive data visualisations have complemented the work of data journalists and the wider Open Data movement.

  Hide Abstract

  Presentation |

• Swisstrains

  Vasile Cotovanu

  Show Biography

  http://www.vasile.ch

  Hide Biography

  Show Abstract

  Swisstrains.ch is a simulation of the Swiss Federal Railways network based on the offical timetables and railroad vector data.

  The latest development of the project has an animated version of the locomotives and coaches in the Zürich HB area.

  We'll look into the 7-years old story of this project, which deals with 13'000 trains on 5'000 km of tracks, generating 150'000 timetables stops across 1'800 stations. We'll also see the motivation behind the project and how the technology behind might be useful for many of us as well.

  Speaker Vasile Cotovanu is a mobile software engineer working in Zürich, Switzerland and, obviously, both map addict and a train buff.

  Hide Abstract

  Presentation | Presentation Video

• The future of gradients in SVG?

  Nikos Andronikos (CiSRA (Canon Information Systems Research Australia), Senior Software Engineer)

  Show Biography

  Nikos Andronikos is a senior software engineer from CiSRA - Canon's Australian research centre, located in Sydney. He represents Canon on the SVG working group, following in the footsteps of a long line of engineers that stretches back more than 10 years.

  Hide Biography

  Show Abstract

  Truly scalable photo-realistic images may be the Holy Grail of vector graphics, and one technology - Diffusion Curves - holds great promise to achieve that.
  Diffusion Curves have some similarities to mesh-based gradients, but have strong advantages over that technology - including compactness of representation, ease of authoring, and ease of animation.
  Diffusion Curves provide a vector primitive for defining complex colour gradients that supports the traditional and intuitive methods of drawing outlines and filling with colour, since colours diffuse out from curves in a controllable way.

  The technology also seems a perfect fit for SVG with, I hope, huge appeal for designers. Last year at this conference I surveyed the state of the art and spoke of my dream to bring the technology to SVG. This year I will describe the work that CiSRA has done to make that dream a reality. I will demonstrate a new renderer that achieves the performance required for SVG. We will go through some live examples, creating advanced gradients in real time. I will also show a gallery of appealing images created by both CiSRA and INRIA, show-casing the wide range of image types that Diffusion Curves can create - from simple cartoon-style images, to scalable photo-realistic recreations.
  Lastly, I will run you through a proposal for SVG syntax, and talk about the model behind this syntax. After this talk, with the knowledge you've gained, I hope to hear back from some of you about ideas for how you might use this new technology, and whether the proposed model addresses those uses.

  Hide Abstract

  Presentation | Presentation Video

• Tuning SVG performance in a Production Application

  Rohit Kalkur (Social Tables, Software Engineer)

  Show Abstract

  As today's browsers continue to grow in their capabilities and support for advanced web graphics, we are finally able to harness these technologies to build sophisticated, dynamic products.

  Social Tables is an award winning SaaS-based company with a focus on event planning/management. Our core product, Venue Mapper, is essentially AutoCAD for event diagramming, and helps people layout event spaces, plus perform other event-related tasks such as guest list management.

  You can demo Venue Mapper by going to https://app.socialtables.com/ and clicking any of the 3 event types: Meeting, Social, or Trade Show.

  Venue Mapper relies heavily on SVG for rendering tables, chairs, and a host of other objects.

  Everyday we deal with problems such as how to render hundreds of DOM elements that represent a hotel ballroom at full capacity while ensuring the user experience is as smooth and interactive as possible.

  This talk will focus on some of the performance issues we deal with frequently, such as how to dynamically render a large number of SVG elements as efficiently as possible.

  Hide Abstract

  Presentation |

• Use and Abuse of Animation in Data Visualizations

  Jeremy Stucki (Interactive Things, Visualization Lead)

  Show Biography

  Jeremy Stucki is a visualization and user interface maker. He is a co-founder of the Swiss design studio Interactive Things, where he leads the development of interactive data visualizations for clients like Neue Zürcher Zeitung and UNESCO.

  Hide Biography

  Show Abstract

  Animations enable us to convey changes over time, transitions between states, or the unfolding of a narrative. We can show processes, tell stories and evoke emotions where it is difficult or impossible with static graphics and text alone. The capabilities of modern web browsers and libraries like D3.js allow us to use animation in visualizations very easily. But we must also ask if the animations we create are necessary, meaningful and effective. Especially in visualization we need to be careful not to distort the data or introduce unneeded complexity. In this session, we will learn the principles and different techniques of animation. We will explore what we can apply to interactive visualizations and how to do it using hands-on D3.js examples.

  Hide Abstract

  Paper | Presentation | Presentation Video

• Visualising health research

  Will Stahl-Timmins (British Medical Journal, Interactive Data Visualisation Designer)

  Show Biography

  Dr Will Stahl-Timmins is a specialist in the visual presentation of data and information, using information graphics, interactive media, and visual communication to promote understanding. His current research involves assessing the effects of differing information presentations on knowledge transfer, memory, and behaviour. Dr Stahl-Timmins’s PhD centred on the evaluation of information graphics in the field of health policy making. Dr Stahl-Timmins is a trained graphic designer, with a BA in graphic design and MA in design research from the University of Wales, Newport. His design education led to an enduring interest in information design, and the use of research methods to inform design practice.

  Hide Biography

  Show Abstract

  Health research can have impacts on a wide range of people with different levels of knowledge and experience. Information designer and researcher Dr Stahl-Timmins will present data visualisations and information graphics prepared during his time at the European Centre for Environment and Human Health (University of Exeter Medical Schools) and in his new role in interactive data visualisation design at the British Medical Journal. Topics include: - The effects on memory of visualising health impacts of climate change for the UK general public - Visualising the pathways for pharmaceutical waste using isometric city-scapes to facilitate discussion by town planners and utility companies - Presenting clinical trial data to health policy-makers using custom-built software

  Hide Abstract

  Presentation |

• Visual Storytelling Panel

  Sergio Álvarez Leiva (CartoDB, Chief Product Officer)

  Show Biography

  Sergio is co-founder and Chief Product Officer of CartoDB. An engineer by training and designer in his daily life, Sergio researches data visualization-applied UIs and storytelling tools for non-technical people. During the last few months he and his team have been working on Odyssey.js, a new open source javascript library that tells stories with maps. Sergio also teaches at the European Institute of Design in Madrid

  Hide Biography

  Bella Hurrell (BBC News, Assistant editor, Visual Journalism)

  Show Biography

  Bella Hurrell is the Assistant Editor of the Visual Journalism team in BBC News. The team combines the expertise of online journalists, web developers and information designers, as well as 3D and motion graphics specialists. The cross-platform unit enhances the BBC’s digital journalism through information graphics, data visualisations and interactive storytelling. Bella was a founding member of the BBC News website and has worked in the field of online journalism for many years. She has held a number of editorial posts at the BBC prior to her current role, including specials editor, core news writer and editorial lead on a news website relaunch.

  Hide Biography

  Robert Kosara (Tableau Software, Research Scientist)

  Scott Murray (University of San Francisco, Assistant Professor)

  Show Biography

  Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is an Assistant Professor of Design at the University of San Francisco, a contributor to Processing, and author of “Interactive Data Visualization for the Web: An Introduction to Designing with D3.” His work can be seen at alignedleft.com.

  Hide Biography

  Jeremy Stucki (Interactive Things, Visualization Lead)

  Show Biography

  Jeremy Stucki is a visualization and user interface maker. He is a co-founder of the Swiss design studio Interactive Things, where he leads the development of interactive data visualizations for clients like Neue Zürcher Zeitung and UNESCO.

  Hide Biography

  Tobias Sturt (Graphic Digital Agency, Head of Creative)

  Show Abstract

  Panel on Visual Storytelling. Panelist represent the following organizations or projects:

  • BBC Visual Journalism team
  • d3.js
  • CartoDB
  • Financial Times
  • Guardian Digital
  • Interactive Things
  • ONS (UK National Statistics Office)
  • Tableau Software

  Hide Abstract

  Presentation |

• W3C Standards and Implementors Panel

  Nikos Andronikos (CiSRA (Canon Information Systems Research Australia), Senior Software Engineer)

  Show Biography

  Nikos Andronikos is a senior software engineer from CiSRA - Canon's Australian research centre, located in Sydney. He represents Canon on the SVG working group, following in the footsteps of a long line of engineers that stretches back more than 10 years.

  Hide Biography

  Tavmjong Bah (Inkscape, Developer, documenter.)

  Show Biography

  Inkscape developer and documentor. Invited expert representing Inkscape to the SVG working group.

  Hide Biography

  Erik Dahlström (Opera Software ASA)

  Alex Danilo (Google, Developer Advocate)

  Show Biography

  Alex has spent over a decade on various W3C working groups developing the standards we all know and love, all while running a couple of start ups doing web engines for mobile and embedded markets. He now works at Google, spreading the good word about HTML5 and Chrome.

  Hide Biography

  Cameron McCormack (Mozilla, Software Engineer)

  Frank Olivier (Microsoft, Senior Program Manager)

  Doug Schepers (W3C, Developer Relations Lead)

  Show Biography

  Doug Schepers is Developer Relations Lead at W3C, and is a project coordinator for the SVG, WebApps, Touch Events, and Audio Working Groups, and the project lead for WebPlatform.org. He has been developing SVG applications for over a decade, and still tries to code in his copious spare time.

  Hide Biography

  Dirk Schulze (Adobe Systems)

  Show Biography

  I am Dirk Schulze, a web developer, browser implementor, and specification editor. I joined Adobe in 2011. As an active member of the W3C and the Khronos Group, I contribute to various specifications like CSS3 Transforms, Filter Effects, SVG2, CSS Masking, Geometry Interfaces and WebCL. I have been a reviewer and contributor to the WebKit project for over 7 years. I belong to the Canvas, SVG, and Filter Effects implementation teams in WebKit. I contribute to Blink, Gecko and other open source projects as well.

  Hide Biography

  Neil Trevett (NVIDIA, Vice President Mobile Ecosystem)

  Show Abstract

  Representatives of the W3C working groups on CSS and SVG will be available as a panel to discuss the W3C graphic specifications, current work and future plans. Most W3C working group members are also implementors of the respective standards in webbrowsers. We will have representatives from the main web browser projects (Google, Mozilla, Microsoft, Opera) at the panel. The format is a moderated question-and-answer session, with both prepared topics and audience participation. The panel will begin with an introduction by each panelist, who will talk about their company or organization, give a brief overview of their implementation, and talk about their role in the project. The panel provides an opportunity for dialog between different implementors, W3C representatives and the conference audience.

  Hide Abstract

  Presentation Video

• Web Layout Parisien

  David Dailey (Slippery Rock University, Professor of Computer Science)

  Dan Miller

  Show Abstract

  The streets of Paris were radically transformed in the late 1800’s by Prefect of the Seine, Baron Georges-Eugène Haussmann as commissioned by Napoleon III. The new geography resembles what, in mathematics, is known as a line-arrangement, in contrast with the previous medieval street plan that more closely resembled a Voronoi diagram. The newer layout was the inspiration for a new model of web layout that departs from the traditional layout based on the CSS box model. The conventional model, is arguably descended from models of text layout that came to dominate textual communication with the advent of the printing press. We show that ease of layout, using SVG, need not conform to rectangles and demonstrate an easy way of designing much more fluid line arrangements that can be used to control the geometry of web pages. Interestingly, those same line arrangements, we show, can be used as the basis for defining new font-families allowing the client-side generation and modification of a set of glyphs that share interesting familial traits. Specifically we use a series of circles, drawn in SVG, which when dragged and resized can be used to define and control a large collection of lines tangent to pairs of those circles. Up to four lines per pair of circles may be defined, so that a nonrectilinear geometry of up to 2N(N-1) lines may be easily controlled through the use of N circles. We show how both web design and font design may be liberated from historic convention through simply throwing away the box. We will show our recent progress in this two-year old project.

  Hide Abstract

  Paper | Presentation Video

• What do Man of Steel, Starbucks and your Local Council have in common?

  Dhruva Rajan (ESRI UK Ltd)

  Show Abstract

  How could a movie, a coffee shop chain and a Government Organisation possibly be linked? Here we tell the story.

  Hide Abstract

  Presentation |

• Which?'s Financial Squeeze Map

  Guy Weir (Which?, Senior Statistician)

  Show Abstract

  Which? (The Consumer Association) is much more than a suite of consumer advice publications. As a non-profit making registered charity, it is also one of the leading voices in the space of consumer campaigning. It has an extremely successful track record in lobbying Government, policy makers, regulators and industry itself to achieve better outcomes for all consumers - not just its members.

  To ensure it has the necessary depth of understanding of consumer attitudes, experiences and behaviours, it has been building its research & insight function significantly over the last few of years. As part of this insight function Which? has been measuring, via a monthly tracking web survey, peoples’ experiences and the actions they been taking in response to rising consumer prices and falling/stagnating incomes - widely commented upon since the 2008 recession. These financial ‘squeeze’ measures, are grouped and analysed by Which? into a hierarchy of severity (the Which? ‘squeezometer’), such that survey respondents are classified according to the most severe experience they had in the previous month. (e.g. cutting back, borrowing from friends/family to cover bills, using payday lenders, defaulting on bills/loans/housing etc.).

  One key question was how to find out, at a granular level, where the highest and lowest concentrations of people experiencing these things are located, and to bring together relevant supporting data sources that will help to bring deeper understanding of the context for those households.

  In order to answer this we have been developed a free interactive thematic online mapping tool that shows the extent to which households are likely to be experiencing financial distress at three different levels of geography - Region, Parliamentary Constituency, and Lower Super Output Area.

  Statistics have been estimated for mapping purposes by combining the Which? tracker data with a geo-demographic product (the ONS Output Area Classification 2001) and Census 2011.

  The mapping tool is fully interactive and, by making use of innovative web charting tools shows further contextual data, graphs, and charts relating to any area hovered over/clicked upon by the user. These elements include Census 2011 age groups, Indices of Multiple Deprivation 2010, Census Unemployment, Output Area Classification 2001. The tool is being designed with a key goal in mind – to use innovative visualisation methods to present large geographic datasets for a non-specialist map user, seamlessly linking datasets together for that user, in order to unlock insight and understanding about the different experiences of financial distress for households in different places.

  Hide Abstract

  Presentation | Presentation Video

• X3DOC

  Alan Forest

  Show Abstract

  Overview and purpose

  X3D can be extended with a subset of SVG to produce structured documents
  integrating pages, text boxes, 2D vector graphics and 3D models.

  The documents in X3D extended with SVG can be used:

  • To tell stories (electronic books containing interactive animations).
  • In education (presentation slides including 2D and 3D animated illustrations).
  • In manufacturing (simulation and real time control of robots).

  Historical Background:
  the common roots and parallel evolution of SVG and X3D

  The geometry of the 2D and 3D graphics is derived from the work of Pierre Bezier, circa 1970.
  The 2D declarative graphics inherit from Adobe: PostScript, PDF, Illustrator, SVG.
  The 3D declarative graphics inherit from SGI: Iris GL, OpenGL, Open Inventor, VRML1, VRML2, X3D.

  The Adobe and SGI companies were both founded circa 1982 in the Silicon Valley,
  by engineers that worked at Evans and Sutherland in the 70s.

  Since then, the 2D and 3D graphics technologies that have been invented here
  are following a sort of parallel evolution, like marsupial and placental mammals.

  Proposal for a convergent standard: X3D documents

  The existing X3D standard can contain text, raster images, movies, 3D shapes.
  In order to converge with SVG, we can add to X3D:

  • A 2D geometry compatible with the graphic path syntax used in PostScript and SVG.
  • Linear, radial and angle gradient textures (already proposed in MPEG-4 Part 11).
  • A drawing style compatible with CSS definitions
    (by resurrecting the DrawStyle node that existed in Open Inventor).

  The benefits of user-defined XML namespaces in X3D

  We believe that XML namespace prefixes can simplify the extension process in X3D,
  just like the "ARB_" or "EXT_" or "NV_" extension prefixes used in OpenGL.

  The XML namespace features are an alternative to the X3D profiles,
  allowing to define proprietary or application-specific extensions
  without conflict with the node names of the X3D standard,
  using different XML namespace prefixes.

  Currently, our X3D document loader supports user-defined XML namespaces.

  Extensive software and hardware compatibility

  Compatibility is the first goal of the X3D document software,
  in order to support the existing authoring tools and the evolving graphics hardware.

  Currently, the X3D document software can support:

  • Text and graphics imported from MS-Office, PostScript, PDF or SVG files.
  • 3D models imported VRML and IGES files generated by a CAD system.
  • Video imported from various MPEG-4 formats (using FFmpeg codecs).
  • Rendering based on OpenGL or Open GL ES 2.
  • Plug-in modules for input/output peripherals, simulation, motion control.

  Sofware design

  The compatibility requirements have led to a software divided in 5 sections:

  1. To import existing 2D/3D graphics from third party software.
  2. To write document with a common SVG / X3D generator.
  3. To read documents with a common VRML / X3D loader.
  4. To render 2D/3D graphics using a hardware-accelerated display,
     on desktop computers or handheld devices.
  5. To integrate external sofware modules through a common interface.

  The linkage with external plug-in sofware is critical:

  • It can create complexity and performance bottlenecks.
  • But it is essential to develop software extensions.

  To demonstrate the extensibility of X3D using a modular software design,
  all the geometry of the 2D vector graphics is implemented as a plug-in software module.

  Applications

  By using a popular slide editor software and a popular CAD software, everyone can create such documents and display them on any device, using a rendering software compatible with OpenGL and OpenGL ES.

  As a proof of concept, we present a demonstration of this technology running on desktop computers or handheld devices.

  Hide Abstract

  Presentation | Presentation Video

Quick jump to: keynotes | regular presentations | workshops

Workshops

• BYOD + D3

  Scott Murray (University of San Francisco, Assistant Professor)

  Show Biography

  Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is an Assistant Professor of Design at the University of San Francisco, a contributor to Processing, and author of “Interactive Data Visualization for the Web: An Introduction to Designing with D3.” His work can be seen at alignedleft.com.

  Hide Biography

  Show Abstract

  Bring Your Own Data to this open workshop, in which you can work alongside others on your own, self-directed visualization project using d3.js. We’ll begin by surveying attendees to discover what types of data you’ve brought and what kinds of projects you want to develop. The workshop will include time for some one-on-one consultation with the instructor, as well as some light instruction on specific topics, improvised to address your questions and concerns.

  Participants should already have some familiarity with D3, such as by attending the earlier “Introduction to d3.js” workshop. To make the most of our time, please bring an existing data set to work with, ideally in CSV or JSON form.

  Participants: Please come prepared for the workshop by bringing a laptop with the following already downloaded, installed, and ready to go:

  • At least one data set for your project, ideally as a CSV or JSON file
  • Your code editor of choice (e.g. Sublime Text)
  • A up-to-date web browser (ideally Chrome)
  • If possible, a local web server (e.g. MAMP), although we will cover this briefly during the workshop

  Hide Abstract

• Creative data visualisation with HTML5

  Peter Cook (Animated Data, Director)

  Show Abstract

  This session will look at tools and techniques for creating data visualisations in modern browsers with the hope that candidates will gain insights into the different approaches. This is aimed at candidates with some, but not necessarily much, experience in web programming (JavaScript, HTML and CSS) although non-programmers may learn something too!

  We will:

  • explore the underlying technologies in modern web browsers such as SVG and the Canvas element and learn when we’d choose one over the other
  • look at how data is commonly represented in the browser (e.g. arrays, JSON)
  • use JavaScript to load in and process data
  • draw data-driven elements in the browser using SVG and/or the Canvas element
  • look at common charting libraries including a look at D3.js

  Candidates will be provided with example code, so they are not expected to write much code. However, they will be encouraged to play around with the examples and hopefully modify them as they wish.

  The hope is that candidates will gain the confidence to produce simple data visualisations in the browser and at the very least they will gain a high-level picture of the tools and techniques available to them.

  Requirements:

  Please bring with you:

  • a laptop
  • a modern browser (e.g. recent versions of Chrome or Firefox)
  • a code editor such as Sublime Text
  • a local webserver (e.g. MAMP or WAMP). If you have Python installed we can use its built-in server.

  For anyone wanting to jump ahead you can read the slides and download the code.

  Hide Abstract

• Generative and reactive geometry with JavaScript and WebGL

  Jaume Sanchez Elias

  Show Abstract

  WebGL is a JavaScript API that lets developers implement hardware-accelerated 3D graphics in the browser, both at interactive and non-interactive framerates. WebGL is based on the HTML canvas element and on OpenGL ES 2.0, which means that it is possible to run WebGL on many different devices, such as desktop computers, mobile phones and TVs.c

  Today, WebGL is fairly widely supported on most platforms and browsers: Firedox, Chrome, Safari, Opera and even Internet Explorer; on Windows, OSX, Linux and Android.

  In this course you will learn:

  • How to set up a three.js project: HTML markup and JavaScript, setting up a scene and adding event handlers
  • How to use easing functions to smooth interactive values, like the camera values
  • Create objects like geometries with triangles and particle systems
  • Introduce problems with 3D rendering like object sorting and its solutions
  • Different methods to load models and to create custom geometries, and reusing data to create different objects
  • Introduction to animation in the browser: requestAnimationFrame and the render loop, modifying a mesh in CPU and updating buffers
  • Introduction to perlin noise
  • How to load a music track or to a microphone: introduction to Web Audio API and WebRTC getUserMedia, introduction to Fourier Analysis
  • How to use frequency domain to synchronise geometry distortions
  • Replacing the standard material for an elemental shader: introduction to GLSL and the Shader Model, using attributes and uniforms
  • Adding video using WebRTC getUserMedia
  • Adding postprocessing to improve the rendering finish

  Requirements

  • Chrome or Firefox

    To prevent CORS issues when loading textures and sound files, use a local web development environment, like the integrated web server in OSX, or download XAMPP or a similar package.

    You can also run a standalone Chrome instance with --disable-web-security when loading from file://

  • WebGL support

    Make sure your system supports WebGL and your card is not blacklisted: get.weblg.org

    Patience, curiosity to tinker with "magic" values, and capacity to endure playing the same song over and over and over.

    Hide Abstract

• Introduction to d3.js

  Scott Murray (University of San Francisco, Assistant Professor)

  Show Biography

  Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is an Assistant Professor of Design at the University of San Francisco, a contributor to Processing, and author of “Interactive Data Visualization for the Web: An Introduction to Designing with D3.” His work can be seen at alignedleft.com.

  Hide Biography

  Show Abstract

  Confused by D3? Interested in coding data visualizations on the web, but don't know where to start? This course will have you transforming data into visual images in no time at all, starting from scratch and building an interactive scatterplot by the end of the session. We'll use d3.js, the web's most powerful library for data visualization, to load data and translate values into SVG elements — drawing lines, points, and scaled axes to label our data.

  Intended for absolute beginners new to D3, yet with some prior programming experience (though not necessarily JavaScript), and some prior web experience (HTML, CSS).

  Participants: Please come prepared for the workshop by bringing a laptop with the following already downloaded, installed, and ready to go:

  • The code examples
  • Your code editor of choice (e.g. Sublime Text)
  • A up-to-date web browser (ideally Chrome)
  • Optionally, a local web server (e.g. MAMP)

  Hide Abstract

• Introduction to QGIS (Open Source GIS Software)

  John Walton (BBC Visual Journalism team, Journalist)

  Ransome Mpini (BBC News, Web Developer)

  Show Biography

  Ransome is a Web Developer with BBC News and has in the last 4years been primarily involved in building responsive data visualisations for the Visual Journalism team. Ransome has a passion for anything data and is currently studying for a Masters degree in Data analytics and Business intelligence. He is currently placed with the newly formed Global data team where he is using his skills in data analysis to meet the team's data journalism objective.

  Hide Biography

  Show Abstract

  Introduction to QGIS (Open Source GIS Software)

  This workshop will focus on turning spreadsheets into maps using QGIS. QGIS is open source mapping software. It’s an incredibly powerful tool for making maps, visualising and analysing data geographically, but it can seem a little daunting at first glance. This workshop aims to help get you started by taking some example spreadsheet data which we’ll then turn into a couple of different types of maps.

  Who is this workshop for?

  It is pitched at the beginner level and is open to people from editorial, design and development backgrounds. It’s aim to show how to get started with visualising geographic data. No previous experience of GIS software or programming is required.

  What will this workshop cover?

  This workshop will cover two of the most frequent tasks involved in visualising data in QGIS. Firstly we’ll find out how to plot points on a map, a useful technique when trying to see the extent or distribution of a set of data. Then we’ll cover how to make thematic, or heat maps.

  We’ll also give you some pointers on how to take the maps you’ve produced on to publication.

  Requirements

  Please bring a laptop with QGIS installed. Mac or PC are both fine. We’ll be using QGIS 2.4 - which can be downloaded here - http://www.qgis.org/en/site/forusers/download.html.

  Also, please come with a spreadsheet programme. Any of the following will do; Excel, Google Sheets or an open source spreadsheets package.

  Any questions?

  If you’ve any questions on the workshop in advance feel free to get in touch with me on Twitter, @walt_jw.

  Hide Abstract

• Introduction to R (Open Source Statistics Software)

  Ransome Mpini (BBC News, Web Developer)

  Show Biography

  Ransome is a Web Developer with BBC News and has in the last 4years been primarily involved in building responsive data visualisations for the Visual Journalism team. Ransome has a passion for anything data and is currently studying for a Masters degree in Data analytics and Business intelligence. He is currently placed with the newly formed Global data team where he is using his skills in data analysis to meet the team's data journalism objective.

  Hide Biography

  John Walton (BBC Visual Journalism team, Journalist)

  Show Abstract

  This workshop is intended for people with limited or no previous experience with R, a powerful tool for data analysis. Experience using another computer language will be an advantage but is not necessary.

  The workshop introduces the R environment, R language constructs i.e. variables and functions and extending base R functionality with modules with focus on the sqldf module for data processing. We will learn how to read and write data to and from delimited files and excel spreadsheets. Using the sqldf module we will learn how to merge, subset or filter data on a set of given conditions

  Requirements

  Please bring a laptop with R and RStudio installed. See links below for where to get R and the Rstudio IDE.

  • R (http://www.r-project.org) can be downloaded from http://cran.ma.imperial.ac.uk (see http://www.r-project.org for complete list of CRAN mirrors)
  • RStudio IDE (http://www.rstudio.com) can be dowloaded from http://www.rstudio.com/products/rstudio/download

  You can find me on twitter @mupini should you have any questions before to the workshop.

  Hide Abstract

• Topic Modeling Networks

  Lynn Cherny (Ghostweather R&D, LLC, Consultant, Data Analysis & Vis)

  Show Biography

  Lynn Cherny is a data analysis and visualization consultant in the Boston area, working primarily with Python, R, and D3.js. She has a Ph.D. from Stanford University in Linguistics and an M.Phil. from Cambridge University in Computer Speech and Language Processing. Her former employers include AT&T Labs, TiVo, the MathWorks, Adobe, and Autodesk.

  Hide Biography

  Show Abstract

  In this tutorial, you will learn how to explore document content visually with topic modeling, a popular unsupervised machine learning technique that can help illuminate text content and relations. The tools used will be Python for simple text processing, a topic modeler (Mallet) with a GUI or command line option, and Gephi and D3 for network visualization.

  The steps we will take:

  • 1. Pre-process texts for use in topic modeling, using Python scripts.
  • 2. Run topic modeling software on the texts.
  • 3. Read in the csv results for use in a visualization, using Python.
  • 4. Generate a network output file in 2 formats (gdf and JSON) for use with Gephi and D3.
  • 5. Import the data to Gephi to view the network and lay out the graph.
  • 6. Export as a Sigma.js web application; tweak that output as we explore the graph.
  • 7. Use the JSON network format to build a simple D3 network diagram.

  The tutorial is intended for novices in topic modeling and is also appropriate for programmers with only a little Python or D3.js experience. If you are new or confused by Gephi, the tutorial will probably help you learn a few tricks for getting good results with it. Note that the topic modeling stage will be treated as a black box for the most part, as the algorithm is not the focus of the course.

  Install requirements (do some or all - you can follow the parts you want):http://bit.ly/1rSLgPs Feel free to ask on twitter for help, too: @arnicas

  Hide Abstract

• Visualising Data on Maps with D3.js and Leaflet

  Indira Knight (develop_for, Developer)

  Show Abstract

  There is a large amount of geolocation data out there. To be able to visualise that data can reveal connections and find the story behind the data.

  D3.js is a javascript library that helps to create online data visualisations using web technologies such as HTML, CSS and SVG. It has some great functions for visualising geolocation data. It works well with Leaflet, a javascript library to build web map applications. Joining the two together allows integration of data visualisations with maps such as Google maps and OpenStreetMap.

  This workshop will cover creating maps with D3.js and integrating D3.js with Leaflet to build a data visualisation with OpenStreetMap.

  Using USGS earthquake data two maps will be built that show earthquakes around the world. The first map will be built using D3.js and the second using Leaflet with D3.js and OpenStreetMap.

  Some of the techniques covered in this workshop are, D3.js map projections, D3.js Path Generator, linking an OpenStreetMap to D3.js and using the data to style map markers.

  This is an intermediate level workshop and will not go through the basics of D3.js or JavaScript. To get the most out of it some knowledge of D3.js and JavaScript is needed.

  By the end of the workshop participants will have an overview on how to visualise geolocation data and an understanding of how D3.js and Leaflet work together.

  Requirements

  Please bring a laptop with the following installed:

  • a modern browser
  • a local server(MAMP, WAMP or a Python server)
  • D3.js, jQuery, topojson.js, queue.js, Leaflet.js
  • a code editer e.g. sublime text, textwrangler or Notepad ++

  If you would prefer to work with an online editor you will need a laptop and the following:

  • a modern browser
  • access to an online IDE such as cloud9 IDE
  • a clone of the project from github

  The project files with data are available on github.

  Hide Abstract

Quick jump to: keynotes | regular presentations | workshops

Dinner Event

On Thursday evening there will first be a boat ride in Portsmouth harbour followed by a conference dinner in Portsmouth harbour on the HMS warrior. This dinner event is optional (extra registraion with extra charge) for regular attendees. Presenters, workshop instructors and sponsors are invited as a "thank you" for their contributions. Transportation from Winchester to Portsmouth with buses will be organized.

Source: Wikimedia Commons under Creative Commons Attribution-Share Alike 3.0 Unported license.

Please note that smoking is not allowed on board of the HMS warrior. Stilettos or other narrow heeled shoes are not allowed for your own safety and due to the damage they cause to the deck. See regulations in the HMS guest letter.