Seven Sketches book - Section 1.1 (Ordering Systems)

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Mon Nov 25 2019 06:27:51 GMT-0500 (Eastern Standard Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Seven Sketches book - Section 1.1 (Ordering Systems)
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 831580bcde8a5883f604ff896e21c920
Keywords: 

My Notes
--------
November 24, 2019

Three points/nodes: set P = {●,○,∗}
Five configurations/systems:
● ○ ∗
●○ ∗
●∗ ○
● ○∗
●○∗

or use parentheses to group nodes:
(●)(○)(∗)
(●○)(∗)
(●∗)(○)
(○∗)(●)
(●○∗)

My Early Ideas
--------------
- could do it as a grid 3 cols x n rows; one row per timestep
- could have rules that apply at each timestep
 - example: Choose one node at random. If it has no siblings, then it moves to next bin.

- the book also mentions Alice who makes observations
 - if I used a grid, then Alice could place true or false in a fourth column each timestep

- create an SVG video
 - each timestep, display a new d3 Circle Pack structure

- use Cellular Automata
- ABM simple rules generate emergence
- vary the number of nodes: 0 1 2 3 4 ...
 - currently, we use three
- move through the Hasse diagram, from initial to 3 intermediate to terminal

Graphviz
--------
/*
Automatically generated by Xholon version 0.9.1, using org.primordion.ef.Xholon2Graphviz.java
Mon Nov 25 06:16:14 GMT-500 2019 1574680574114
model: Seven Sketches book - Section 1.1 (Ordering Systems)
www.primordion.com/Xholon

To view this file, use Graphviz dot|fdp|neato|twopi|circo|sfdp from http://www.graphviz.org/
For example, to generate an SVG file:
  dot -Tsvg -O Systems_50_1574680574114.gv
Alternatively try one of these:
  dot -Tsvg -O Systems_50_1574680574114.gv
  dot -Tsvg -O -Grankdir=LR Systems_50_1574680574114.gv
  fdp -Tsvg -O Systems_50_1574680574114.gv
  neato -Tsvg -O Systems_50_1574680574114.gv
  circo -Tsvg -O Systems_50_1574680574114.gv
Or use one of: -Tgif -Tjpg -Tpdf -Tpng -Txdot -Txlib
See also: http://www.webgraphviz.com/
See also: http://rise4fun.com/agl/

To repeat this Xholon export:
 $wnd.xh.xport("Graphviz", $wnd.xh.root().parent().xpath("Chameleon/PhysicalSystem/Systems"), '{"gvFileExt":".gv","gvGraph":"digraph","layout":"dot","edgeOp":"->","gvCluster":"cluster","shouldShowStateMachineEntities":false,"filter":"--Behavior,Script","nameTemplateNodeId":"^^^^i^","nameTemplateNodeLabel":"R^^^^^","shouldQuoteLabels":true,"shouldShowLinks":true,"shouldShowLinkLabels":false,"shouldSpecifyLayout":false,"maxLabelLen":-1,"shouldColor":true,"defaultNodeColor":"#f0f8ff","bgGraphColor":"white","shouldSpecifyShape":true,"shape":"box","shouldSpecifySize":true,"size":"19","shouldSpecifyFontname":true,"fontname":"\"Courier New\"","shouldSpecifyArrowhead":true,"arrowhead":"vee","shouldSpecifyStylesheet":true,"stylesheet":"Xholon.css","shouldSpecifyRankdir":false,"rankdir":"LR","shouldDisplayGraph":true,"outputFormat":"svg"}');
*/
digraph 50 {
 graph [label="Systems",id="Systems",stylesheet="Xholon.css",size=19,fontname="Courier New",compound=true,bgcolor=white]
 node [style=filled,fillcolor="#f0f8ff",shape=box,fontname="Courier New"]
 edge [arrowhead=vee]
 subgraph cluster51 { label="initial" id="Systems/System[@roleName='initial']"
  subgraph cluster52 { label="Cnnctn" id="Systems/System[@roleName='initial']/Cnnctn[1]"
   53 [label="BlackCircle" id="Systems/System[@roleName='initial']/Cnnctn[1]/BlackCircle"]
  }
  subgraph cluster54 { label="Cnnctn" id="Systems/System[@roleName='initial']/Cnnctn[2]"
   55 [label="WhiteCircle" id="Systems/System[@roleName='initial']/Cnnctn[2]/WhiteCircle"]
  }
  subgraph cluster56 { label="Cnnctn" id="Systems/System[@roleName='initial']/Cnnctn[3]"
   57 [label="Star" id="Systems/System[@roleName='initial']/Cnnctn[3]/Star"]
  }
 }
 subgraph cluster58 { label="System" id="Systems/System[2]"
  subgraph cluster59 { label="Cnnctn" id="Systems/System[2]/Cnnctn[1]"
   60 [label="BlackCircle" id="Systems/System[2]/Cnnctn[1]/BlackCircle"]
   61 [label="WhiteCircle" id="Systems/System[2]/Cnnctn[1]/WhiteCircle"]
  }
  subgraph cluster62 { label="Cnnctn" id="Systems/System[2]/Cnnctn[2]"
   63 [label="Star" id="Systems/System[2]/Cnnctn[2]/Star"]
  }
 }
 subgraph cluster64 { label="System" id="Systems/System[3]"
  subgraph cluster65 { label="Cnnctn" id="Systems/System[3]/Cnnctn[1]"
   66 [label="BlackCircle" id="Systems/System[3]/Cnnctn[1]/BlackCircle"]
   67 [label="Star" id="Systems/System[3]/Cnnctn[1]/Star"]
  }
  subgraph cluster68 { label="Cnnctn" id="Systems/System[3]/Cnnctn[2]"
   69 [label="WhiteCircle" id="Systems/System[3]/Cnnctn[2]/WhiteCircle"]
  }
 }
 subgraph cluster70 { label="System" id="Systems/System[4]"
  subgraph cluster71 { label="Cnnctn" id="Systems/System[4]/Cnnctn[1]"
   72 [label="WhiteCircle" id="Systems/System[4]/Cnnctn[1]/WhiteCircle"]
   73 [label="Star" id="Systems/System[4]/Cnnctn[1]/Star"]
  }
  subgraph cluster74 { label="Cnnctn" id="Systems/System[4]/Cnnctn[2]"
   75 [label="BlackCircle" id="Systems/System[4]/Cnnctn[2]/BlackCircle"]
  }
 }
 subgraph cluster76 { label="terminal" id="Systems/System[@roleName='terminal']"
  subgraph cluster77 { label="Cnnctn" id="Systems/System[@roleName='terminal']/Cnnctn"
   78 [label="BlackCircle" id="Systems/System[@roleName='terminal']/Cnnctn/BlackCircle"]
   79 [label="WhiteCircle" id="Systems/System[@roleName='terminal']/Cnnctn/WhiteCircle"]
   80 [label="Star" id="Systems/System[@roleName='terminal']/Cnnctn/Star"]
  }
 }
}


References
----------
(1) Fong, Brendan and Spivak, David I. (2019), "An Invitation to Applied Category Theory: Seven Sketches in Compositionality" book

() https://en.wikipedia.org/wiki/Hasse_diagram

]]></Notes> 

<_-.XholonClass>
  <PhysicalSystem/>
  
  <!-- set P = {●,○,∗} -->
  <Point>
    <BlackCircle/>
    <WhiteCircle/>
    <Star/>
  </Point>
  
  <!-- should this be a Hyperedge? -->
  <!--<Connection/>-->
  <Cnnctn/>
  
  <System/>
  <Systems/>
  
</_-.XholonClass>

<xholonClassDetails>
  
  <System><Color>rgba(255,255,255,1.0)</Color></System>
  <Systems><Color>#98FB98</Color></Systems>
  <Cnnctn><Color>white</Color></Cnnctn>
  <BlackCircle><Symbol>&#x25CF;</Symbol></BlackCircle>
  <WhiteCircle><Symbol>&#x25CB;</Symbol></WhiteCircle>
  <Star><Symbol>&#x2217;</Symbol></Star>
  <Avatar><Color>red</Color><Symbol>&#x2062;</Symbol></Avatar> <!-- 2062 is INVISIBLE TIMES -->
  
</xholonClassDetails>

<PhysicalSystem>
  
  <!-- {●,○,∗} -->
  <System>
    <BlackCircle/>
    <WhiteCircle/>
    <Star/>
  </System>
  
  <!-- this implements a Hasse diagram -->
  <Systems>
    <System roleName="initial"><Cnnctn><BlackCircle/></Cnnctn><Cnnctn><WhiteCircle/></Cnnctn><Cnnctn><Star/></Cnnctn></System>
    <System><Cnnctn><BlackCircle/><WhiteCircle/></Cnnctn><Cnnctn><Star/></Cnnctn></System>
    <System><Cnnctn><BlackCircle/><Star/></Cnnctn><Cnnctn><WhiteCircle/></Cnnctn></System>
    <System><Cnnctn><WhiteCircle/><Star/></Cnnctn><Cnnctn><BlackCircle/></Cnnctn></System>
    <System roleName="terminal"><Cnnctn><BlackCircle/><WhiteCircle/><Star/></Cnnctn></System>
  </Systems>
  
  <Animate
 selection="#xhgraph"
 xpath="PhysicalSystem/Systems"
 duration="0.5"
 cssStyle=".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;} .Systems circle {stroke: #98FB98; stroke-width: 0.5px;} .System:not(.d3cpdummy) circle {stroke: #FB98FB; stroke-width: 0.5px;}"
 tweenScript="xhSvgTween_not"
 efParams="{
 &quot;selection&quot;:&quot;#xhgraph&quot;,
 &quot;sort&quot;:&quot;disable&quot;,
 &quot;width&quot;:100,
 &quot;height&quot;:100,
 &quot;mode&quot;:&quot;new&quot;,
 &quot;labelContainers&quot;:false,
 &quot;labelContainersOptions&quot;:&quot;center&quot;,
 &quot;includeId&quot;:true,
 &quot;includeClass&quot;:true,
 &quot;shape&quot;:&quot;circle&quot;,
 &quot;useSymbols&quot;:true,
 &quot;maxChars&quot;:1,
 &quot;togglePortColors&quot;:false,
 &quot;supportTouch&quot;:false,
 &quot;supportClick&quot;:true,
 &quot;supportContextmenu&quot;:true,
 &quot;supportDblclick&quot;:true,
 &quot;fontSizeMultiplier&quot;:2.75,
 &quot;maxSvg&quot;:100
 }"/>

</PhysicalSystem>

<PhysicalSystembehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  this.println(this.parent().name());
  var ani = this.parent().xpath("Animate");
  this.println(ani);
  this.parent().parent().append(ani.remove());
  $wnd.xh.avatar().action("enter;enter;next;enter;appear;");
  //# sourceURL=PhysicalSystembehavior.js
]]></PhysicalSystembehavior>

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

<svg width="1368pt" height="127pt"
 viewBox="0.00 0.00 1368.00 126.94" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Systems" class="graph" transform="scale(0.77027 0.77027) rotate(0) translate(4 160.8)">
<title>50</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-160.8 1772,-160.8 1772,4 -4,4"/>
<text text-anchor="middle" x="884" y="-8.2" font-family="Courier New" font-size="14.00">Systems</text>
<g id="Systems/System[@roleName=&#39;initial&#39;]" class="cluster"><title>cluster51</title>
<polygon fill="white" stroke="black" points="8,-32.8 8,-148.8 358,-148.8 358,-32.8 8,-32.8"/>
<text text-anchor="middle" x="183" y="-132.2" font-family="Courier New" font-size="14.00">initial</text>
</g>
<g id="Systems/System[@roleName=&#39;initial&#39;]/Cnnctn[1]" class="cluster"><title>cluster52</title>
<polygon fill="white" stroke="black" points="226,-40.8 226,-116.8 350,-116.8 350,-40.8 226,-40.8"/>
<text text-anchor="middle" x="288" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[@roleName=&#39;initial&#39;]/Cnnctn[2]" class="cluster"><title>cluster54</title>
<polygon fill="white" stroke="black" points="94,-40.8 94,-116.8 218,-116.8 218,-40.8 94,-40.8"/>
<text text-anchor="middle" x="156" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[@roleName=&#39;initial&#39;]/Cnnctn[3]" class="cluster"><title>cluster56</title>
<polygon fill="white" stroke="black" points="16,-40.8 16,-116.8 86,-116.8 86,-40.8 16,-40.8"/>
<text text-anchor="middle" x="51" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[2]" class="cluster"><title>cluster58</title>
<polygon fill="white" stroke="black" points="366,-32.8 366,-148.8 710,-148.8 710,-32.8 366,-32.8"/>
<text text-anchor="middle" x="538" y="-132.2" font-family="Courier New" font-size="14.00">System</text>
</g>
<g id="Systems/System[2]/Cnnctn[1]" class="cluster"><title>cluster59</title>
<polygon fill="white" stroke="black" points="452,-40.8 452,-116.8 702,-116.8 702,-40.8 452,-40.8"/>
<text text-anchor="middle" x="577" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[2]/Cnnctn[2]" class="cluster"><title>cluster62</title>
<polygon fill="white" stroke="black" points="374,-40.8 374,-116.8 444,-116.8 444,-40.8 374,-40.8"/>
<text text-anchor="middle" x="409" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[3]" class="cluster"><title>cluster64</title>
<polygon fill="white" stroke="black" points="718,-32.8 718,-148.8 1062,-148.8 1062,-32.8 718,-32.8"/>
<text text-anchor="middle" x="890" y="-132.2" font-family="Courier New" font-size="14.00">System</text>
</g>
<g id="Systems/System[3]/Cnnctn[1]" class="cluster"><title>cluster65</title>
<polygon fill="white" stroke="black" points="858,-40.8 858,-116.8 1054,-116.8 1054,-40.8 858,-40.8"/>
<text text-anchor="middle" x="956" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[3]/Cnnctn[2]" class="cluster"><title>cluster68</title>
<polygon fill="white" stroke="black" points="726,-40.8 726,-116.8 850,-116.8 850,-40.8 726,-40.8"/>
<text text-anchor="middle" x="788" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[4]" class="cluster"><title>cluster70</title>
<polygon fill="white" stroke="black" points="1070,-32.8 1070,-148.8 1414,-148.8 1414,-32.8 1070,-32.8"/>
<text text-anchor="middle" x="1242" y="-132.2" font-family="Courier New" font-size="14.00">System</text>
</g>
<g id="Systems/System[4]/Cnnctn[1]" class="cluster"><title>cluster71</title>
<polygon fill="white" stroke="black" points="1210,-40.8 1210,-116.8 1406,-116.8 1406,-40.8 1210,-40.8"/>
<text text-anchor="middle" x="1308" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[4]/Cnnctn[2]" class="cluster"><title>cluster74</title>
<polygon fill="white" stroke="black" points="1078,-40.8 1078,-116.8 1202,-116.8 1202,-40.8 1078,-40.8"/>
<text text-anchor="middle" x="1140" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<g id="Systems/System[@roleName=&#39;terminal&#39;]" class="cluster"><title>cluster76</title>
<polygon fill="white" stroke="black" points="1422,-32.8 1422,-148.8 1760,-148.8 1760,-32.8 1422,-32.8"/>
<text text-anchor="middle" x="1591" y="-132.2" font-family="Courier New" font-size="14.00">terminal</text>
</g>
<g id="Systems/System[@roleName=&#39;terminal&#39;]/Cnnctn" class="cluster"><title>cluster77</title>
<polygon fill="white" stroke="black" points="1430,-40.8 1430,-116.8 1752,-116.8 1752,-40.8 1430,-40.8"/>
<text text-anchor="middle" x="1591" y="-100.2" font-family="Courier New" font-size="14.00">Cnnctn</text>
</g>
<!-- 53 -->
<g id="Systems/System[@roleName=&#39;initial&#39;]/Cnnctn[1]/BlackCircle" class="node"><title>53</title>
<polygon fill="#f0f8ff" stroke="black" points="342.289,-84.8 233.711,-84.8 233.711,-48.8 342.289,-48.8 342.289,-84.8"/>
<text text-anchor="middle" x="288" y="-62.6" font-family="Courier New" font-size="14.00">BlackCircle</text>
</g>
<!-- 55 -->
<g id="Systems/System[@roleName=&#39;initial&#39;]/Cnnctn[2]/WhiteCircle" class="node"><title>55</title>
<polygon fill="#f0f8ff" stroke="black" points="210.289,-84.8 101.711,-84.8 101.711,-48.8 210.289,-48.8 210.289,-84.8"/>
<text text-anchor="middle" x="156" y="-62.6" font-family="Courier New" font-size="14.00">WhiteCircle</text>
</g>
<!-- 57 -->
<g id="Systems/System[@roleName=&#39;initial&#39;]/Cnnctn[3]/Star" class="node"><title>57</title>
<polygon fill="#f0f8ff" stroke="black" points="78,-84.8 24,-84.8 24,-48.8 78,-48.8 78,-84.8"/>
<text text-anchor="middle" x="51" y="-62.6" font-family="Courier New" font-size="14.00">Star</text>
</g>
<!-- 60 -->
<g id="Systems/System[2]/Cnnctn[1]/BlackCircle" class="node"><title>60</title>
<polygon fill="#f0f8ff" stroke="black" points="694.289,-84.8 585.711,-84.8 585.711,-48.8 694.289,-48.8 694.289,-84.8"/>
<text text-anchor="middle" x="640" y="-62.6" font-family="Courier New" font-size="14.00">BlackCircle</text>
</g>
<!-- 61 -->
<g id="Systems/System[2]/Cnnctn[1]/WhiteCircle" class="node"><title>61</title>
<polygon fill="#f0f8ff" stroke="black" points="568.289,-84.8 459.711,-84.8 459.711,-48.8 568.289,-48.8 568.289,-84.8"/>
<text text-anchor="middle" x="514" y="-62.6" font-family="Courier New" font-size="14.00">WhiteCircle</text>
</g>
<!-- 63 -->
<g id="Systems/System[2]/Cnnctn[2]/Star" class="node"><title>63</title>
<polygon fill="#f0f8ff" stroke="black" points="436,-84.8 382,-84.8 382,-48.8 436,-48.8 436,-84.8"/>
<text text-anchor="middle" x="409" y="-62.6" font-family="Courier New" font-size="14.00">Star</text>
</g>
<!-- 66 -->
<g id="Systems/System[3]/Cnnctn[1]/BlackCircle" class="node"><title>66</title>
<polygon fill="#f0f8ff" stroke="black" points="1046.29,-84.8 937.711,-84.8 937.711,-48.8 1046.29,-48.8 1046.29,-84.8"/>
<text text-anchor="middle" x="992" y="-62.6" font-family="Courier New" font-size="14.00">BlackCircle</text>
</g>
<!-- 67 -->
<g id="Systems/System[3]/Cnnctn[1]/Star" class="node"><title>67</title>
<polygon fill="#f0f8ff" stroke="black" points="920,-84.8 866,-84.8 866,-48.8 920,-48.8 920,-84.8"/>
<text text-anchor="middle" x="893" y="-62.6" font-family="Courier New" font-size="14.00">Star</text>
</g>
<!-- 69 -->
<g id="Systems/System[3]/Cnnctn[2]/WhiteCircle" class="node"><title>69</title>
<polygon fill="#f0f8ff" stroke="black" points="842.289,-84.8 733.711,-84.8 733.711,-48.8 842.289,-48.8 842.289,-84.8"/>
<text text-anchor="middle" x="788" y="-62.6" font-family="Courier New" font-size="14.00">WhiteCircle</text>
</g>
<!-- 72 -->
<g id="Systems/System[4]/Cnnctn[1]/WhiteCircle" class="node"><title>72</title>
<polygon fill="#f0f8ff" stroke="black" points="1398.29,-84.8 1289.71,-84.8 1289.71,-48.8 1398.29,-48.8 1398.29,-84.8"/>
<text text-anchor="middle" x="1344" y="-62.6" font-family="Courier New" font-size="14.00">WhiteCircle</text>
</g>
<!-- 73 -->
<g id="Systems/System[4]/Cnnctn[1]/Star" class="node"><title>73</title>
<polygon fill="#f0f8ff" stroke="black" points="1272,-84.8 1218,-84.8 1218,-48.8 1272,-48.8 1272,-84.8"/>
<text text-anchor="middle" x="1245" y="-62.6" font-family="Courier New" font-size="14.00">Star</text>
</g>
<!-- 75 -->
<g id="Systems/System[4]/Cnnctn[2]/BlackCircle" class="node"><title>75</title>
<polygon fill="#f0f8ff" stroke="black" points="1194.29,-84.8 1085.71,-84.8 1085.71,-48.8 1194.29,-48.8 1194.29,-84.8"/>
<text text-anchor="middle" x="1140" y="-62.6" font-family="Courier New" font-size="14.00">BlackCircle</text>
</g>
<!-- 78 -->
<g id="Systems/System[@roleName=&#39;terminal&#39;]/Cnnctn/BlackCircle" class="node"><title>78</title>
<polygon fill="#f0f8ff" stroke="black" points="1744.29,-84.8 1635.71,-84.8 1635.71,-48.8 1744.29,-48.8 1744.29,-84.8"/>
<text text-anchor="middle" x="1690" y="-62.6" font-family="Courier New" font-size="14.00">BlackCircle</text>
</g>
<!-- 79 -->
<g id="Systems/System[@roleName=&#39;terminal&#39;]/Cnnctn/WhiteCircle" class="node"><title>79</title>
<polygon fill="#f0f8ff" stroke="black" points="1618.29,-84.8 1509.71,-84.8 1509.71,-48.8 1618.29,-48.8 1618.29,-84.8"/>
<text text-anchor="middle" x="1564" y="-62.6" font-family="Courier New" font-size="14.00">WhiteCircle</text>
</g>
<!-- 80 -->
<g id="Systems/System[@roleName=&#39;terminal&#39;]/Cnnctn/Star" class="node"><title>80</title>
<polygon fill="#f0f8ff" stroke="black" points="1492,-84.8 1438,-84.8 1438,-48.8 1492,-48.8 1492,-84.8"/>
<text text-anchor="middle" x="1465" y="-62.6" font-family="Courier New" font-size="14.00">Star</text>
</g>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>