Declarative Data Visualization - Intellectual Wanderlust

The purpose of this post is to provide a live example of DViz, a declarative data visualization library written in Javascript.

Introduction

One of the most great thing of WikiWikiWeb is that it encourages us to create links between pages by making it really easy to create links. Although the concept of a hyperlink has been there for a long time, it is important to have appropriate tools and/or aids which allows us to easily create links. In WikiWikiWeb, we can do that by simply following a naming convension.

I think data visualization is similar to hyperlink in a way that it also requires appropriate tools and/or aids. It would be nice to have a simply way which allows us to create and embed good enough visualization into any documents without using specialized authoring tools.

Declarative Data Visualization

I coined the term declarative data visualization to describe a way of embedding visual representations such as sparklines or conventional statistical charts into HTML document without using the hand-written scripts or graph drawing tools.

All you need to do is writing a plain HTML document. DViz then automatically detects data elements embedded in the document and turns them into cognitively efficient visualizations on the fly.

Sparkline

Sparklines are “small, high resolution graphics embedded in a context of words, numbers, images.”

The following HTML fragment becomes…

A: <code>1282000, 1264000, 1287000, 1275000, 1180000 (@sparkline)</code>

…a sparkline like this:

• A: 1282000, 1264000, 1287000, 1275000, 1180000 (@sparkline)

It can be used within a sentence 1, 1, 2, 3, 5, 8 (@sparkline) like this.

Sparklines are often presented in a set:

• A: 5, 3, 7, 1, 3, 7, 9 (@sparkline)
• B: 5, 4, 3, 8, 8, 9, 10 (@sparkline)
• C: 3, 7, 1, 7, 8, 1, 5 (@sparkline)

Bar chart

Bar charts require a table of data so the declaration to render bar charts is little bit more complex but still easy to write.

It requires comma separated data table wrapped by <code>...</code> element immediately followed by <p><code>@bar</code></p> declaration. Without this declaration, the data table won’t be transformed:

<code>
Name, A, B
Apple, 1352, 312
Orange, 2997, 354
Banana, 2287, 164
Tomato, 1974, 533</code><p><code>(@bar)</code></p>

Above declaration produces the following chart:

Name, A, B
Apple, 1352, 312
Orange, 2997, 354
Banana, 2287, 164
Tomato, 1974, 533

(@bar)

Stacked Bar Chart and more

You can specify isStacked option to draw stacked bar chart:

<code>(@bar isStacked:true}</code>

It will give you this:

Name, A, B
Apple, 1352, 312
Orange, 2997, 354
Banana, 2287, 164
Tomato, 1974, 533

(@bar {isStacked: true})

See Google Visualization API for more options.

As you can see here, current version of DViz is just a thin wrapper of other visualization libraries such as D3 and Google Visualization API.

Color schema

According to Edward Tufte, you should “make all visual distinctions as subtle as possible, but still clear and effective”. With regard to this principle, DViz automatically changes color scheme according to the number of columns:

2,2,3 (@layout)

Single column:

Name, A
Apple, 1352
Orange, 2997
Banana, 2287
Tomato, 1974

(@bar {isStacked: true})

Two columns:

Name, A, B
Apple, 1352, 312
Orange, 2997, 354
Banana, 2287, 164
Tomato, 1974, 533

(@bar {isStacked: true})

Three columns:

Name, A, B, C
Apple, 1352, 312, 523
Orange, 2997, 354, 111
Banana, 2287, 164, 232
Tomato, 1974, 533, 755

(@bar {isStacked: true})

Four columns:

Name, A, B, C, D
Apple, 1352, 312, 523, 653
Orange, 2997, 354, 111, 67
Banana, 2287, 164, 232, 1244
Tomato, 1974, 533, 755, 500

(@bar {isStacked: true})

Column chart

Use @column to render column chart (vertical bar chart):

Name, A, B, C
Apple, 1352, 312, 523
Orange, 2997, 354, 111
Banana, 2287, 164, 232
Tomato, 1974, 533, 755

(@column {isStacked: true})

Line chart and Area chart

Use @line to render line chart:

Name, A, B, C
Jan, 1352, 312, 523
Feb, 2997, 354, 111
Mar, 2287, 164, 232
Apr, 1974, 533, 755

(@line)

Or you can use @area to render area chart:

Name, A, B, C
Jan, 1352, 312, 523
Feb, 2997, 354, 111
Mar, 2287, 164, 232
Apr, 1974, 533, 755

(@area)

Scatter plot and Scatter plot matrix

Scatter plot requires a pair of values:

A, B
8, 12
4, 5.5
11, 14
4, 5
3, 3.5
6.5, 7

Use @scatter to render scatter plot:

A, B
8, 12
4, 5.5
11, 14
4, 5
3, 3.5
6.5, 7

(@scatter)

If there are more than two columns…

A, B, C, D
8, 12, 10, 5
4, 5.5, 6, 3
11, 14, 15, 7.5
4, 5, 7, 3.5
3, 3.5, 5, 2.5
6.5, 7, 10, 5

…it shows correlation between the first column and the rests columns:

A, B, C, D
8, 12, 10, 5
4, 5.5, 6, 3
11, 14, 15, 7.5
4, 5, 7, 3.5
3, 3.5, 5, 2.5
6.5, 7, 10, 5

(@scatter)

Or you can use @scattermatrix to render scatter plot matrix. It is a good way to compare correlations between arbitrary pairs of columns:

A, B, C, D
8, 12, 10, 5
4, 5.5, 6, 3
11, 14, 15, 7.5
4, 5, 7, 3.5
3, 3.5, 5, 2.5
6.5, 7, 10, 5

(@scattermatrix)

Force-directed graph

You can also draw simple force-directed graph declaratively. First, describe graph data (numbers on the links specify link weight):

A ----- B
B -(5)- C
C -(8)- D
C -(9)- E
C -(5)- F

And use @graph to render it:

A ----- B
B -(5)- C
C -(8)- D
C -(9)- E
C -(5)- F

(@graph)

Responsive Visualization?

I’m currently thinking about a concept called Responsive Visualization which is a data visualization equivalent to the Responsive Web Design.

Changing color scheme according to underlying data is just one example of responsiveness.

Why text nodes instead of HTML attributes?

It would be better to use attributes, maybe HTML5 data-*, but I intentionally choose to use text nodes 1) simply because the most content editors for end users doesn’t support attribute editing, 2) and partly because I wanted to treat quantitative data itself as a part of document. Anyways we can read the data even after we strip out DViz javascript code.

Notes

• Please note that this work is just a proof of concept and not intended for use in a production environment.

관련글:

8 notes: