Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Muyueh Lee who analyzes social issues and builds Data Visualization, such as: color, vegetable price, energy efficiency, and interactive menus. His works can be seen at muyueh.com/seeall, and he has a personal challenge of building one new d3.js visualization per day.

Sparkline¬†is an inline visualization that fits nicely within the text. Tufte described it as “data-intense, design-simple, word-sized graphics.” It’s especially useful, so when you have to visualize a list of items, you can list them in a column, where it’s very easy to compare different data (small-multiple technique).

fig02

I was wondering, however, if there is some other form of inline visualization?

I wanted to visualize the import/export dataset of Taiwan, and it’s a long list, with more than 30k items. The following is a simplified version of the dataset:

Each item has its own hierarchy level, the absolute quantity of the item, the seasonality of the item, and the country of origin. In the following post, I will talk about the alternative that I have tried under each scenario, followed by an annotated code of its implementation in D3.js. For code readability, I will be using generated data instead of real data.

Hierarchy

First, we need to display the hierarchical relationship of the data, so several idea comes to mind:

  • Font size
  • Background Color
  • Indentation
fig01

Using font size is visually expensive, it eats up a lot of room, and breaks the height on your row. The background color method comes from Microsoft Excel, since it’s a good way to spot max/min, but it’s hard to compare other values. The idea of indentation comes from the design of Hacker News, where follow-up comments are indented. The code is easy to implement, it’s visually clear, and elegant.

Absolute Quantity

Second, we want to show absolute quantity. The challenge is to enable the reader to see the forest through the trees: the reader will first have a quick scan of the important values, then they might want to know the exact figure of each item.

  • Bar
  • Circle size
  • Background Color
  • System of numeration
fig03

Here we try to use Background color again, just to see its performance against other graphs. Circle size easily exceeds the height limit, and after that it serves a similar purpose to using the bar chart. The bar chart is fairly good; it can let readers compare different values very quickly, but I wished the bar chart could deliver more information to the reader.

It occurs to me, that on a very large scale, the length of the bar chart equals the order of magnitude, and we already have a very efficient system to deal with it: our system of numeration. With good alignment, the difference in length is the difference in order of magnitude. The reason why this doesn’t usually work, is that we want to show the precise value, leading to too much information. If we round down every digit after the most significant digit, it will be easier to compare the difference in value.

I ended up emphasizing the most significant digit, and fading out all other digits. Viewers can use the position of the first digit to learn about the most important information (approximate value), so they still can get the exact figure. I think the list precedence should be: order of magnitude (length of number) > most significant digit > other digits.

Also in convention, we use , (60% of the world ) or . (24% of the world) as decimal points (such as 1,000) – here I choose to use a space (1 000) in the hope that I can please the readers from both system.

Seasonality

Another challenge is to decode seasonality. My inspiration came from weekday/hour heat maps of commit on Github, but here we use it to display the monthly average. For no good reason, I used circle and rect to make two different versions (which yields no difference).

Sparkline may also be a good alternative by encoding monthly data along the x-axis. Yet, if we are already using Sparkline in the traditional way of displaying historical value, it’s better to use a different graph, to avoid confusion. For this reason, I ended up choosing heat map.

fig04

Composition & Concentration

    • pie chart
    • stacked bar chart

Most of the items are composed from multiple sources, and we want to show how much we depend upon our main source. Two graphs that come to mind are the pie chart, and the stacked bar chart.

The pie chart is better at noticing concentration (largest vs. rest), and the stacked bar chart seems to be better for showing the relative shares of each sources.

fig05

Country of Origin

      • Flag
      • Initial
      • Full name

The svg flag collection comes from koppi. The flags look nice on the visualization, and it is also easy to pick up repetitive patterns on flags. I was afraid that people wouldn’t relate the country name from the flag, so I added the country name as the title, so it will appear on mouseover.

fig06

Everything put together

We want to balance the visual display of each column, so there is no column that is too “shinny,” since that might take away the attention from the reader. One way of doing so, is to control the space/width of each column, and another hack is to decrease the contrast of the column by increasing the opacity value.

System wise, we want a row-based structure that will allow us to perform add/delete/sort actions based on one single row.

We bind data to each row (tr), specify a list of drawing functions, and return it as a closure (as Mike Bostock suggests in Towards Reusable Charts). This method is helpful if you want to dynamically change the order of your columns, or re-use your chart in many different tables (like with this article).

Here is everything discussed in this post all together.

Look below for some great D3.js books from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Developing a D3.js Edge is aimed at intermediate D3.js developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. You will also want to have a good debugger handy (Chrome Developer panel or the Firefox/Firebug combo), to help you step through the many real world examples that you’ll find in this book.
Interactive Data Visualization for the Web shows you how to create and publish your own interactive data visualization projects on the Web – even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.
Data Visualization with d3.js walks you through 20 examples. You can finally stop struggling to piece together examples you’ve found online. With this book, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch.
It begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.

Tags: D3.js, Inline Visualization,

One Response to “Inline Visualization with D3.js”