Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Analyze Your Zombie Data With D3 and Node

DZone's Guide to

Analyze Your Zombie Data With D3 and Node

We look at how one developer created a data visualization app to chart zombies in 'The Walking Dead' using these two JS frameworks.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

HBO's The Walking Dead has a rabid fanbase devoted to the minutiae of each episode, including numerous zombie "walker" deaths.

Qlik Sense is a powerful data processing and visualization software that developers use to analyze and discover insights in all kinds of data, from business intelligence to medical and raw or aggregated IoT sensor data.

Obviously, these things go together. Like peanut butter and jelly. Like peas and carrots. Like brain-eating zombies and a powerful hypercube engine.

Walker Interactive Dashboard

Check out the full dashboard.

These charts are all rendered in real time using HTML/CSS/JavaScript. To explore the insights you can garner through this interactive dashboard, try clicking on some of the charts. You'll notice that the other charts will immediately change to reflect the refined dataset that your selection caused.

This is a cool dashboard, but what if we wanted to modify it to apply to another television show or zombie-related project? Myself, I am working on at least three other zombie-related projects at work.

Let's Monkey With Zombies

First, pull the project off GitHub to your local machine. Through the Qlik Playground Walking Dead Templates page, we see the URLs to clone the git project to our local machine. From a clean directory on your machine, run:

git clonehttps://github.com/fkabinoff/playground-walkingdead.git

Now, let's walk through the following file:

./playground-walkingdead/resources/script.js

This code uses the Qlik Sense Visualization API to render the charts seen on the interactive dashboard (for full documentation of all methods and properties, see the Visualization API Reference).

Inspecting the Walker Kills Chart 

Let's walk through the create() method for one chart, the Total Walker Kills KPI. I've reformatted the code below for easier parsing:

app.visualization.create('kpi', //viz type
  [{qDef: {qDef: "=Sum([Kills])",
    qLabel: "Total walker kills",
    qNumFormat: {
      qType: "I",
      qFmt: "##,###",
      qUseThou: true,
      qThou: ","
  }}}], //columns
  {} //options
).then(function(viz){
  viz.show('QV01');
});

Our first line calls the Visualization API and creates a chart of type KPI. A non-developer overview of the KPI type chart can be found here. The string 'kpi' is defined as a parameter in the Visualization API create() method developer docs.

Next, we see a single-item array containing a qDef object that defines the single column for this chart and some formatting parameters. More information can be found in the Column documentation.

The third parameter, options, is empty in this example, but you can pass additional options according to the KPI Chart Developer Documentation.

The Reactive Technology Advantage

The interactive nature of these Qlik-powered dashboards presents a powerful opportunity for developers and non-developers to gain deeper insights into a large dataset and surface patterns and relationships that may not be immediately apparent from a static representation of the same data. Generally, these tech features can be broken down into four areas:

Data Aggregation

Before your data is displayed, it needs to be ingested into your application. Qlik is compatible with hundreds of different data types and can ingest and process data without requiring you to create or input a complex schema.

Associativity

Letting non-technical users discover insights into data requires disparate data sets be merged seamlessly.

Managing State

You may have noticed while perusing resources/script.js that there is very little code to handle the complex state management to update each chart when a selection is made on another chart. Qlik handles all this behind the scenes, as well as opening and closing realtime sockets to send and receive information deltas, allowing the charts to update as fast as possible.

Speed (Hypercube Engine)

In addition to speed on the client and over the wire, Qlik has at its heart a powerful in-memory compute engine which can rapidly filter and reduce large data sets in response to user input without any user-unfriendly batching or queueing operations.

Further Steps

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
web dev ,data visualization ,d3 ,node.js

Published at DZone with permission of Dave Nugent, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}