Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Unit Visualizations
<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook MIT License, Copyright (C) Ken Webb, Sat Aug 01 2020 10:25:24 GMT-0400 (Eastern Daylight Time)-->
Title: Unit Visualizations
InternalName: b224f2b19eb32a3afd7b7945eebe884d
My Notes
August 1, 2020
Unit Visualizations vs Aggregated Visualizations
KSW: analogous to Agent-Based Modeling (ABM) Individual-Based Modeling vs ODE (Calculus), statistical modeling (Data Science)
Atom: Unit Visualization Grammar
JavaScript, HTML, CSS
Deok Gun Park
Assistant Professor Computer Science and Engineering University of Texas at Arlington
Dr. Deokgun Park
Atom: A Grammar for Unit Visualizations
Deokgun Park, Steven M. Drucker, Roland Fernandez, Niklas Elmqvist
Visually explore, understand, and present your data.
By using easy-to-understand views, SandDance helps you find insights about your data,
which in turn help you tell stories supported by data, build cases based on evidence,
test hypotheses, dig deeper into surface explanations, support decisions for purchases,
or relate data into a wider, real world context.
SandDance uses unit visualizations, which apply a one-to-one mapping between rows in your database and marks on the screen.
Smooth animated transitions between views help you to maintain context as you interact with your data.
using SandDance with React
The VIDA (Visualization and Interactive Data Analysis) Group focuses on a human-centric approach to working with data,
exploring areas such as data visualization, communicating with data, the creation of tools for working with data,
immersive analytics, and interaction and understanding of machine learning models.
MorphCharts illustrates how complex data can be visualized using a web browser in both mixed and plain reality to immerse a user in a story and communicate insights.
Immersive visualization and storytelling techniques allow insights in complex data to be communicated more effectively.
An browser-based WebGL application
A Unifying Framework for Animated and Interactive UnitVisualizations
Steven M. Drucker and Roland Fernandez
() is a WebGL-powered framework for visual exploratory data analysis of large datasets.
Pure JS or React
<!-- domain objects -->
<!-- quantities -->
<Height superClass="Quantity"/>
<port name="height" connector="Height"/>
<Height>0.1 m</Height>
<Brick multiplicity="2"/>
<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var a = 123;
var b = 456;
var c = a * b;
if (console) {
//# sourceURL=Blockbehavior.js
<Heightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var myHeight, testing;
var beh = {
postConfigure: function() {
testing = Math.floor(Math.random() * 10);
myHeight = this.cnode.parent();
act: function() {
toString: function() {
return "testing:" + testing;
//# sourceURL=Heightbehavior.js
<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
$wnd.xh.Brickbehavior = function Brickbehavior() {}
$wnd.xh.Brickbehavior.prototype.postConfigure = function() {
this.brick = this.cnode.parent();
this.iam = " red brick";
$wnd.xh.Brickbehavior.prototype.act = function() {
this.brick.println("I am a" + this.iam);
//# sourceURL=Brickbehavior.js
<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
console.log("I'm another brick behavior");
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="">
<rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
<rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.