Free and Secure Data Visualization Tool, HEARTCOUNT Play Playbook

Sidney @HEARTCOUNT
HEARTCOUNT
Published in
6 min readOct 30, 2018

HEARTCOUNT Play, exploring both the obvious and non-obvious patterns from the data at the speed of thought

HEARTCOUNT Play is HEARTCOUNT’s most versatile data visualization feature we’ve made publicly available.

Simply put, data visualization is a process of mapping data values into graphical elements (shape, size, color, position, etc.) to better understand data. And, there is no lack of free and commercial data visualization tools that are mostly incomplete, frustratingly difficult or boring, and slow.

The core design principle of HEARTCOUNT Play is to let the users describe, explore, and summarize the given dataset at the speed of thought, not at the speed constrained by data architecture of the tool. Therefore, the user can completely forget about the underlying technology and mechanics, and solely focus on asking relevant questions to the data and interpreting what’s revealed in front of their eyes.

And, to achieve this, HEARTCOUNT has adopted a whole new approach, which I will explain hereafter.

How-To Access & Supported Dataset

How-to Access:

  • Type the URL in your modern browser or just click the link below
  • No sign-up/in required.
URL: https://www.heartcount.play/

Supported Dataset:

  • File Type: Excel or CSV files
  • File Size: there currently is no hard limit, and the performance depends exclusively on your PC’s computing power. as a rule of thumb, <50MB is recommended for optimal performance.
  • *First Row Should Contain Column(Variable) Names

How Does It Work

HEARTCOUNT prepares and stores the complete dataset combining the entire raw data and associated meta data in the browser’s memory so that the user can keep asking new questions(i.e., mapping new variables to the visual elements; sales variable to Y-axis, product_category variable to X-axis, and other variables to color, size, etc.) without any noticeable delay. To further elaborate:

  1. First, HEARTCOUNT Play, running on your browser, pre-processes the raw tabular(rectangular) dataset the user passes to the Play to generate the metadata(e.g., variable type, statistics, and transformed variables, etc.) necessary for visually exploring and summarizing(e.g., average and distribution) the given dataset.
  2. Then, our proprietary Javascript visualization library interprets user’s question(i.e., data_values to visual_elements mapping) and renders the corresponding and context-aware visualization on the fly: HEARTCOUNT is the only tool in the world that can interactively visualize over 300,000 individual records (instead of showing only the aggregated or randomly clipped data).
[visually understand the patterns at the raw data level without any artificial abstraction]

n.b. the dataset the user passes to HEARTCOUNT Play is NEVER uploaded to the external servers, but always stays within the user’s PC. (Play is 100% front-end technology that does not depend on server-side computation)

Basic Tutorials

Dataset selection: Once you access the site, you can either choose the dataset of your own, or play with one of our sample datasets.

Alternatively, you can directly access an excel/csv file from the cloud using [downloadable URL] such as https://www.heartcount.io/play/?remote=[downloadable URL]

remote file access example: https://www.heartcount.io/play/?remote=https://dl.dropboxusercontent.com/s/2griyw6yv8iaf0r/online-data-chapter-2-whr-2017.xlsx

Visually Explore and Analyze the Dataset: Once a dataset is selected and processed, you will see the screen similar to the following (below is one of our sample datasets, superstore):

  • A. Population Filter: population filter(filter icon at the top left-hand corner) is for selecting subset records from the active dataset. You will get the idea of how to use [Population Filter] by watching the below video.
[population filter to select a subset of records to analyze]
  • B-1. Two axes: You have to select two variables for Y-axis and X-axis respectively. Only a numerical variable can be assigned to Y-axis while either a numerical or categorical variable can be assigned to X-axis. (you might want to assign a target variable you want to quantitatively understand to Y-axis)
  • B-2. Subgroup when X-axis is numeric: Sub-group basically means grouping(aggregating) all the individual records/marks on the screen by the chosen categorical variable. When both Y and X-axis are numeric, subgroup aggregates all the records on the cartesian coordinate system(i.e., on your screen) by the chosen variable (Product.Sub.Category in the example below).

default subgroup calculation method is [average]. you can change it to either [sum] or [count]. in case of [count], the record count for each subgroup class is calculated excluding NA values.

[subgrouping by product.sub.category when both X and Y-axes arenumerical]
  • B-3. Subgroup when X-axis is categorical:
  1. first, subgroup(aggregation) can be done by X-axis itself, that is to say, by the categorical variable already assigned to X-axis.
  2. secondly, subgroup can be done by another categorical variable: all the individual records belonging to each class/level(e.g., Consumer, Corporate, etc.) on X-axis will be aggregated by the chosen categorical variable(Product.Container for example below).
  3. lastly, subgroup can be done against another numerical variable. since aggregation cannot be performed against a numerical variable, HEARTCOUNT automatically transforms a numerical variable into a categorical variable (a.k.a. binning or variable transformation) and use the transformed variable for aggregation.
[subgrouping when X-axis is categorical]
  • C. Visual Effect: context-aware icons appear at the upper-right side of plot pane(main window) to aid the user to describe and understand the data better.
  • C-1. Visual Effect when [Y: number, X: number, Subgroup: No]: two icons will appear: one for correlation(trend line; r represents correlation coefficient), the other for heat(density) map. both are calculated against the selected records. please take a look at the video below to see how this works.
[trend line and heatmap]
  • C-2. Visual Effect when [Y: number, X: category, Subgroup: No]: when Y and X are respectively mapped to a numeric and categorical variable, a following icons set appear: each is unique and complementary way to visualize distribution for each category.
[distribution icon sets]
[variety ways to visualize and understand data distribution]
  • C-3. Visual Effect when [Y: number, X: category, Subgroup: Yes]: when Y and X are mapped to a numeric and categorical variable, and subgroup is selected, bar chart icons appear: one is for multiple bar chart, the other for stacked bar chart.
  • D. Control Pane:

Top area of the Control Pane is for zooming-in a specific subset: once you select a subset of records(shown as dot) in the main window(plotting area), you can either isolate or remove the selected/highlighted marks/dots. you can also choose to set NA values to 0(zero).

Middle area contains the same feature shown at the top of plotting area(X, Y, subgroup). in this section of control pane, you can additionally choose to set show 0 for each axis. (by default, HEARTCOUNT Play draws dynamic scale optimized for the range of given data value)

Bottom area is for other aesthetics such as [color by] and [size by]. you can also use [filter by] to select marks/dots by a range of the chosen numeric variable.

Roadmap

  • Stories: Turning Visualization into Stories. stories feature will be added so that the user can create and share the data stories (narrative combines with visualization in stories format). (Dec 2018)
  • Time-Series: visualization for time-series data will be enhanced. currently a variable containing time data is treated as ordinal(ordered) categorical variable

--

--