Displaying your Data with D3.js

The old saying that, “a picture is worth a thousand words” definitely applies to the field of data visualization. Data visualization has become a very popular subject recently, and is perfect for conveying data quickly and clearly to your clients. Why use words to convey sales performance to your team, or have your viewer do math in their head to figure out how far from a donation goal you are, when this can be displayed in a simple chart?

These are just two of the many cases where pictures with context can speak louder than words. In this article, we will introduce you to a great library called D3.js, show how this can be used to display data on displays, and explain how you can get that data from a google spreadsheet into the correct file format.

We are currently thinking of some ideas for displays using data visualization, and it would be great to hear from you with any suggestions you have; just let us know in the comments below.

What is Data Visualization?
Data visualization is a method of presenting often complex data in a pictorial or graphical format that people find easy to understand. It is often used to display large or complex data in a way that allows the viewer to quickly understand what is being conveyed and identify trends or patterns which would be harder to detect in paragraphs of text. With data visualization you can show charts, plot points on a map, or even create dynamic works of art based on data.

In addition, interactive screens take data visualization to a new level. Now a user can not only view graphical data collections, they can also choose to drill down to view more specific information on an area that is of particular interest to them by selecting columns or points on a graph.

Introducing D3.js
D3.js is a Javascript library which you can use to convert data into graphs, charts, shapes or pretty much anything else you can think of. Below are some examples of the type of graphs, charts and data based images you can create with D3.js.

You can find some more great examples of the work produced using D3.js here.

The graphs and charts produced by D3.js are rendered as SVGs, which stands for Scaleable Vector Graphics. SVGs are perfect for using in digital signage due to their relatively small file size as well as the fact that they can be scaled to any size without any loss of clarity due to pixelation, which you may find with other popular image formats such as png and jpg. We are looking to include a lot more SVGs in our templates in the future to make sure our templates look great on 4k screens and beyond.

There are many excellent tutorials on getting started with D3.js which you can find on their main website here. In the next section, we will show you how we set up a simple example of a donation drive chart.

Our example
For a simple example of a good use case for D3.js we set up a donation chart for the fictitious Rise Vision University. We created the title in HTML and added the logo as an image, but everything else in the image was created using the D3.js library. You can check out the live version here.

Not only would it have taken a long time to manually type out the values and align the steps in the y-axis every $10,000 in CSS, you would also have had to calculate the relative size of the donated amount vs the target amount. When you think that this calculation would have to be done each time a new donation is made, this becomes even more time consuming. D3.js takes care of all of this, and it gets even better when you consider that you can style the graph pretty much any way you want using a combination of native style methods and good old CSS. And whatever design you decide on, as it is created using SVGs you know it will look awesome on any screen.

But how do you add the data to the chart in the first place? D3.js can read CSV, TSV, DSV and JSON files. For our workflow, and because it is such a popular choice for recording data, we decided to work with a google sheet from which we exported the data to a JSON file which was then uploaded along with our other files. In the next section we set out the steps for this process.

Converting your data from Google Sheets
You may have already used the google sheets service in conjunction with Rise Vision before; for example the Spreadsheet Widget. If you haven’t used google sheets before, the first step is to head over to the main site here and set up a new, blank, sheet.

Once you have the sheet open you can give it a title and then set up the headers for your different columns. In order to allow us to export the data in JSON format, we need to ‘freeze’ this header row. To do that you should highlight row one and then click view -> freeze -> 1 row. In our example we just needed headers for the column names and the totals, and then we entered figures for these values:

To get this data into JSON format you should follow the steps set out here. When it is time to export the data, if you only have one sheet like we did, you should chose the option ‘Export JSON for this sheet’. A pop-up will then open with your data in JSON format like this:

You can then cut and paste this data into a plain text editor, save it as a .json file, and it is ready to be linked in through D3.js.

Let us know what you think

Hopefully you have found this to be a useful introduction to what D3.js can do, and how it can be advantageous for digital signage. If you have any questions about this, or if you have any ideas as to how you would like to see data visualization used in templates and themes, please let us know in the comments below. We look forward to hearing from you and thanks for reading!

As our example is for a graph rather than a clock, the HTML content is very minimal, and really just contains an empty div element with an id which d3.js uses to append the graph too. All of the styling and extra content is done within the javascript itself.