Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
308 lines (215 sloc) 22.1 KB

My Data Visualizer Documentation

Contents

Introduction

  • My Data Visualizer is the easiest way to visualize your low-data-volume-high-information-value WebGL 3D visuals.
  • It's an excellent framework to visualize measures and dimensions from Internet of Things visual assets.
  • The application implements the DataVisual design pattern.
  • My Data Visualizer is a 100% Client-side application; your data is not uploaded to a server or the cloud.

Demonstration Site

Note:

  • This documentation describes features and functionality in the free version of My Data Visualizer.
  • The full licensed version of the application and framework has additional features detailed in a separate document.

Quick Start

Screen Shot of My Data Visualizer Body Demo

  • The quickest work-flow is utilizing a glTF with data in a .csv file.

  • To get started, you will need a .glTF (or .glb file) and a .csv file with the data that will be visualized.

  • The documentation repository has a working example for the Body DataVisual you can use to model your own DataVisuals. It contains:

    Repository File Description
    Body.gltf A .gltf text export of the Body.blend file with Data URIs.
    Body.csv A .csv file with data to drive the Body DataVisual.
    Body.glb A .glb binary export of the Body.blend file.
    Body.blend The original Blender 2.79b file used to export the .gltf and .glb files. Use this file to see how a 3D visual asset is built in Blender. Other applications that export glTF files can be used as well if the meshes visualized have distinct/unique materials assigned to them.
  • Only the Body.gltf and Body.csv files are necessary for the Quick Start.

  • As shown in the Body DataVisual, the following are the requirements for the glTF and CSV data files:

    • Body.gltf:

      • Each mesh that will be visualized with the data must have a unique name attribute and material associated with it.
      • The name attibute value is case sensitive and matches name column values in the data.
      • name attribute values will be sanitized before a match is attempted against the data.
        • Example: A name of 'Cube.001' is sanitized to 'Cube001'; with the '.' removed from the name's value.
    • Body.csv Data:

      name INSURANCE_CLAIMS DOCTOR_VISITS LAB_ORDERS DATE_LAST_TEST COLOR_INSURANCE_CLAIMS LINK_
      Brain 27000 3 0 2019-02-01T00:00 green http://www.bing.com/search?q=
      Heart 234000 11 6 12019-06-09T00:00 red http://www.bing.com/search?q=
      Kidneys 14500 5 1 2019-08-01T00:00 yellow http://www.bing.com/search?q=
    • Body.csv Data column descriptions:

      CSV Column Description
      name The values in the name column match the glTF mesh names.
      INSURANCE_CLAIMS Insurance Claim values associated with the name attribute values.
      DOCTOR_VISITS Doctor visits associated with the name attribute value.
      LAB_ORDERS Lab Order values associated with the name attribute values.
      DATE_LAST_TEST Contains the ECMA Script formatted date for the LAST_TEST. The 'DATE_' prefix designates the data column as a JavaScript Date. Other supported prefies are 'DATETIME_' and 'TIME_'.
      COLOR_INSURANCE_CLAIMS Contains pre-defined colors for the INSURANCE_CLAIMS column. The 'COLOR_' prefix designates the column as a pre-define color value column. Any CSS Color Name or Hex Color value can be used to pre-define a color.
      LINK_ Contains optional HyperLinks associated with name column values. At run-time, My Data Visualizer will append the name column value to the 'LINK_' column value and instruct the browser to navigate to that url.

Background

General

My Data Visualizer was developed to add an important dimension to data visualization; WebGL 3D graphics.

With My Data Visualizer data is contextualized on a 3D graphic representation of the real-world objects that the data is associated with.

For example, the following screen shot visualizes passenger revenue on a plane for each assigned seat location:

Screen Shot of My Data Visualizer Plane Visualization

Technical

The following two Computational Essays hosted on ObservableHQ.com provide a technical background on the design approach for My Data Visualizer:

Requirements

My Data Visualizer requires:

  • Data (measures and dimensions) following a set of simple specifications;
  • WebGL 3D Graphic with addressable material(s) for the graphic's sub-components that will be visualized.

Both of these components can be uploaded (see screen shot) to the demonstration application as one of the following:

  • A .gltf or .glb file with its associated .csv file (see Quick Start for an example);
  • A .gltf file with embedded data; (see the repository for several examples).
  • A .glb file with the embedded data (see the repository for several examples).

Data that are uploaded are parsed with the D3 AutoType parser.

Screen Shot of My Data Visualizer Upload

Data

The data to be visualized can be in either a .csv file or embedded in the glTF file that describes the WebGL 3D graphic itself.

name INSURANCE_CLAIMS DOCTOR_VISITS LAB_ORDERS DATE_LAST_TEST COLOR_INSURANCE_CLAIMS LINK_
Brain 27000 3 0 2019-02-01T00:00 green http://www.bing.com/search?q=
Heart 234000 11 6 12019-06-09T00:00 red http://www.bing.com/search?q=
Kidneys 14500 5 1 2019-08-01T00:00 yellow http://www.bing.com/search?q=
  • Creating a .csv file with the data is relatively simple and can be accomplished with spreadsheet; like Microsoft Excel.

  • In contrast, BodyEmbeddedData.gltf illustrates the embedded data scenario. Below is a reference to one of the several extras sections hosting the data associated with the individual meshes:

 
	"extras": {
					"LINK_": "http://www.bing.com/search?q=",			
					"COLOR_INSURANCE_CLAIMS": "green",
					"DATE_LAST_TEST": "2019-02-01T00:00",
					"DOCTOR_VISITS": 3.0,
					"INSURANCE_CLAIMS": 27000.0,
					"LAB_ORDERS": 0.0
				}

Special Note
  • The data specifications for the free/demonstration version of My Data Visualizer are more restrictive than those described in the DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets and the business version.
  • Specifically, the attribute used to match/join the data to the visual objects is the name attribute associated with each individual mesh that is the target of a visualization.
  • Refer back to the Quick Start for a specific example of this with the name attribute referenced in both the data and glTF file.
Data Attributes

The following table summarizes the data attributes supported by My Data Visualizer for data hosted in either a .csv file or embedded within the glTF file:

Attribute Description
name The value associated with the name attribute must match the glTF mesh names.
dimension An attribute identifier for a dimension(s). Examples: 'Part Number', 'Part_Number', 'PartNumber'
measure An attribute identifier for a measure(s). Example: 'Number of Complaints', 'Number_of_Complaints', 'NumberOfComplaints'
COLOR_dimension, COLOR_measure An indentifier with the 'COLOR_' prefix designates an pre-define color attribute for a given measure or dimension. Values can be any CSS color name or hex triple value.
DATE_dimension, DATETIME_dimension, TIME_dimension An attriute identifier for an ECMA Script formatted date specified as a dimension . The 'DATE_', 'DATETIME_' and 'TIME_' prefixes designate the data as a JavaScript Date.
LINK_ An attribute identifier for optional HyperLinks associated with name column values. At run-time, My Data Visualizer will append the name column value to the 'LINK_' column value and instruct the browser to navigate to that url.

WebGL 3D Graphic

Analysis

My Data Visualizer has three primary panels used in the data visualization analysis:

  • Data Visual
  • Analyzer
  • Visual Grid

Data Visual

The Data Visual panel displays a 3D rendering of the WebGL graphic. Several mouse interactions, quick keys and buttons are available to interact with the visual (see screen shot):

Mouse Action Description
Left Rotate
Scroll Zoom
Right Pan
Left Double-Click Toggle search isolation of an object.
CtrlKey + Left Select an object and navigate link(s). If a link is associate wth an object, a selection drop will be displayed allowing navigation to the designated address (see screen shot).
Key Description
Arrow Pan
'b' 'B'ird's-eye View/Rotate
'c' or 'Esc' 'C'lear Data Selections
Button Description
GPU Performaance Displays Graphic Processing Unit (GPU) statistics.
Reset View Resets Bird's-eye View.
Axes Toggles display of the origin axes associate with the visual.
Background A color selection picker for the background color.
Bounding Box/Color Toggles disply of a visual bounding box and color selection.
Camera Field of View Allows selection of the visual's field of view.
Polar Angel Allows selection of the rotation polar angle. With a polar angle of 180 degrees, the image can be viewed from underneath.
Zoom Speed Controls the scroll zooming speed for a visual.
Pan Speed Controls the pan speed.
Grid/Grid Color Toggles the display of the visual's grid and its color.
Center Line Color Sets the center line color for the grid when it is being displayed.
Grid Divisions Sets the number of grid divisions when it is being displayed.

Screen Shot of My Data Visualizer ForkLift1

Analyzer

The Toggle Analyzer button toggles the display of the Analyzer panel. It contains the Data Grid, Visualization Scale/Legend sub panels.

In the following screen shot:

  • The PART dimension associated with the Forklift visual is selected.
  • A red (low) to green (high) color scale is selected and alphabetically assigned to the individual parts in the legend and visual sub-components.

Screen Shot of My Data Visualizer ForkLift2

Data Grid

The Data Grid:

  • Displays the data that visualizes the 3D WebGL graphic.
  • Selecting a column directs the application to visualize the graphic by either a scale colorization determined by the column's values or preset color assignments.
  • Selecting the Visualize Grid button will color visualize the Data Grid itself.
  • Searches or row selections can be performed on the the Data Grid to isolate sub-objects in the visual panel.
  • When the Visual Grid is being displayed, searches in the *Data Grid are coordinated with it.

Visualization Scale and Legend

The Visualization Scale and Legend panels display a color scale selection wheel with its corresponding legend. The left mouse button is used to select the desired scale.

The triangle in the Visualization Scale panel illustrates the color scale from low to high values.

Screen Shot of My Data Visualizer ForkLift3

Visual Grid

The Visual Grid:

  • Is enabled with the Toggle Visual Grid button.
  • Displays specific attributes common to all visuals; name, Color (the original color associated with a mesh), id, x coordinate, y coordinate and z coordinate.
  • Selecting a column directs the application to visualize the graphic by either a scale colorization determined by the column's values or the original color assignments.
  • Selecting the Visualize Grid button will color visualize the Visual Grid itself.
  • Searches or row selections can be performed on the the Visual Grid to isolate sub-objects in the visual panel.
  • When the Data Grid is being displayed, searches in the *Visual Grid are coordinated with it.

Screen Shot of My Data Visualizer ForkLift4

Built With

The following frameworks and applications were used to build My Data Visualizer:

Creator

License

  • My Data Visualizer is free for all non-profit entities.
  • Businesses and comerical enterprises must purchase a license.
    • The license includes access to the My Data Visualizer JavaScript-based framework; which developers can use to embed data-driven WebGL assets in their applications.
You can’t perform that action at this time.