GETTING STARTED | DASHBOARD DESIGN | KNIME ANALYTICS PLATFORM

Tour The World … Factbook

Build A Dashboard To Adventure Through Data From The World Factbook With KNIME Analytics Platform

Photo by Chris Lawton on Unsplash.

Introduction: Call To Adventure

I’m a huge fan of The World Factbook. It’s a well respected online resource of country data that includes maps, flags, one page summaries and more. I’ve been using it for years and it does not disappoint (Figure 1).

Figure 1: The World Factbook.

So I thought, how fun would it be to tour the world using The World Factbook data all from inside KNIME Analytics Platform?! I think it would be epic so let’s do it!

Note. With enough data and time, you can take a kitchen sink approach with this, which I was tempted to do but pulled back. I challenge you to go out and find additional data you might want to incorporate into your dashboard and pull that data in.

We are going to leverage the Tile View node to explore selected country data from inside our workflow through an interactive component composite view.

The Tile View node allows you to view data in a tile-like format (think a multi-row card) while providing customization around the number of tiles, columns included, colors and more.

With the Tile View node, the Color Manager and Bar Chart all wrapped up in a component with a basic UI we can build a fun, random country explorer based on The World Factbook data.

Pack Your Bags

In this post, we will:

• Create multi-row tiles for each country with the Tile View node.
• Use the Color Manager node to Auto Apply colors that display at the top of each tile.
• Add Custom CSS for Custom Headings and Subheadings.
• Incorporate additional data in Bar Chart nodes.
• Wrap it all into a component with a basic GUI that allows you to pick a random number of countries to view.

The Data Situation

Unfortunately, the The World Factbook does not have an API. Luckily, there are a few GIT repositories out there with up-to-date data from the site. I cloned the GIT repository here and included the country data in the workflow.

The country data is provided in the form of separate .json files. For the most part, the data quality is fairly good, but it’s not without issues here and there.

In the component, I’m simply looping through the files and selecting the keys that are interesting to me for this workflow. Feel free to configure the JSON Path node to add or remove keys.

By default, I’ve included quite a few keys from the country .json files. We have 14 columns of data to work with here with everything from median age and GDP to size comparisons to locations in the United States.

The datasets come with the reference workflow for this blog post, named Tile_View, and is available on the KNIME Hub and can be downloaded for free.

The Tile View Node:

Figure 2: The Tile View Node.

The Tile View node is part of the family of KNIME JavaScript Views nodes that have JavaScript based implementation. In addition to being interactive, this means we can pass custom CSS styling to control certain elements of our visual. They are documented here and we will touch on a couple common changes in this article.

The Tile View node is organized under the Views category in the node repository (Figure 3).

Figure 3: The Tile View Node In The Node Repository.

The Tile View node outputs a view,

“ … where each data row is displayed as one tile. The view offers several interactive features, as well as the possibility to select rows.”

Step 1: Getting To Know The Tile View Node

We are going to start small here and get to know the Tile View node first then work into the component with the composite view.

The workflow includes a processed_country_data.csv file that has the 14 columns with some filtering and cleaning applied. Load the file and open the configuration window for the Tile View node.

The node has multiple tabs and quite a few options to adjust and tinker with. As we explore this, don’t forget that many of the GUI options we encounter can be controlled via flow variables, and styling (such as the aforementioned heading and subheading colors) can be controlled from the CSS Editor node via a flow variable (Figure 4).

Figure 4: The Tile View Configuration Window Defaults.

Starting at the Options tab when the configuration is opened let’s explore from top to bottom.

No. of rows to display

The first thing we have to decide is how many rows will be displayed on output. 100,000 is fairly large and I would suspect that we would not want to subject anyone to 100,00 rows of data to read through in the interactive view of this node.

Titles

The next two are really self explanatory but come with a note. In a number of my past projects, I have found it worthwhile to control the Title and Subtitle fields via flow variables. One reason is (as we will see in Step 2) that we can create dynamic, changing fields based on user input.

Display Row Colors

If you’ve used the Color Manager node before, the next option should catch your eye. If we are passing color data through the workflow and this box is checked, that color data will be displayed at the top of each tile. While it might seem small, adding color at the top of each tile is an elegant way to visually differentiate them (Figure 5).

Figure 5: No Color vs Color At The Top Of Each Tile.

Display column headers

Our next choice is whether or not to display column headers. Displaying column headers is really a project driven choice, but you will find that it can help to organize the data in an accessible and meaningful way. If we were displaying tiles of images, we might find it cleaner to disable column headers. In the examples below, we have column headers enabled on the left and disabled on the right (Figure 6).

Figure 6: With And Without Column Headers.

Display fullscreen button

The option for a fullscreen button is viewable in the JavaScript and composite views for the Tile View node. This is a project-specific design choice that has more relevance if we were deploying to the KNIME WebPortal.

Fixed number of tiles per row

The option to change the fixed number of tiles per row is a key choice here and impacts the user experience with the resulting tile view in potentially significant ways. If we want additional visuals to follow beneath the tile view as a part of a larger dashboard, adjusting this number up is recommended.

The ability to rapidly iterate in the workflow means that it’s fairly easy to discover the optimal tiles per row.

For this workflow let’s change this value to 2 (Figure 7).

Figure 7: Fixed Number Of Tiles Per Row Set to 2.

Fixed tile width

The brilliant thing about the JavaScript view nodes is that the visualizations will automatically change size based on the size of the window. This is a convenient feature, but if the dashboard breaks down every time the window is resized, a fixed width pixel level adjustment is available.

The left image is width restricted to 300 pixels. Notice the extra white space? (Figure 8).

Figure 8: Left: Fixed Width 300 pixels. Right: Unrestricted.

Text alignment

Due to design constraints, preference or some other reason, text alignment options are available.

Choose a title column

In the above screenshots we have seen examples of the Tile View node in action. We see that each country has its own tile with lots of information beneath it.

The Choose a title column selection is where the choice is made that impacts what is displayed at the top of each tile. In this workflow, to get the country name at the top of each tile Country_Name should be selected. Finally, we want to fill our tile out with great information about each country. Select those columns and ensure they are on the green include side.

Note. The column order here is the column order on the tile. So if we want a different order, we need a Column Resorter node to make that change.

If we execute right now and look at the Interactive View: JavaScript Tile View, we just see a continuous list of 10 tiles per page (Figure 9).

Figure 9: A Lot Of Tile Scrolling.

If we want to add visuals below these tiles, the initial page size needs to be adjusted. To do this we open the node configuration again and move to the Interactivity tab (Figure 10).

Figure 10: Tile View Node Configuration Interactivity View Tab.

Pagination

Pagination is enabled, this means that pages are listed at the bottom of tile view (Figure 11).

Figure 11: Example Of Pagination In Tile View.

Initial Page Size

The initial page size is set to 10. We want to set this to 2. What this does is greatly expands the number of pages, but frees up valuable space below the tiles for future visuals in our composite view (Figure 12).

Figure 12: Initial Page Size Set To 2.

Page Size Change Control

For greater control around the number of tiles displayed on the screen (from the interactive or composite view), we can change the entries shown via a dropdown or suppress this entirely (Figure 13).

Figure 13: The Page Size Change Control.

Selection & Filtering

Finally, the rest of these options impact user and cross visual interactivity at the composite view level. If we de-select Enable Selection, selecting a tile or tiles will not highlight the selected row on other visuals in the composite view. This is a really powerful feature that we want to leverage later, so let’s just leave this section as is.

The last tab is the Formatters tab and allows us to adjust and control date formatting with many locales to choose from and even number formatting (saving us from needing to use a Round Double node) (Figure 14).

Figure 14: Tile Node Configuration Formatters Tab.

Missing value formatter

The last option here is the Missing value formatter, which provides the option to have the Tile View node display missing values as the classic red question mark.

After we add titles and tinker with a few settings to adjust to our liking, the output of the Tile View node displays in a nice easy to read format (Figure 15).

Figure 15: Tile View Node Interactive View.

Step 1.1: Make Your Own Adventure

While this looks fine, we can include additional design elements that would help everything stand out and make the experience even better.

It’s easy enough to color the rows (recall each country is it’s own row) to add some contrast among the tiles.

To do this, we must remember that there is a nominal value limit. In testing, I found that I could pass only 60 nominal values to the Color Manager node. At 61 unique nominal values, the below error message displays (Figure 16).

Figure 16: Error Output Of Color Manager Node.

To address this, let’s take a random sample of 25 rows to color with the Row Sampling node.

In the Color Manager, select set 3 (Colorblind Safe). This small change already makes a huge difference in the output of the Tile View node (Figure 17).

Figure 17: Tiles With Color Auto Added From Set 3.

But we want to go beyond just row colors. We want to color and resize our title, subtitle and title titles (the Country_name column), but how do we do this? We didn’t see any specific text formatting options in the node configuration.

To make these changes we need to write CSS rules that apply to CSS classes that output in the interactive view.

Note. As mentioned earlier there are some examples here to get us started.

The title and subtitle CSS classes are self explanatory and easy to implement. (Figure 18).

Figure 18: CSS Classes For Title and Subtitle.

Where things may get tricky (depending on your level of expertise) is in trying to adjust other unknown elements in the visual.

To find the specific class names I recommend the following:

1. Open the interactive view
2. Right click and select Inspect (Figure 19).

Figure 19: Right Click And Select Inspect.

3. After clicking Inspect, the Chrome Dev Tools window opens and displays the DOM or Document Object Model.

4. In the top left corner of the Chrome Dev Tools window, click the Element Selector. Ensure it’s highlighted before moving on (Figure 20).

Figure 20: The Element Selector.

5. With the Element Selector active, select an element in the tile view window.

6. When the element is selected two things happen, the element’s style information is displayed to include its CSS class and in the Chrome Dev Tools window, the element’s location is highlighted (Figure 21, Figure 22).

Figure 21: Selecting An Element.

Figure 22: Element DOM Location Highlighted.

7. Simply double-click the class name (highlighted above) and copy and paste into the CSS Editor node.

To correctly control the CSS class styling, we need to change a couple of things. The class name pastes with spaces in it. Those spaces need to be replaced by periods ‘.’. We also need to add a leading period ‘.’ to the beginning of the CSS class name. The image below provides an example of how to format the CSS class name correctly (Figure 23).

Figure 23: Correct Formatting Of CSS Class In CSS Editor Node.

For every element we want to change, we can get the class name through the Chrome Dev Tool window using the element selector as explained in the above steps.

Once the class name is entered into the CSS Editor node, we add open and closing curly braces {}. While inside the curly braces, if we press CTRL+Space we see available code completions (Figure 24).

Figure 24: Code Completions In The CSS Node.

When it comes to font colors the same CTRL+Space code completion assistance shortcut also applies. Within the curly braces in the CSS class type color followed by a colon “:”. When you press CTRL + Space a list of color options will appear (Figure 25).

Double click the color you want to use. For more on the CSS color property visit this website.

Figure 25: Color Choices Via Code Completion In The CSS Editor Node.

Note. Formatting: Ensure there is a semi-comma “;” after each property. We do not need commas between classes, but ensure that the properties’ specific to that class are within the curly braces.

When all of our class edits are complete, the CSS Editor node should look something like this (Figure 24):

Figure 26: Contents Of CSS Editor Node.

We now have our custom CSS. We need to pass this formatting to the Tile View node. To do this, connect the variable output port from the CSS Editor to the top left corner of the Tile View node as seen below (Figure 27).

Figure 27: Connecting The CSS Editor To The Tile View Node.

Next we need to open the configuration window of the Tile View node and select the Flow Variables tab. From here, scroll down to the customCSS flow variable. Click the dropdown and select the variable css-stylesheet. This overrides the default CSS with CSS coming from the CSS Editor node (Figure 28).

Figure 28: Passing Custom CSS Code To Tile View Node Via css-stylesheet Variable.

Click OK, execute the node (F7) and open the output (Figure 29).

Figure 29: Tile View With Custom CSS Formatting.

Our output has resized and recolored titles and specific colored and even italicized text within the tiles themselves! Keep experimenting and have fun digging into all that is CSS styling with these JavaScript enabled nodes.

Beyond The Tile

KNIME cells are not limited to just storing integer and string data. There are many other data types that may reside with KNIME tables. One of these is image data. As a future enhancement, I challenge you to add corresponding world flags to style your tiles as depicted below (Figure 30).

Figure 30: Example Tile Views With Flags.

Step 2: A Random Country Explorer

Let’s put all of this together and build a World Factbook country explorer that takes user input and outputs the number of random countries the user specifies in a nice dashboard.

We want a dynamic title and will apply custom CSS styles to the tile view (Figure 31).

Figure 31: Example Goal Output.

As we scroll down we will get data on Median_Age, Life Expectancy and Total area (Figure 32).

Figure 32: Other Visuals Included In The Composite View.

We are not going to step through every single node in the workflow that makes it tick, but we will touch on a few important junctures.

The key to getting the GUI that appears when you double-click the component is the Integer Input node (Figure 33).

Figure 33: Outside GUI with View Inside Component Of Integer Input And Configuration.

The Integer Input is configured to output the variable countries_amount. This variable is used in the Variable Expressions node to create the dynamic title. This is done by joining static strings with the user input value of countries_amount. In the example, 4 was entered so the tile_title includes the number 4. This dynamic title is output as a variable called tile_title (Figure 34).

Figure 34: Variable Expressions Node.

Rather than reading in all of the raw county .json files and filter down, the countries_amount variable controls the count variable in the Flow Variables tab of the Row Sampling node. So what happens is that the .json files in the folder are listed with the List Files/Folders node. Then, the Row Sampling node takes a random sample of that list based on the user input value (Figure 35, 36).

Figure 35: Nodes Leading Up To the Loop Start.

This adds a bit of efficiency (since we only read-in what we actually need). Additionally, since I am not pulling in every key from the .json files you are then free to explore the full files and add/remove keys.

Figure 36: Variable Controlling the Count In The Row Sampling Node.

It could really be placed at any point prior to the Tile View node, but the CSS Editor node is placed here so it’s easy to find. Recall that variable data will flow through the black data connections so this connection will work fine (Figure 37).

Figure 37: Place The CSS Editor Anywhere Before The Tile View Node.

The next node of note is the JSON Path node. To add a key to the output, just highlight the key you want (until it turns blue), right-click and select Add JSONPath. There is much more that can be said about this. I just encourage you to explore what I’ve put together in the workflow and read the documentation here (Figure 38).

Figure 38: Easily Add A JSONPath.

Once you’ve captured all the keys you want in the output, ensure to rename the Outputs in the JSON Path node configuration so they make sense (Figure 39).

Figure 39: Outputs With Desired Column Names Associated With Key Value Pairs From .json File.

Next there is some data cleanup and then the Color Manager, Tile View and Bar Chart nodes are added to finish things up (Figure 40).

Figure 40: The Workflow Inside The Component.

The component is show in action below, from setting the value of random countries to the final dashboard output, prominently featuring the tile view (Figure 41).

Figure 41: The Final Dashboard Output.

The Thin Red Line: Highlights On Controlling The Tile View node With Variables

This has been a lot and the variable controls alone available in the Tile View node (and most KNIME visualization nodes for that matter) warrant their own dedicated articles.

For this, let’s just highlight a few variables to stay aware of (Figure 42).

Figure 42: Tile View Variable Output With Their Respective Names.

Recall in Step 2, we created the tile_title variable to control the main title of the tile view. Much like setting the customCSS variable with the CSS Editor node, we just need to pass a string variable to the title variable in the Tile View node and voilà! the Tile View node title is controlled by a variable.

Depending on the needs of the project, it may be prudent to allow the user to select/set these variables at the UI level (at the component) and cascade them throughout multiple visuals. There is an incredible amount of flexibility here and a lot to explore to customize and control the workflow.

Understanding the needs of the customer and the ultimate goal of the project going in allows you to more effectively plan your work and can save you time and headache.

Conclusion: Final Thoughts

In this article, we explored the Tile View node and how it can play an integral role in dashboards generated from the workflow. We effortlessly applied row colors with the Color Manager node and dipped into custom CSS styling with the CSS Editor node. Through the addition of Bar Chart nodes the workflow was wrapped into a component that generates a dashboard of random countries based on user input.

Effective data visualization is powerful and can enable incredible products that deliver considerable amounts of information in concise and consistent ways.

KNIME nodes collectively offer a vast amount of customization that can take time to master but are well worth exploring and leveraging to create amazing data science products.