National drug overdose epidemic

 Animation, Drugs, Health, maps  Comments Off on National drug overdose epidemic
May 262016

Drug overdose epidemic

Nadja Popovich for the Guardian delves into America’s drug overdose epidemic, starting with an animated map that shows changes from 1999 to 2014.

On initial look, the map looks like your standard county map, but there’s a small wrinkle in the design that makes the geographic spread over time much easier to see. The switch in the top right corner, to toggle between 1999 and 2014, looks like any other. But instead of just a quick flip between 1999 and 2014, the map shifts with annual data, so you can see a smooth transition instead of an abrupt contrast.

Other options, like small multiples or a scroll bar might have worked as an overview, but this route brings focus and eliminates much of the guesswork.

Very nice.

Tags: , , ,

Bede: The Greatest Hits

 digital scholarship, manuscripts, Medieval, Science  Comments Off on Bede: The Greatest Hits
May 262016
On this day in AD 735 the Venerable Bede died in his monastery of Wearmouth-Jarrow in Anglo-Saxon Northumbria. Bede is most famous for his Ecclesiastical History of the English People, and is often affectionately known as the father of English history. However, this text was written at the end of...

Release Notes for Safari Technology Preview 5

 Uncategorized  Comments Off on Release Notes for Safari Technology Preview 5
May 262016

Safari Technology Preview Release 5 is now available for download. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. Release 5 of Safari Technology Preview covers WebKit revisions 200418–201083.


  • Corrected the entropy of Math.random() for the first two invocations (r201053)
  • Corrected sticky RegExp handling when backtracking alternatives with dissimilar match lengths (r200946)
  • Fixed ES6 site compatibility when is inferred from property names (r200423)
  • Sped up ES6 Array iterators between 4x to 6x (r200422)
  • Made the Object constructor be aware of by storing the target’s prototype to the newly created object’s prototype (r200421)
  • Fixed calls to getters and setters on super being called with wrong this object (r200586)
  • Improved error messages for accessing arguments.callee and similar getters in strict mode (r200694)
  • Made TypedArray.prototype.slice use the byteLength of passed array for memmove (r200667)


  • Fixed the cascading order for !important properties in ::slotted and ::host rules correctly (r201073)
  • Added color-gamut media query support for wide gamut displays (r201065)
  • Made Web Fonts only download when characters are used in its unicode-range (r200601)
  • Restored legacy parsing of color attributes with 4 and 8 digits (r200501)
  • Corrected how transitions behave when auto values are used (r200622)
  • Unprefixed -webkit-cross-fade() (r200888)
  • Corrected cross-fade() rendering to match expectations (r200889)
  • Corrected how prefixed and unprefixed variants in CSSStyleDeclaration are handled (r200769)
  • Stopped attempting to compute min/max width for replaced elements with no intrinsic size (r200486)
  • Unprefixed CSS Grid Layout properties (r200510)
  • Fixed static position for positioned CSS Grid items (r200572)
  • Corrected parsing when just using span as a grid-line value (r200755)
  • Implemented CSS Grid auto-repeat computation (r200618)

Web APIs

  • Started blocking Geolocation API calls on pages served over insecure connections (r200686)
  • Made NodeList iterable (r200619)
  • Added support for title attribute tooltips inside Shadow DOM content (r200923)
  • Stopped retargeting when an event bubbles up from an assigned node to its assigned slot (r200464)
  • Enabled IndexedDB in Web Worker scripts (r200697)
  • Fixed IndexedDB transactions so they can’t be committed or aborted twice (r200598)
  • Started propagating user gesture state across postMessage boundaries (r200908)
  • Aligned window.scroll(), scrollTo(), and scrollBy() with the CSSOM spec with support for the options argument (r200907)
  • Made all scrolling height and width values be integral rounded (r200915)
  • Added support for ArrayBufferView in the CSS Font Loading API (r200921)

Web Inspector

  • Hook up ShadowChicken in the Debugger tab to properly show tail call deleted frames (r200981)
  • Made let and const work as expected in Console evaluations (r200533)
  • Improved organization of the Debugger tab sidebar (r200566, r200600)
  • Added Object Graph view to heap snapshots and removed the Summary view (r200474, r200517)
  • Fixed sites that relied on putting custom properties on console.prototype (r201022)
  • Improved performance of filtering large timeline recordings (r201047)
  • Made Inspect Element and element selection work with Shadow DOM nodes (r200539)
  • Fixed the start times in the Frames timeline data grid (r201082)
  • Started persisting breakpoints in scripts named via //# sourceURL (r201019)
  • Fixed the scrollbar covering the last column in data grids when always showing scrollbars (r200962)
  • Fixed Computed Style so it no longer shows both prefixed and unprefixed variants of properties (r200952)
  • Made the Call Trees view in the Timelines tab filterable and hide it from views that are not filterable (r200708, r200873)
  • Started showing in-progress message in timeline views that do not show data until the recording finishes (r200573, r200594)
  • Improved performance of the Console when it tries to render thousands of messages at once (r200471)
  • Fixed filtering by duration in the Frames timeline view (r200809)
  • Fixed loading of //# sourceMappingURL with a relative URL (r200806)
  • Improved console.count() to better match other browsers
  • Improved performance of the Timelines tab by profiling Web Inspector with Web Inspector (r200740, r200745, r200773, r200779, r200949)


  • Made media elements not pause right away when removed from the document (r200431)
  • Started returning a Promise from (r200638)
  • Stopped updating media duration at playback end while seeking (r200675)


  • Fixed case matching against the path portion of CSP source expression URLs that ends in a forward-slash (r200445)
  • Corrected a CORS check what was sometimes incorrectly failing for media loads (r200493)


  • Stopped restarting a resource preload if there is already one pending for the same URL (r200630)


  • Media controls are now keyboard accessible along with other Shadow DOM elements (r200520)

Bug Fixes

  • Fixed large animated GIFs not animating until the last frame on slow networks (r200939)
  • Fixed Zoom In and Zoom Out on PDF documents (r200611)

The Scrollytelling Scourge

 Uncategorized  Comments Off on The Scrollytelling Scourge
May 262016

Scrollytelling is a common way of interacting with stories these days. Scroll down and the story unfolds! Except it’s often awkward, brittle, and gets in the way.

The Age of Scrollytelling

Scrolling is a funny thing. It was long considered something people rarely did, and many news organizations will still talk about stories being “above the fold” when they’re visible on most people’s screens without scrolling. But the advent of scroll wheels on mice, scroll gestures on trackpads, and of course touch screens on phones and tablets, has turned scrolling into something everybody does without even thinking about it.

Scrollytelling takes this a bit further by assuming that people would rather scroll (or swipe) through a story – hence the term – than hit buttons to advance through a story. Rather than having to click a button on a stepper, you smoothly sail through the story with your scrolly finger.

Except it doesn’t work. Let me count the ways it goes wrong.

  1. Continuous scrolling through a story with discrete steps. Let’s take the very cleverly done What’s Really Warming the World?: It presents a series of questions and answers them. Each question has a little animation, which is continuous. But the steps between the questions are discrete. Scrolling is continuous. It doesn’t match the way the story is told. A simple stepper would be way easier. The same is true of this Visual Introduction to Machine Learning – great piece, but it’s individual steps, continuous scrolling makes no sense.
  2. Knowing how long the thing is. Before watching a video on the web, I always check how long it is. If it’s longer than I feel like watching, I won’t. Scrollytelling pieces often don’t give you a good indicator how long the piece is. Yes, you may be able to se the scrollbar, but what does that mean? How far apart are the steps? I have no confidence in that as an indicator.
  3. Direct access. Just like I like to know the length of a thing, I also like being able to jump between points. Many scrollytelling pieces now have indicators for the individual steps, which sometimes can be clicked to access them directly, sometimes not.
  4. Scroll-jacking. When I scroll, I scroll. I’m the user. I’m in control. I do not want your stupid website to interfere with the scrolling because your little JavaScript thinks that I’m scrolling too fast or that I really should pause here or there before moving on. That tab is closed faster than you can say onScroll.
  5. Scrolling that doesn’t scroll. Scrolling needs to actually scroll, not just advance an animation. How the U.S. and OPEC Drive Oil Prices makes my brain hurt. I scroll, but nothing (okay, almost nothing) actually scrolls. It’s just a bunch of confusing transitions in the same space. Granted, this piece has some other issues as well, but the weird interaction makes things even worse. This Diary of a Food Tracker is another example that would have been so much better with a stepper.
  6. Precision scrolling. Why infectious bacteria are winning is really interesting, but the scrolling action is infuriating. Text scrolls over the animated graphics, and you have to watch the action while scrolling or you’ll miss it. Try to read the text, and you miss the graphics, pay attention to the graphics and the text has just scrolled off the top. This nice piece is completely ruined by the scrollytelling.
  7. Weird mixed metaphors. The fantastic Hottest Year on Record piece used scrolling as a trigger to start the animation. What if you want to see it again? Now you have to hit a button. It makes no sense. And the initial scrolling distracts, so you’ve almost certainly missed the first few years.

Stepping Back

What’s the alternative? Why, a stepper of course!


This one’s from For the Elderly, Diseases That Overlap. It’s nice and straight-forward: you know many steps there are and where you are in the sequence. Just click the Next button to go to the next one, or any of the numbers to jump around. Animation happens just the same, no scrollyanything needed. But the navigation doesn’t get in the way and doesn’t distract.

If you absolutely have to use scrolling, read – and heed – Mike Bostock’s How to Scroll. But even better: don’t.

Bot automatically generates maps from American Community Survey data

 maps, Twitter  Comments Off on Bot automatically generates maps from American Community Survey data
May 252016

Census bot

The American Community Survey is an ongoing survey run by the United States Census Bureau that collects data about who we are. The map maker bot by Neil Freeman is a Twitter bot that automatically generates county-level maps based on this ACS data. It’s been running for the past month, making one map per hour, so there are already lots of demographic breakdowns to browse.

Pretty awesome. The implementation gets extra plus points for making the maps straight out of a government pamphlet.

Tags: , ,