A

A Eulogy for Dark Sky, a Data Visualization Masterpiece

On January 1, 2023, Apple sunsetted (pun intended) the Dark Sky mobile app on iOS. Apple purchased the company behind the popular weather application in early 2020, then announced that it would be shutting down the Dark Sky applications (first on Android, then on iOS and web), and finally stated in 2022 that the forecast technology would be integrated into the Apple Weather app with iOS 16.

A comparison of Dark Sky with Apple Weather. The Dark Sky app is white. It's interface has a simple location marker with a list of forecasted temperature readings. Buttons at the bottom allow users to toggle between maps, forecasts, notifications and reports. The Apple Weather app has an image of the sky. It has current weather, hourly weather temperatures, and a 10-day forecast.
Comparison of Dark Sky with Apple Weather.

But Dark Sky was much more than just an API or a set of “forecast technologies.” The design of the Dark Sky mobile application represented a hallmark of information design because the team clearly obsessed over how people would actually use the app on a daily basis.

Here’s a gallery of screenshots I personally took in the last year.

  • An hourly chart of temperatures, shown on a horizontal bar chart, with higher temperatures at the rightmost edge of the chart.
  • The DarkSky interface showing highs and lows for the coming days, and also little icons of suns, clouds, windmills and umbrellas to symbolize other weather elements.
  • A screenshot of the DarkSky app featuring a map with colored bands over the locations that are to experience precipitation. Also, a line chart and a bar chart, each showing the duration and intensity of the rainfall in the coming minutes and hours.
  • A screenshot of a horizontal bar chart, where the hour is on the y-axis and the temperature for that hour is on the x-axis.
  • A screenshot of the DarkSky app showing a horizontal bar chart where the hour is on the y-axis and the wind speed is on the x-axis. At the end of each bar is the precise wind speed, with an arrow showing the direction of the wind.

The design of Dark Sky was so wonderful that I could understand the shape of the weather at a glance, even from a zoomed out view of the app.

Common use cases for a weather app

Before we can dissect what makes the design of this app so special, let’s define the most common use cases for a weather app. A good weather app attempts to address a range of use cases in a person’s life. Here are some common use cases for a weather app, starting with the contextual goals first:

You’ll notice that the questions I want to answer vary based on the context and situation I’m in. This is the perfect situation for software that embraces good information design principles.

In Magic Ink, Bret Victor defined information design “as the design of context-sensitive information graphics.” Unlike static graphics, like a weather map in a newspaper, information graphics in software can be highly dynamic and can incorporate context from the user’s environment. 

Dark Sky aggressively leaned into these ideas, and the team worked hard to turn nearly everything in the application into a context-sensitive information graphic. Let’s dive deeper into some examples where this notion is in full display.

Weather forecast for the day at a precise location

I’ll start by listing my goals when trying to understand the upcoming weather for the day:

The default experience for the Dark Sky application is to show weather for the next 12 hours at my precise location. Here are three screenshots from the app, from different days and locations. What do you notice?

Screenshots of the app showing 1) a storm system passing over the Northeast U.S., with a temperature chart by the hour and a note of precipitation at some of those hours, 2) the same same map, but with a change-of-precipitation chart, and 3) an extended hourly temperature chart with buttons allowing the user to choose to focus on temperature, feels-like temperature and precipitation.

The app contextualizes the information that’s presented based on what’s most relevant.

In the left-most screenshot, the context of the weather storm that’s passing by my location and some potential light rain is emphasized to the user. The wind advisory and dip in the “feels like” temperature also make honorable mentions. In combination with the clickable Wind Advisory warning, I can quickly understand that the storm has passed my specific location but I should still be mindful of the wind.

Screenshot of the app showing a storm system passing over the Northeast U.S., with a temperature chart by the hour and a note of precipitation at some of those hours, plus a wind advisory.

In the middle screenshot, the storm front heading my direction, the imminent rain starting within the hour, and the hours of rain later in the day are emphasized front and center. Based on my interest in the rain, I scrolled down (not shown in screenshot) to switch from temperature to rain probability for the main weather view.

Screenshot of the app showing the storm map, but with a change-of-precipitation chart over the coming hours.

In the right-most screenshot, the temperature distribution throughout the day is emphasized.

Screenshot of the app showing an extended hourly temperature chart with buttons allowing the user to choose to focus on temperature, feels-like temperature and precipitation.

There are lots of little details that are easy to miss, as well. For example, all three screenshots above start showing weather information starting at the current moment (“now”) and onwards. This is brilliant, because I only occasionally care about weather from a few hours or days ago. (To accommodate those situations, the app did have a unique Time Machine view to explore past weather data.)

Weather forecast for the week

Let’s revisit our goals when trying to understand the weather for the week:

While many other weather apps focus on helping me understand the weather at the city level, the Dark Sky app differentiates itself by enabling me to understand the weather with a hyperlocal view. I can view the weather at specific addresses and landmarks and understand how the weather might be different in a city center compared to the towns around it.

By default, the Dark Sky app shows the weekly weather summary at my current location (screenshot on the left).  I can contextualize the weekly weather view by clicking the search icon and typing in the alternative location I’m interested in (screenshot on the right).

Two screenshots of the DarkSky app for different locations, showing the coming days' high and low temperatures, rain chance, and the extent of rain, sun, wind, and cloudcover.

At a glance, I can quickly understand:

  • Which days are likely to rain.
  • Which days have wide temperature ranges (low lows and high highs).
  • The general shape of the weather (micro-trends).
The same screenshot as before, showing daily temperatures, precipitation and other elements with author annotations calling out 
the highs and lows for the week. The chart presenting this information shows the "shape" of the weather as the temperature lines move up and down.

Gallery of subtle design elements

In the first few sections, I laid the groundwork by diving a bit more deeply into specific aspects of Dark Sky. Now that I’ve hopefully engaged your critical design eye, I’d like to elevate other elements in the app’s design in a more rapid-fire fashion. I hope that this section will provide some ideas and inspiration for people designing their own data-rich applications.

Preserving temperature magnitudes in ranges

To represent data visually, the data needs to be mapped from “data space” to “pixel space”. In some domains and scenarios, you want to ensure the magnitudes are carried over, and in others you want to rescale the values to a fixed scale so the resulting charts are more consistent in the space and pixels they take up.

In the Dark Sky app, the “temperature pills” representing the forecasted temperatures for the upcoming week preserve their existing magnitude more effectively in the visualization. The temperature values are more tightly integrated with the visual representation, making the combined experience more amenable to quick comparison across multiple days.

Many weather apps opt for the design pattern on the right, where all temperature ranges are rescaled to take up the same amount of space in the app.

In the DarkSky weather app, the highs and lows were placed in bars that were relative to each other. In the Apple Weather app, the lows are aligned on the left side and the highs are aligned on the right side so the user has to read each temperature number for each day to know how it compares with other days

Replacing numbers with rough categories

Interpreting hourly distributions of rainfall or snowfall can be difficult. Is 0.25 inches of rain a lot over the next hour? What about 0.2 inches of snow per hour for the next hour, then 0.15 for the hour after that? How do I prepare for these circumstances?

To help users stay informed and take action, the app will often replace precise forecast distributions of rainfall and snowfall with rough categories instead. This design choice has two positive effects on users:

  • It contextualizes the forecast to simpler categories that can help us quickly make changes in our life if needed.
    • Light snow that starts and stops means that my snow shoveling company won’t come out, but heavy snow means they likely will.
    • Heavy snow means I should probably make sure my outdoor furniture is better covered and ready to take the snow.
  • It removes a sense of artificial precision that doesn’t really exist because weather forecasts fundamentally have very high uncertainty and error bands.
Screenshots of snow and rain line charts, where the x-axis is time and the y-axis is a vague gauge of the precipitation. Instead of the precise values, the y-axis has "light," "medium," and "heavy" ranges.

Contextualized storm map

Simple color scales combined with arrows go a very long way to conveying relevant storm information.

Screenshots of different storm systems with colors that indicate the intensity of the storm, and directional arrows showing where the storm system is headed.

Wind direction

Instead of conveying wind direction using text (“NW” or “Northwest”), the app uses arrows! If the wind shifts directions throughout the day, I can feel the wind direction changing using my body.

Screen shot of DarkSky app showing the wind speeds for each hour in a horizontal bar chart. At the end of each bar is a directional arrow.

Complaints from former Dark Sky users

As you can tell, I could probably write an entire book about the design of Dark Sky.

Instead, I want to share some passionate comments from other Dark Sky fans. While most of them aren’t data viz or design nerds, they feel that the Apple Weather app is not a sufficient replacement. These people relied on Dark Sky to make decisions and grew very attached to an application that integrated deeply into their lives.

Here are some examples:

  • 0000GKP on Reddit: “I have already made the transition to the Weather app. The information is presented in a much less efficient manner than Dark Sky so it takes more effort to get it, but it is all there (except for cloud cover).”
  • TheGeckoDude on Reddit: “Is there anything that has the precipitation graph similar to dark sky? The biggest thing I will miss from dark sky is that graph. I’m outside a lot and it is super helpful for knowing when to take cover or when it might rain. I need to find a feature like that because the vague weather precipitation info will not cut it for me.”

Let’s make data shine!

Dark Sky started with publicly available data, augmented it with contextualized predictions, rigorously iterated on data visualization design, and packaged all of this into a contextualized experience to make weather data useful for me in my daily life.

While the availability of data has never been higher, we’re still missing software experiences that contextualize that data to make our lives better. Data alone isn’t enough.

The world needs more Dark Sky-like experiences to help us improve our spending habits, help us sleep better, and more. If you’re working on information software, I hope you can be inspired by the body of design and engineering work that Dark Sky pioneered.

Headshot of author Srini Kadamati
Srini Kadamati

Srini Kadamati currently helps build better data management tools for biomedical research at Manifold.ai. Previously, he taught data visualization and data skills at Dataquest.io and Preset.io.