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.
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
RegExphandling when backtracking alternatives with dissimilar match lengths (r200946)
- Fixed ES6 site compatibility when
Function.nameis inferred from property names (r200423)
- Sped up ES6
Arrayiterators between 4x to 6x (r200422)
- Made the
Objectconstructor be aware of
new.targetby storing the target’s prototype to the newly created object’s prototype (r200421)
- Fixed calls to getters and setters on
superbeing called with wrong
- Improved error messages for accessing
arguments.calleeand similar getters in strict mode (r200694)
TypedArray.prototype.sliceuse the byteLength of passed array for memmove (r200667)
- Fixed the cascading order for
::hostrules correctly (r201073)
color-gamutmedia query support for wide gamut displays (r201065)
- Made Web Fonts only download when characters are used in its
- Restored legacy parsing of color attributes with 4 and 8 digits (r200501)
- Corrected how transitions behave when
autovalues are used (r200622)
cross-fade()rendering to match expectations (r200889)
- Corrected how prefixed and unprefixed variants in
CSSStyleDeclarationare 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
spanas a grid-line value (r200755)
- Implemented CSS Grid auto-repeat computation (r200618)
- Started blocking Geolocation API calls on pages served over insecure connections (r200686)
- Added support for
titleattribute tooltips inside Shadow DOM content (r200923)
- Stopped retargeting
event.targetwhen 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
scrollBy()with the CSSOM spec with support for the
- Made all scrolling height and width values be integral rounded (r200915)
- Added support for
ArrayBufferViewin the CSS Font Loading API (r200921)
- Hook up ShadowChicken in the Debugger tab to properly show tail call deleted frames (r200981)
constwork 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
- 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
- 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
//# sourceMappingURLwith a relative URL (r200806)
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
- 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)
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
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.