• Introduction
  • Demonstration Site
• Quick Start
• Background
  • General
  • Technical
• Requirements
  • Data
    • Data Attributes
  • WebGL 3D Graphic
• Analysis
  • Data Visual
  • Analyzer
    • Data Grid
    • Visualization Scale and Legend
  • Visual Grid
• Built With
• Creator
• License

• 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.

• My Data Visualizer Demo

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.

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

  • You can use the files described here as a template for your DataVisual that is uploaded to My Data Visualizer.
    • Data that are uploaded are parsed with the D3 AutoType parser.
  • Embedded data in the glTF is another work-flow discussed in detail in this documentation.

• 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.

  • The Body.glb file is included as an example of a binary export.
  • The Body.csv file's data can be used to visualize either Body.gltf or Body.glb.

• 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.

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:

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

• DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets and
• DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets using a glTF with Embedded Data

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.

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.

• The Body.csv is an example of the data associated with the Body.gltf file:

• 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
				}

• The embedded data scenario involves using a graphical tool that allows you to add the extras sections to the WebGL 3D graphics. The github repository Python Script to Add Blender Custom Properties From CSV File details one possbile approach for developers that use the popular Blender application.

  • This video also provides step-by-step instructions on adding Custom Properties to Blender that are then embedded as extras when a Blender glTF file is exported:

  

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:

• The WebGL 3D Graphic is described in a glTF file with the 2.0 specifications.
• Several examples are provided in the documentation repository.

  • Note that each individual mesh (object sub-component) must have a distinct material associated with it. If this condition is not satisfied, the visualization logic can not drive sub-component visualizations.

  • In addition, the glTF file must have any buffers and images for the .gltf file referenced with embedded Data URIs.

    • This is a specific export option with the Blender glTF exporter.

  • This video is a tutorial for exporting a glTF with Blender:

    

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

• Data Visual
• Analyzer
• Visual Grid

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):

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.

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.

The Visualization Scale and Legend panels display a color scale selection slider 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.

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.

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

• D3.js - D3 framework
• Three.js - Three.js framework
• glTF - Khronos' graphic library Transmission Format
• GLTFLoader - A loader for glTF 2.0 resources
• Blender - For building a 3D visual and exporting it to a glTF file.
• w2ui UI Library

• Mario Delgado Github: MarioDelgadoSr
• LinkedIn: Mario Delgado
• My Data Visualizer: A data visualization application using the DataVisual design pattern.
• Contact: MyDataVisualizer(at)gmail.com.

• My Data Visualizer is free for all non-profit entities.
• Businesses and commercial enterprises are granted a full-use license as long as they make their application freely available to non-profits.