After the flood AtF Spark

AtF Spark

Our new typeface for code-free sparklines

Client

After the flood

The Problem

Feeds are a staple communication channel but cannot integrate high-level data insights without Javascript

Our Solution

AtF Spark helps users to communicate quantitative insights without the need for code

Results

Version 1 is now released

“Can charts be shown in text without using code?”

Data can be hard to grasp – visualising it can make comprehension faster. Sparklines (tiny charts in text, like this: 123{10,20,30,40,50,60,70,80,90,100}789) are a useful tool but creating them for the web has always required code. Removing the need for code makes it more accessible. If you can use type, you can use Spark.

Generalist users want a way in. The trouble with headlines is that they are often text-only. The actual visual evidence is data, which is never included in the headline. The evidence point is always relegated to a click away, making the assertion in the headline less convincing.

AtF Spark is a font that allows for the combination of text and visual data to show an idea and evidence in one headline. This builds on the principle of Sparklines defined by Edward Tufte and makes them easier to use. Sparklines are currently available as plugins or javascript elements. By installing the Spark font you can use them immediately without the need for custom code.

What does it look like in practice?

Mauricio Pochettino has lead Spurs on their best run 8TH{4,1,5,6,1,5,4,2,3,4,2,5,4,2,5,7,3,5,8,7,7,7,8,9}2ND in 24 years of the Premier League

Alibaba stock is at 5 yr high 93.89{40,27,69,58,44,42,52,39,27,8,40,45,33,37,24,20,30,36,36,29,40,60,50,40,50,63,87,100}152.11 as of July 2017 

The FTSE100 Brexit bounce 5562{4,27,48,37,60,40,56,54,59,62,37,63,30,59,75,68,50,40,47,30,5,9,50,74,59,75,100,92}7501 continues one year on from the vote last summer

How it works

To use Spark all you need is a font file, some text, and an application that can make use of OpenType Contextual Alternates, e.g., a new-ish web browser, Microsoft Word, Adobe Illustrator. 

Spark data needs to be formatted as comma-separated values, with curly brackets at both ends of the set, e.g., {30,60,90}. You can also have numbers at the beginning and end of the set, which are useful for providing the start and end points, e.g., 123{30,60,90}456 – Spark has numerals built in.

With your data in the correct format, all you need to do is change the font and voilà, our example of 123{30,60,90}456 becomes 123{30,60,90}456.

Get AtF Spark on Github

We think that creative minds will find many more uses for Spark and, like any technology, it is designed to be built upon and to get better through iteration. You can grab the source code and font files on Github.

This page’s lead image redraws content from Edward Tufte's Beautiful Evidence in Atf Spark. More on sparklines here.

Would you like to know more?

Get in touch