Unit Visualizations

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sat Aug 01 2020 10:25:24 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Unit Visualizations
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: b224f2b19eb32a3afd7b7945eebe884d
Keywords: 

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)


References
----------
() https://intuinno.github.io/unit/#/
    Atom: Unit Visualization Grammar

() https://github.com/intuinno/unit
    JavaScript, HTML, CSS

() https://github.com/intuinno
    Deok Gun Park
    intuinno
    Assistant Professor Computer Science and Engineering University of Texas at Arlington

() http://crystal.uta.edu/~park/
    Dr. Deokgun Park

() http://crystal.uta.edu/~park/publication/atom/
    Atom: A Grammar for Unit Visualizations
    Deokgun Park, Steven M. Drucker, Roland Fernandez, Niklas Elmqvist
 ) http://crystal.uta.edu/~park/files/atom/atom.pdf
 ) http://crystal.uta.edu/~park/files/atom/atom_slide.pdf
 ) https://vimeo.com/289789243

() https://github.com/microsoft/SandDance
    SandDance
    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.

() https://github.com/microsoft/SandDance/blob/master/packages/sanddance-react/README.md
    using SandDance with React

() https://aka.ms/vida
 ) https://www.microsoft.com/en-us/research/group/vida/
    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.

() https://www.microsoft.com/en-us/research/project/morphcharts/
    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
 ) http://morphcharts.com/

() https://www.microsoft.com/en-us/research/wp-content/uploads/2016/02/sanddance.pdf
    A Unifying Framework for Animated and Interactive UnitVisualizations
    Steven M. Drucker and Roland Fernandez

() https://deck.gl/
    deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
    Pure JS or React

() https://github.com/visgl/deck.gl

() https://stevenmdrucker.github.io/#/Research

]]></Notes>  

<_-.XholonClass>

  <!-- domain objects -->
  <PhysicalSystem/>
  <Block/>
  <Brick/>
  
  <!-- quantities -->
  <Height superClass="Quantity"/>
  
</_-.XholonClass>

<xholonClassDetails>
  <Block>
    <port name="height" connector="Height"/>
  </Block>
</xholonClassDetails>

<PhysicalSystem>
  <Block>
    <Height>0.1 m</Height>
  </Block>
  <Brick multiplicity="2"/>
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var a = 123;
  var b = 456;
  var c = a * b;
  if (console) {
    console.log(c);
  }
  //# sourceURL=Blockbehavior.js
]]></Blockbehavior>

<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() {
      myHeight.println(this.toString());
    },
    toString: function() {
      return "testing:" + testing;
    }
  }
  //# sourceURL=Heightbehavior.js
]]></Heightbehavior>

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

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  console.log("I'm another brick behavior");
]]></Brickbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Height</title>
      <rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>