AuthorThomas Wilburn

Visualization as a civil right: how to create accessible news apps and interactives

As accessibility advocate Marcy Sutton is fond of saying, JavaScript is a civil rights issue. That’s true whether you’re building the next big web app or a dynamic chart for an article: we want our journalism to be available not just to sighted and able-bodied readers, but to everyone. Yet as interactive developers, it’s often easy to forget about accessibility–and easier still to think that the “visual” part of data visualization means it’s only for sighted or able-bodied users.

Over the last couple of years, I’ve been experimenting with accessibility and assistive technologies for interactive projects here at the Seattle Times. From that experience, I’ve come to believe that it’s not actually that hard to make sure your news apps are accessible. It’s the least we can do, if we’re serious about our commitment to reaching a wider, more diverse audience. Moreover, as Target discovered when sued by the National Federation for the Blind, inaccessible sites may violate state or federal regulations.

The following post contains a few of the lessons I’ve learned, and hopefully serves as a good starting point if you’re just getting started with accessibility on the web. I want to stress that I’m not an expert: there are plenty of other resources that you should pursue if you find this information useful, such as the Web Accessibility Initiative. If I’ve made any mistakes here, or if you’d like to share additional posts on newsroom accessibility, please let me know!

What is accessibility?

At heart, accessible design means that we want our pages to be friendly to readers who may face sensory, motor, or cognitive barriers to access. We typically think about this in terms of extremes, such as blind or paralyzed users. However, as Microsoft’s Inclusive Design team states, disability is a spectrum that almost all of us will fall under at some point due to age, injury, or context.

I like the idea of accessibility as “inclusive” design, because creating more accessible products tends to create better experiences for everyone. Closed captions may have originally been created for deaf users, but they’re useful for many people, including those who need to watch video quietly or who are learning to read. One-handed controls are appreciated by people with reduced dexterity, but also new parents and bus riders. Improved contrast benefits users with reduced vision, but it also makes a cleaner and easier-to-read UI for everyone.

For the purposes of this article, we’ll sort accessibility into three buckets:

  • Making interactive content work for blind users via a screen reader
  • Providing support for keyboard navigation
  • Ensuring sufficient contrast for low-visibility and color-blind users

Enabling and using a screen reader

Perhaps the easiest way to experiment with accessibility is by using a screen reader on your phone, since both major mobile operating systems come with voice assistance built-in. Rob Dodson from Google has some short videos that detail how to activate and use Talkback on Android and Voiceover on iOS. Once activated for the first time, you can use a shortcut to toggle the reader on and off at will, which is useful for quick testing.

Even as a sighted person, using a screen reader on a phone can be a handy skill to have: I like to use Talkback to browse on the bus or when it’s cold out, so that I can operate the phone without removing it from my coat pocket. Spending just one day a month trying some of your regular reading through the screen reader will give you a new appreciation for how difficult news sites are to navigate for blind users.

On desktops, the situation varies a bit more. All OS X machines also have access to VoiceOver, which can be activated through the System Preferences app. Windows users may use one of several programs, such as JAWS or NVDA. I tend to use the latter, which is free and open-source, since JAWS is extremely expensive.

Most desktop screen readers can be configured to show the voiced text onscreen in addition to being read, which is useful if you don’t want to wear headphones at work. In fact, one of my favorite features of NVDA is the Speech Viewer, which will log out all spoken text (and, if configured properly, will do so silently). Being able to instantly read and look back through the output from the screen reader can dramatically speed up development.

A screenshot of the NVDA speech viewer window.

Turns out it’s really hard to grab a Speech Viewer image without also leaking what you’re working on to the world.

Easy wins for screen readers

Once you have a screen reader up and running, you’ll notice that the way it handles pages is highly dependent on the document structure. This is part of why it’s important for our HTML documents to be well-formed: by using semantic tags, the browser is able to correctly announce headers, sections, asides, navigation, and other features.

Of course, if we were just building documents, our jobs would be relatively easy. Creating applications that correctly announce themselves via screen reader is a little bit more difficult, but there are some easy wins that we can get by working with the platform:

  • Don’t forget to add alt text to images whenever you can, and avoid the title attribute for any required content. Alt text should describe an image conversationally, not just restate the caption or data directly (e.g., “A chart showing an upward trend in underwater basket weaving classes.”). If an image is purely cosmetic, hide it from readers by setting alt="".
  • Unless you actually mean to link to another page or part of a document, use <button> for interactive elements instead of <a> (or even worse, <div>, which readers will simply skip). You can style buttons to look any way you want, but the screen reader will still understand that they’re controls that do something locally, instead of a link to content elsewhere.
  • In fact, you should use native controls (like <select> or <input type="x">) whenever possible. The built-in elements are well-tested, are much more compatible with screen readers, they handle keyboard input more reliably, and they support features like the disabled state, which will be announced properly. It’s almost never worth giving all that up just for a bit of styling support.

As interactive news developers, however, part of the job is building dynamic visual experiences that don’t already have convenient semantic tags. In these cases, the role attribute is your friend, as it allows you to specify the spoken meaning of a block of DOM. Setting role="img", for example, will tell screen readers that the marked tag contains primarily visual content, and shouldn’t be read as literal HTML. This is extremely useful for charts that would be difficult to describe (just remember to add an alt attribute describing what readers would see).

You can also use roles to force an immediate announcement, although you should use this rarely. By setting role="alert" on an element, the browser will immediately read its contents to the user. For less-urgent announcements, you can set the aria-live attribute, which will ask the browser to monitor an element for changes and announce them when it won’t be disruptive. ARIA (Accessible Rich Internet Applications) attributes vary in support, but it’s worth reading up on their use if you want to work well with screen readers.

Finally, a staple of designing news apps is being able to show and hide content. It’s important to be careful with how you do this, since content that’s not “visible” may still be “readable.” Long story short, keep it simple: set display: none or hidden="true" instead of using absolute positioning or opacity: 0. Conversely, if you want something to be visually hidden but spoken aloud (such as the text version of a graphical headline), using opacity: 0 or a very small clip rectangle is good practice.

Keyboard navigation

Here’s another experiment you can try: browse your favorite web page without a mouse. Your tools are the tab key (which will cycle between all links and inputs on a page), the arrows (which scroll and interact with form controls) and the enter key (for “clicking”). How tough is it to navigate your news site this way?

Readers with motor dexterity issues may be navigating your site with a clicker switch or a joystick. Those with RSI may be restricted to the keyboard. Even mouse users often use the keyboard for operating select boxes or tabbing through form fields. If you go with the grain of the platform, writing semantic HTML and using mostly built-in widgets, you’ll get keyboard accessibility for these users for free. Problems usually crop up when we start to roll our own solutions.

Here are a few easy wins to keep in mind:

  • Don’t disable focus rectangles with styles like input:focus { outline: none }. Without a visual indicator of where the current keyboard focus is, users will be completely unable to track which item is active when pressing the tab key.
  • As with site readers, use <button> instead of <a>, and try not to use <div> for interactive elements.
  • If you must use a non-semantic element for interaction, be sure to set tabindex="0" to enable interaction in “source order” (i.e., the intuitive top-to-bottom order of elements). Likewise, if you cannot use the disabled attribute, be sure to set tabindex="-1" to disable keyboard navigation on controls that can’t be pressed.
  • If you absolutely must design custom controls, do they match the keyboard behavior of existing controls? For example, the arrow keys should move between radio buttons in a group and options in a select box, and tab should change focus between controls correctly.

Visual affordances

Finally, when designing graphics we need to bear in mind that not all sighted users are created equal. Vision can vary widely, not just by disability but also by age and by context. When designing inclusively, we may want to start with contrast, color blindness, and motion sensitivity.

Contrast is simply about making sure that there’s enough difference between background and foreground elements to easily read page content. The WAI recommends a contrast ratio of 4.5:1 for normal text, but how do we work out the ratio? It turns out you shouldn’t need to: Chrome’s dev tools include an accessibility audit that will check the color of all text against its background, and warn you of any elements that do not offer sufficient contrast. The axe-core extension will also check for contrast, among other issues.

Color blindness is another pesky issue, especially when creating graphs or charts. The good news, in my opinion, is that graphics friendly to color-blindness tend to be better for everyone: they have better contrast in their palettes (so that users can tell the difference between light and dark shades), they keep the number of series to a minimum, and they encourage us to explore using pattern fills or other techniques. To check my interactives, I use Color Oracle, a free program that simulates different kinds of color blindness. There are also built-in equivalents on both major mobile operating systems.

Finally, in a post-Snowfall age, it’s popular to have big animated transitions on our pages. I’m as guilty of this as anyone (or even more so). But keep in mind that for many users, these big, complex motions may trigger vertigo or other vestibular disorders, or just make readers feel a little queasy. If possible, check for the prefers-reduced-motion media query (currently supported in Safari), or offer a checkbox that disables/shortens large-scale animations for users.

A case study: coal strip mining

Let’s take a look at a recent Seattle Times graphic to see what kind of effort is required for an accessible image. This embedded graphic walks readers through the process of mining and burning coal for power in Washington State, using a pan/zoom SVG view and a “stepper”-style interface. We would normally do this kind of graphic as a scroll-triggered effect (which would be more accessible, since then it’s just a document with a background image), but embedded pages don’t have easy access to scroll position, so I’ve gone with a more manual process.

Luckily, our graphic is already relatively high-contrast, and our text is simple black-on-white. We also don’t have to worry about color-blindness, since the palette isn’t particularly important. We can adapt it for people with reduced motion preferences (on supported platforms) by adding a quick media query check in our JavaScript, and reducing the animation timing accordingly:

var timing = window.matchesMedia("(prefers-reduced-motion)").matches ? 10 : 1000;

We’re not using any custom controls, but the buttons for the next and previous slide are actual <button> elements, and our code sets the disabled attribute at the first and last slide. That means that they’ll be skipped in keyboard navigation but announced in screen readers (I’m hiding them using opacity: 0 to keep them available to accessibility tech, on the principle that it’s bad practice for UI to appear and disappear unpredictably).

Finally, we need to make sure that screen readers handle the image and interaction correctly. I’m loading the SVG content using a custom element, so I’ve added role="img" to that loader, along with alt text that describes the purpose of the image (“A landscape view of the Colstrip plant”).

Our buttons are already accessible, but how do we make sure that the screen reader is updated when the text changes, especially when there’s a little slide transition included? The answer is to use the “alert” role, which causes the content to be read immediately in response to UI interaction. We set the role on the new text, and remove it from the div that contains the previous caption:

incomingCaption.setAttribute("role", "alert");

This usage is not perfect on all platforms–Talkback on Android announces the alerts twice, for some reason–but it means that when the reader triggers the buttons for a step transition, it will immediately read the caption. Blind users can now use the interactive in pretty much the same way as sighted users: they won’t see the animated transition, but they’re capable of stepping through the captions and hearing each one in turn, and they don’t get lost in the SVG document tree.

Converting this graphic to be accessible did not require a huge amount of effort. There’s some up-front cost involved in learning how to set up screen readers and other tools, but that’s only paid once and will be amortized over the lifetime of any other accessible graphics I create. For the benefits to our community and readers, this is certainly a cost I’m willing to pay.

Farewell, Vanessa!

I’m proud to announce that Vanessa Martínez is leaving us for the digital team at the LA Times. Joining us in mid-2016 as a producer, Vanessa started working as a developer with the Interactives Team this year and quickly became a valuable asset in our constant battle against deadlines. Among other things, she’s responsible for tracking Trump’s first 100 days, gave readers a 360 tour of the new Pike Place Market, and shouldered much of the load for the infamous Profanity Peak wolves.

She’ll probably be chagrined that I’m writing this, of course. Vanessa is one of those talented people who almost seem embarrassed by their own competence, and I know that she hoped (despite all indications to the contrary) to sneak out unnoticed. But she should have known that I couldn’t let her go back to her hometown without raising some kind of fuss.

As a producer, Vanessa quickly gained a rep for being capable and thoughtful, with great news judgement and technical dexterity. She’s also known for her sensitivity and watchfulness around delicate subjects, like our coverage of race and gender. She’s quiet, but there’s steel behind that friendly smile, and even in the rambunctious hub environment, people trust her.

A good web producer is a rare and wonderful thing. But about a year ago, Vanessa decided on her own to pick up more digital skills, by pitching and assembling projects with different teams in the newsroom. She started by providing data for interactive graphics, but quickly graduated to doing the development herself: a database of Seahawks injuries, the Trump tracker, and of course, our confidential news tips page. By April, she was sitting with us in the graphics department and teaming up to design big stories like the Mariners preview section and the Seattle mayor quiz. By July, we’d convinced her to eat lunch with us sometimes, and even to go home on time.

It’s always a bittersweet pleasure when someone like Vanessa leaves: we’re sorry to see her go, but happy we could play a part in her development (pardon the pun). She proved herself a valuable and beloved team member in the brief time she was here, taking on any and all challenges with a level head and nary a complaint. Congratulations and best of luck, Vanessa! We hope you’ll remember us fondly, probably while stuck in traffic, from LA.

Jaime from Broad City gives us a slow clap

Wolves, WSU, and WebGL: presenting the Profanity Peak pack

Whenever Lynda Mapes comes to the visuals department with a story idea, we sit up and take notice. So when she dropped by a few months back to talk about a story she was working on, about the conflict between wolves and cattle ranchers in Eastern Washington, we immediately started thinking about how to bring it to digital life. Last week, her story on WSU researcher Robert Wielgus went live with our WebGL-powered explainer embedded in the middle.

Here’s how we brought the story of the Profanity Peak wolf pack to our readers.

The hills are alive

The first step was to figure out where our story took place. We had a post-action report from the Washington Department of Fish and Wildlife that listed details on each cow attacked, including the latitude and longitude of the attack. A separate presentation included a heatmap of wolf activity from their GPS collars, which gave us some idea of their territory.

An incident report from WDFW’s post-action document.

Based on that information, I pulled the digital elevation maps from the University of Washington’s Earth and Space Sciences department. To capture the area we were interested in, I stitched together eight elevation maps using QGIS and VTBuilder. The final output of this was a JPG heightmap, where higher pixel values meant higher elevation.

Viewing the heightmap data in QGIS, with animal attack locations as dots.

But of course, having a heightmap doesn’t do any good if you don’t have an effective way to present it.


WebGL was first introduced back in 2011, with somewhat shaky support in Chrome and Firefox. An adaptation of the OpenGL ES 2.0 API, it lets web pages directly access the accelerated graphics hardware on a computer or smartphone, providing powerful tools for games and 3D visualizations.

Every WebGL program consists of three parts. First, there’s the JavaScript code that loads data and issues drawing commands. In the case of our Profanity Peak story, a script reads through the pixel data of the heightmap and converts it into a mesh of vertexes in 3D space, joined into triangles. Triangles are commonly used in 3D graphics because they’re the simplest possible surface shape. In addition to XYZ coordinates, each point also has a “normal vector” that represents the direction pointing away from the surface, which we can use for lighting.

Once the JavaScript program sends the mesh to the graphics card for rendering, the other two parts of WebGL kick in. These are the vertex and fragment shaders, which convert triangles into actual onscreen imagery.

The vertex shader is responsible for converting 3D points into the 2D canvas. To make that happen, we compute a combination of transformations that represent the camera’s position and orientation in space, and the vertex shader runs each set of coordinates through that transformation pipeline.

Once the mesh is placed in view, the fragment shader runs for each pixel that’s in a visible triangle to determine its color. Our fragment shader combines a number of factors to determine the landscape’s color:

  • Surface direction (the normals we computed earlier) in relation to the global lighting
  • Elevation (lower coordinates are darker and greener)
  • Fog (distant pixels are less saturated and lighter)
  • Some random noise dithering, to break up visible triangle edges

Viewing the landscape in “wireframe mode” for debugging.

Let’s say that a 255×255 landscape grid fills the viewport (possible, for some of the camera positions in our page), which is conservatively sized at 800×600. That means the vertex shader is computing the position of 65,000 vertices (combined into 130,000 triangles), and the fragment shader is running up to 480,000 times! Luckily, modern graphics processors are tuned for massively-parallel tasks, and can typically render this scene at 60 frames per second for smooth movement. However, if your computer still struggles, we added a checkbox that halves the resolution and makes it run much faster.

In previous 3D projects, we had used Three.js, a library that papers over the sharp edges in the raw WebGL API. For this section, I decided to tackle the code myself. Although the results are gratifying, and writing shaders can be a lot of fun, the boilerplate for WebGL code is opaque and unlike any other web task. If you’re thinking of building a similar scene, our code is pretty well organized, but you may also want to look at the learning repo I built while I was prototyping this project. I recommend the experience: it’s not as hard as it seems, especially if you stick with a fairly simple rendering model (as I did).

Literal points of interest

As mentioned earlier, we wanted to add two layers of information: the recorded activity area for the wolves, and various individual points of interest (animal attacks, cattle drop-off point, the wolves’ den, and the ranchers’ salt lick). We were able to get this information from public information and from Lynda’s sources, either directly as lat/long coordinates, or on maps detailed enough to place their location.

For individual locations, we simply added the coordinates to our JavaScript bundle, scaled them to match the bounds of the map, and then passed those coordinates to the renderer as “points.” Typically employed for particle systems, WebGL treats coordinates in gl.POINTS mode as billboard sprites: they always face the user, and are configurable in size. A separate shader program is used to draw semi-transparent PNG files as the texture for these sprites, thus placing our floating icons around the map.

The completed height and heat map.

To load the wolf activity layer, however, we piggy-backed on data that we were already loading. Our heightmap image for the landscape included three values per pixel (red, green, and blue components), but we were only reading from the red channel for elevation. In Photoshop, we split the channels, keeping elevation in the red component, and using the blue component to store our heatmap. Then, during mesh generation, we read out those pixels and added it to a separate data buffer for the fragment shader. Depending on the runtime configuration, a highlight color is mixed in for vertices that contain wolf activity.

Our camera system probably deserves a brief mention at this point, since it doesn’t help to place points of interest if you can’t look at them. In a serious 3D simulation, such as a big-budget video game, the camera is often based on a kind of math called quaternions. Unfortunately, higher math is not my strong point, so our camera is a cheat: we store its location and its target location, then compute a “look-at” matrix using the glMatrix library, which we also use for various coordinate transformations. If we were giving users direct control of the camera, this would probably be a recipe for failure, but it works well in our cinematic style.

Leave it on the page

All of this technical detail is interesting, but how did we choose to make use of it in the story? Originally, we had intended to treat the landscape view as a strict timeline of events. We’ve done that before, such as for the Collateral Damage reporting on Washington fire line construction. It’s a tried-and-true organizational method.

But when Lynda’s story came in, a simple tick-tock of events felt choppy compared to the article’s prose. More importantly, the article text was already presenting the sequence of events for the reader — duplicating it in a blowout graphic seemed gratuitous. Over the weekend, I experimented with moving Lynda’s text directly into the graphic, side-by-side with the landscape. To my surprise, it was a great match!

In print, the piece is slightly different, accompanied by a static map instead. As far as I’m aware, this is the first big story that we’ve run with significant differences to the article text itself depending on where it was published, but I think that’s a good thing: it opens up new avenues for innovation online, while giving us a chance to still tell the best possible story for our print readers. I hope you’ll enjoy it wherever you find it.

How we adapted the LA Times map maker

When news breaks, The Seattle Times faces a common problem: we want visual elements for the story, but photographers may not be on the scene yet. For this, we’ve often turned to maps from the graphics department, but these are labor-intensive to build, even with our fantastic crew of news artists. Services to generate maps are expensive. What’s a small, penny-pinching newsroom to do?

My first attempt at solving this problem was a simple Leaflet-based app. The styling wasn’t great, and due to browser security restrictions, people still had to manually screenshot the window in order to grab an image. It was, in short, a total hack. That’s why I was thrilled to discover the work that the LA Times Data Desk has been doing with their Web Map Maker project. Using OpenStreetMap data and vector tiles from MapZen, their tool is capable of rendering directly to a canvas, and then saving that image–no screenshot required!

I forked the project pretty much right away, and started messing around with it. Eventually, an evening in Sublime turned into a substantial rewrite, with two main goals: to match Seattle Times code style, and to simplify it by taking advantage of new browser features. In this post, I’d like to walk through some of the changes that we made–not as a criticism of the LA Times’ work, which I’m still in awe of, but as a way to explore how modern JavaScript can make a real-world application simpler and easier to maintain.


The first thing I noticed about the web map maker was the downloadIMG() function, which does the actual image capture. At more than 100 lines, it’s a monster, but a necessary one: it combines canvas rendering for the base map, html2canvas to grab popups and other map elements, and a chunk of custom code to draw any SVG elements loaded from GeoJSON. Web maps are complicated!

Compounding this problem is that, like a lot of legacy JavaScript, the code is callback-heavy. downloadIMG() becomes more and more indented as it moves through various stages, which is hard to maintain. Untangling this rendering process made a lot of sense as a starting point for the refactor, and using async/await was a natural method for taming those wild callbacks.

The async and await keywords are new to ES2017, but you can use them in evergreen browsers like Chrome and Firefox now. They’re syntactic sugar for the then() method of JavaScript Promises: inside of a function marked with async, you can “pause” the function using await instead of passing a callback to then(). For example, this:

var asyncOperation = functionThatReturnsAPromise();
asyncOperation.then(function(result) {
  return doSomeWork(result);
}).then(function(nextResult) {
  return doMoreAsyncWork(nextResult);

can be simplified into this:

var firstResult = await functionThatReturnsAPromise();
var secondResult = await doSomeWork(firstResult);
await doMoreAsyncWork(secondResult);

At each await, the browser converts your function into a callback for you, even in the middle of an expression or a variable assignment. The resulting code no longer requires all the function boilerplate and extra indentation. It can be “read” as synchronous, even though in reality it might take significant time to execute.

Breaking downloadIMG() into several promise-based functions made it much easier to understand and debug, since skipping a step became as simple as commenting out an await-ed function call. The new code has actually gotten a little longer after being broken up into sub-tasks, but the readability is much higher now. I was also able to move it out into its own module, which strengthens the distinction between logic and UI in the app structure.

No jQuery

jQuery is great, but at the Times we have a policy of avoiding it unless we need at least three of its hard-to-shim features, like JSONP requests or event delegation. Modern browser APIs have learned a lot from jQuery, and integrated many of its features, to the point where you might not need its help.

The original map maker code used jQuery extensively, but most of the cleanup was pretty straightforward:

  • perform DOM queries with a call to document.querySelectorAll(), aliased to $
  • use classList instead of addClass() and removeClass() calls
  • addEventListener() instead of on()

A common pattern of jQuery is that it acts on all elements in a selected query, whether there’s one or more (or even zero). ES2015’s arrow functions aren’t quite that convenient, but they do provide a close analog:

// jQuery version

// qsa() returns an array from document.querySelectorAll
qsa(".toggle-element").forEach(el => el.classList.add("enabled"));

It’s a little more clumsy, but it saves us the cost of loading 32KB of code for jQuery, which contributes to faster page load. jQueryUI adds another 55KB, most of which is unused–the project only needs the resize functionality for the map’s drag handle. I write a small vanilla JS module to do resizing instead, dispatching a custom DOM event whenever the element’s dimensions changed so that we could continue listening in the main module for changes.

Eliminating ~90KB of code may not seem like a lot, but on lower-powered devices, that can shave ~90ms off the page load just from the cost of code parsing and module execution. It also means we no longer load the CSS required for jQueryUI (which, ironically, the original app did not use anywhere). And speaking of CSS…

Flexbox instead of Bootstrap

This is another technique that’s becoming conventional wisdom as browsers improve: you might not need Bootstrap! The Flexbox specification for CSS lets us define a page in terms of vertical or horizontal “flex containers,” and force the children of those containers to stretch or align on either axis (finally, easier vertical centering is here). The original map maker used Bootstrap for some button group styles, but otherwise didn’t really rely on it. Swapping Flexbox in for positioning, and styling those buttons manually, turned out to be a pretty easy fix.

Destructuring and for/of loops

Finally, although it’s not a big change, I did take advantage of destructuring assignment throughout the app. For example, when pulling the width and height out of the resizer’s event:

var { width, height } = event.detail;

Or even when importing modules from my async-based loader:

var [ qsa, resizer, render ] = await install.batch("qsa", "resizer", "render");

And when combined with the new value-oriented loops and iterables in ES2015, it eliminates some boilerplate from checking the current dimensions against existing size presets:

for (var [w, h] of Object.values(sizePresets)) {
  if (w == width && h == height) custom = false;

This kind of unpacking behavior is common in Python or PHP, so it’s a relief to finally have it in JavaScript. It reduces the assignment code you need to write, and makes it clearer which properties you’re going to use from a given object. In some cases, it can also make tight loops faster, since local variables are quicker than properties accessed through the dot operator.

Final thoughts

Internal tools like this are a great chance to play around with new browser features, because we can set stronger minimum requirements for users. However, you can also publish code that uses many of these new JavaScript toys if you’re willing to set up a transpiler like Babel in your build process. We’ve integrated transpilation as a part of our standard news app template at the Times, and it has made a lot of our code much more pleasant to read and write. I highly recommend giving it a shot.

I’d like to close by again noting how incredibly grateful I am that the LA Times decided to open-source their tools, and that LAT map guru Jon Schleuss was so gracious about sharing with us. We’re actually still working on the project styles, and hoping to use it in production soon. You can check out the repo and watch our progress here.

Unfortunately, it’s likely that I’ve refactored so much that it’ll be difficult to pull changes back into their master branch. I hope that by spelling out the changes in this post, it’ll be easier to figure out which parts are most useful, and which ones are just me showing off. Projects like this really drive home just how important open-source development can be for the news nerd community, since we’re much stronger as a community than we are as individual newsrooms.

Farewell, Audrey!

I’m proud to announce that Audrey Carlsen is headed to the New York Times to join their graphics team. I’m saddened as well, of course: Audrey has been a valuable member of the Interactives Team here at The Seattle Times for two years now. She’s responsible for many of our most popular and innovative projects, including the Seahawks personality quiz, the animated history of Ravensdale, and (last, but certainly not least) Under our skin. She also lent her reporting talents to the paper, with pieces on growing up multiracial in Seattle and the “blue wall” of Washington politics.

Like a lot of data journalists, Audrey came to the team from a non-traditional background, without formal degrees in journalism or computer science. She flirted with a career in medicine, turned her hand to science blogging for public radio, then returned to Seattle to pick up web development skills at the Ada Developer Academy bootcamp. A loss for medicine was ultimately our gain, as she hit the ground running here at the Times and never looked back.

Audrey created not only a collection of great digital journalism, but also activism for a more inclusive, community-oriented newsroom. She has been a champion for diversity in our coverage, and a thoughtful listener for concerns both inside and outside of the Times. As a member of the Asian American Journalists Association, she helped assemble statistics on newsroom diversity across the Seattle area. Instead of taking her job for granted, Audrey used that opportunity to advocate for less-attended voices. I have been, and will continue to be, inspired by her example.

But enough of the grand plaudits and somber encomoniums: Audrey has never given up hope for an office corgi. She has a big laugh you can hear clear across the room, and is aggressively unamused by regular expression syntax. She makes a hell of an ambrosia, and she always added the necessary padding to my CSS. She’ll be missed, but great things are no doubt in store from her. I hope you’ll join me in thanking Audrey for her many contributions to The Seattle Times, and wishing her luck in the Big Apple.

Play her off, Keyboard Cat.

Roaring to life: How we built our Elwha watershed package

When Lynda Mapes, our environment reporter, came to us with the story of how the Elwha watershed had been recovering after the world’s largest dam removal, we knew we wanted to present it in a way that would make a splash. The final result (GitHub repo) drew heavily on talents from all over the newsroom, ranging from the graphics team’s hand-drawn art to Lynda’s beautiful prose. On the digital side, there were three interesting JavaScript components that deserve more explanation: the watercolor animations, scroll-triggered effects, and FLIP transitions.

You otter be in pictures

Black and white river otter sketch

Black and white base layer

Full color otter sketch

Color “paint” layer

We knew going into this project that we would want to feature the beautiful hand-drawn images of various critters in the Elwha watershed. The final technique is an adaptation of the “lead dust” effect that we used in our Loaded with Lead investigative report. Instead of a single texture that’s used to “reveal” hidden text, we split the sketches into two layers: one base image that only contained the black channel for shading, and another full-color image that gets painted on top. By using intentionally-imperfect circles as our “brushes,” and expanding these circles from randomized positions, the resulting “watercolor” effect helps add a simple splash of life to the static images, without feeling gratuitous or jarring.

Ultimately, what makes this effect possible (and performant) on a range of devices is the canvas createPattern() method, which takes an image and generates a fill pattern object. Most of the time, this is used with smaller images to add texture to a filled path, so that you don’t need to draw and clip the pattern by hand. But in this case, the pattern is the same size as the canvas itself, meaning that we can use this to copy pieces of one image into the canvas in irregular patches–perfect for our watercolor wash. (source code)

Scroll me maybe

Another key part of the presentation is that many animations trigger as they become visible, rewarding readers for scrolling down the page. This is a pretty typical part of news interactive UI these days, but it’s worth looking at how to do it without causing jank.

Our secret weapon for many scroll-triggered effects at the Seattle Times is getBoundingClientRect(), one of the many useful DOM methods that (surprisingly) originated in Internet Explorer. When called on any element, it returns an object with the coordinates for that element relative to the viewport. In other words, it tells you where the object is displayed right now, without having to walk up the DOM for offset values or check the current scroll position. This leads to easy visibility tests like this one:

var bounds = element.getBoundingClientRect();
if ( < window.innerHeight && bounds.bottom > 0) {
  //element is onscreen in some form

getBoundingClientRect() is fast and easy to use for a variety of purposes, and it’s well-supported everywhere. While browsers continue to work to make scrolling smoother, it’s still important to do as little work on scroll listeners as possible, especially when the page may contain many of them (as the Elwha package does). We created a unified scroll notification queue for this project to try to keep the load down. Which brings us to our last animation feature…

FLIP and forget it

I’m a big fan of Paul Lewis’ FLIP animation technique, which leverages the browser to perform smooth animations with as little JavaScript as possible. It’s worth reading the article for more details, but the acronym spells out the basic steps: get the first position, move to the last position, invert the difference through the use of transforms, and then play by removing the offsets.

Elwha feature section

One of our animated feature sections. The animals on the right swap into the main section with a smooth expand effect when clicked.

The nice thing about FLIP is that it’s not only buttery-smooth, but it also adapts well to various lower-level page changes. In this case, when a user clicks on one of the sidebar items to swap between featured animals, we actually move the entire block between two different container elements for styling purposes. But because FLIP works entirely via on-screen coordinates and transforms, none of that  matters. We only have to know the first and last positions to create the transform, and those are easy to get via our old pal getBoundingClientRect().

Although the code for FLIP isn’t hard to write, it comes up often enough (see also: EB-5 visas, teacher pay, and modern dating) that we’ve added a small module to our news app template to make it even easier. The function takes two arguments: an element that you want to animate, and a callback that’s executed between measurements. Just make whatever changes you want during the callback, and the module will figure out the difference and apply transforms to blend between the two. Feel free to take and adapt for your own purposes!

18 holes in 150,000 polygons: A topographic map for the U.S. Open

This year’s U.S. Open is being held at Chambers Bay, just south of Seattle. It’s a unique course for many reasons: its fescue grass changes the way the ball bounces, its wild elevation shifts and terrain require creative approaches to each hole, and there’s only a single tree on the entire course. We wanted to let readers tour Chambers Bay right from their web browser, so we got in touch with Robert Trent Jones II, the course architect, and asked if we could use the elevation data.

Luckily, they said yes! Unluckily, they provided the elevations as a rather hefty 15MB AutoCAD file. We didn’t have an AutoCAD license, but a trial version works for 30 days, which gave us a deadline on figuring out how to convert it to something more web-friendly.

Chambers Bay as viewed in AutoCAD using the 5-foot elevation contours

Chambers Bay as viewed in AutoCAD using the 5-foot elevation contours

The second problem was that the file didn’t contain actual polygons, which we would need to run it in a browser. Instead, it was a set of unconnected contour lines. They were at the right height and looked great, but didn’t form the shapes that a computer could use. I looked into several solutions — most of which were miserable failures —and was about to try writing an AutoLISP script to extract elevations into a file when an architect friend suggested using Google’s SketchUp. Some simplification and use of the “drape” function later, we had ourselves a mesh.

The course mesh as generated in SketchUp

The course mesh as generated in SketchUp



(Incidentally, SketchUp starts every new project with what looks like Stan Lee standing awkwardly in the middle of an empty green plane. This isn’t related to our project at all, I just think it’s weird.)

For this project, we used the industry-standard three.js library for creating our WebGL scene. In addition to handling the camera and object positioning, three.js made it easy to put together the various props (flags, golf balls, tree) that we needed. It also has a great web-based editor that I could use to prototype object placement and try out various model formats.

Once we had the landscape loading, our next job was to texture it by applying color from an image to make it look real. Unlike most 3D models, we didn’t have coordinates at each vertex for the texture position (nor did we have a texture to use). But we did have a PDF of the AutoCAD model prior to mesh conversion. Our graphics team was also struggling with the USGA course diagrams, which didn’t include all the hills and other elevation features. Graphic designer Garland Potts and I worked out a deal: she used our CAD diagram to create a more detailed print graphic, then handed back a shaded and textured image for us to apply to the landscape.

Before and after images of our texture map

Before and after images of our texture map

I wrote a custom WebGL shader to “project” this image down onto the terrain, then added lighting and some dithering to make up for the low resolution. This approach to texturing wouldn’t be appropriate for anything with a lot of vertical surfaces, but the relatively gentle slopes of Chambers Bay are more tolerant.


Finally, over about a week, I placed the tees and holes in the landscape, then set up camera positions for each one. Every hole gets a flyover tour, which usually just consists of moving the camera up and over from tee to green. For several, however, we hand-coded camera movements to draw attention to course features, or to follow the path that the ball would have to take.


Looking back at the project, there are several improvements we’d like to make. The landscape file is enormous, and could probably be culled to reduce size without removing visual detail. We also never added a free camera to the experience, and it would have been nice to have more information about the ideal path of the ball. But overall, I’m very happy with how it turned out.

More importantly, I’m really looking forward to applying this to other projects, where being able to explore something spatially is an asset to our storytelling. For example, stories about large-scale redevelopment, our local mountain ranges or distinctive machinery (see: tunnel digger Bertha) are all excellent potential 3D experiences. Now that we have more experience with the 3D workflow, it’s just another technique in our repertoire for data journalism.

May day mayhem: how we covered Seattle’s protests

Although I wasn’t here in Seattle for the 1999 globalization protests, or the 2012 vandalism, it’s hard to miss the city’s regular May Day “festivities.” About a week ago, the digital team started thinking about how to track and collect information from reporters as they followed activities in the city. A map is a natural way to collect this data, but I didn’t want to manually manage geotagging and attaching media. Was there some way to pull this information directly from social networks?

My first stop was NPM to see if there was a module for Twitter streams, which (as it happens), there was. Hooking into the streaming API gave us real-time updates with a variety of filters available, including geotagged location and text search, while using the regular REST API let us backfill for tweets we missed and look up users for more information.

We’re wary about relying on user content anyway, but it quickly became clear that most people don’t enable location services on Twitter, and even fewer use the “precise” option, which must be re-enabled for each tweet. Clearly, we couldn’t just rely on the general population to feed our map. Our new plan was to teach reporters and photographers how to tag their locations, and then follow a real-time stream of whitelisted accounts.

I quickly put together a map-and-stream prototype to demonstrate that the concept was feasible, and during our planning meeting I fired off a quick post from a temporary test account. Luckily, the process worked, and immediately a dot appeared on the map with this picture of our charismatic digital and photo staffers:

One advantage we had in quickly assembling this map was our leaflet-map component, which assembles a map from a domain-specific set of custom elements. Because it handles setting up the Leaflet instance and populating it from markup, I could output the initial state of the map straight from our HTML templates (including zoom, position, tile layers, and map markers) instead of having to write error-prone initialization code. The same JSON file that feeds that template is also uploaded to S3, and client-side code checks it every 15 seconds for updates, so readers don’t have to refresh the page. In fact, the interactive team watched the march’s progress all day, just by leaving the page open.

It was important for readers to be able to instantly see where the action currently was, and how the marches moved across the city. We took advantage of the fact that we run JavaScript on both the client and server to share the aging algorithm between the two, and then set a class on map markers with the result. Newer tweets are more saturated, and those with video got a different color to differentiate them from text and images.

If you’re interested in putting together your own Twitter map, feel free to check out the source code for the map on GitHub. It’s based on our news app template, but with an additional index.js script that connects to Twitter and re-runs the build whenever there are updates. We also use the sqlite3 module to store tweets between server restarts, which is something we haven’t done before. Integrating a database works well, but locks us to a single machine for deployments.

While I’m mostly happy with our visualization, I think there are many improvements we can make, and a project like this is a great way of learning where we need to improve the leaflet-map map element and other in-house libraries. For example, I want to be able to link tweets in the stream with dots on the map, which requires the ability to set attributes on the markers beyond class names. I’d also like to be able to filter both dots and stream by reporter and time, so that readers can “replay” events for a better sense for their movement over time.

Another limitation that we didn’t have time to work around is the problem of Twitter video, which the service keeps deeply inside of its walled garden. Although video has been embeddable on the service for most of this year, it’s still not exposed via the API (it sends down a thumbnail picture instead, and there’s no indication that it’s different from any other photo). We worked around this problem by manually tagging tweeets with #video, coloring those dots differently, and then linking the thumbnail directly to the tweet, but it’s an inelegant solution at best.

Still, I’m very pleased with how the map turned out, especially given that we put it together in only about two days — that’s coding under pressure! More importantly, it wouldn’t have been possible to do, or nearly as amazing to watch, without the fantastic work of the reporters and photographers who fed it with their coverage of the event, risking police flashbangs, teargas, and pepper spray to do so. We’re incredibly thankful to @seattlesullivan, @pgcornwell, @seaclarridge, @stevemiletich, @stimesmcarter, @katherinelong, @evanbush, @eriklacitis, @jbroomseattle, @mikelindblom, @jim_brunner, @deleon_times, @gina_cole_, @sjgtimes, @sringman, @deanrutz, @bettinahansen, @lindseywasson, @laurenfrohne, @kgcotterill, @corinnechin, @gawlowski, and @colindilt for all their help.

Wanted: News Apps/Data Summer Intern

The Seattle Times is looking for a summer intern to work with the news apps team at the intersection of computer-assisted reporting and interactive projects. We write scrapers for web sites, make visualizations and work with the newsroom to turn reporting into dynamic online experiences. Interns will partner with developers, designers and reporters on several small projects, and gain familiarity with our cutting-edge tooling and workflow process.

Just in the past few months, we’ve exposed vaccination rates for Seattle schools, invited readers to share their Super Bowl predictions and mapped the many dogs of Seattle.

Applicants should have some prior programming experience (JavaScript preferred), and should know HTML/CSS. Knowledge of Excel and/or SQL is also valuable. The internship will run for ten weeks and is a paid position. Please apply through our job board, or contact for more information.

Only occasionally dysfunctional, always fun: Join developers Audrey Carlsen and Thomas Wilburn and digital editor Katrina Barlow at The Seattle Times.


Tag Soup

Over at Source, the OpenNews features blog, we’ve got a piece up today on how we used custom elements in our election coverage, as well as our most recent investigative piece. Check out Tag Soup for more information and plenty of links!