D3 Examples - Vega-force testing ground

Vega-force testing ground

A Vega port of the force testing ground I originally made in D3.

Features I can't figure out how to port to Vega:

Need "actualWidth" and "actualHeight" signals for autosized SVG

Position signal control as text label <br/> control (would need feature to specify label's parent element or specify descriptive text)

forceX and forceY don't seem to behave correctly

Can't disable/enable link force (may need "enabled" parameter for force)

Get simulation alpha (likely not possible with vega)

~~circle radius = collideRadius (problem with using path instead of circle?)~~ (thanks Jeff Heer)

~~circle stroke color doesn't like ternary operator~~ (thanks Jeff Heer)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <script src="https://vega.github.io/vega/assets/promise.min.js"></script>
    <script src="https://vega.github.io/vega/vega.js"></script>
</head>
<body>
<style>
/* HTML styles */
html{ width: 100%; }
body{ 
  width: 100%; 
  margin: 0; padding: 0; 
  display: flex; 
  font-family: sans-serif; font-size: 75%; }
.controls {
  flex-basis: 200px;
  padding: 0 5px;
}
.controls .force {
  background-color:#eee;
  border-radius: 3px;
  padding: 5px;
  margin: 5px 0;
}
.controls .force p label { margin-right: .5em; font-size: 120%; font-weight: bold;}
.controls .force p { margin-top: 0;}
.controls .force label { display: inline-block; }
.controls input[type="checkbox"] { transform: scale(1.2, 1.2); }
.controls input[type="range"] { margin: 0 5% 0.5em 5%; width: 90%; }
/* for now, hide vega labels */
.controls .force .vega-bind { display: inline-flex; }
.controls .force .vega-bind .vega-bind-name { order: 0; }
.controls .force .vega-bind label { order: 1; }
.controls .force .vega-bind input { order: 2; }
.controls .force .vega-bind-name { display: none; }
/*.controls .force p label .vega-bind { display: inline; }*/
/* alpha viewer */
.controls .alpha p { margin-bottom: .25em; }
.controls .alpha .alpha_bar { height: .5em; border: 1px #777 solid; border-radius: 2px; padding: 1px; display: flex; }
.controls .alpha .alpha_bar #alpha_value { background-color: #555; border-radius: 1px; flex-basis: 100% }
.controls .alpha .alpha_bar:hover { border-width: 2px; margin:-1px; }
.controls .alpha .alpha_bar:active #alpha_value { background-color: #222 }
​
/* SVG styles */
#chart, svg {
  flex-basis: 100%;
  min-width: 200px;
  height: 100%;
}
.links line {
  stroke: #aaa;
}
.nodes circle {
  pointer-events: all;
}
​
</style>
</head>
<body>
<div class="controls">
  <div class="force alpha">
    <p><label>alpha</label> Simulation activity</p>
    <div class="alpha_bar" onclick="updateAll();"><div id="alpha_value"></div></div>
  </div>
  <div class="force">
    <p><label>center</label> Shifts the view, so the graph is centered at this location.</p>
    <label>
      x: <span id="centerX"></span>
    </label>
    <label>
      y: <span id="centerY"></span>
    </label>
  </div>
​
  <div class="force">
    <p><label><span id="chargeEnabled"></span> charge</label> Attracts (+) or repels (-) nodes to/from each other.</p>
    <label title="Negative strength repels nodes. Positive strength attracts nodes.">
      strength: <span id="chargeStrength"></span>
    </label>
    <label title="Minimum distance where force is applied">
      distanceMin: <span id="chargeDistanceMin"></span>
    </label>
    <label title="Maximum distance where force is applied">
      distanceMax: <span id="chargeDistanceMax"></span>
    </label>
  </div>
​
  <div class="force">
    <p><label><span id="collideEnabled"></span> collide</label> Prevents nodes from overlapping</p>
    <label>
      strength: <span id="collideStrength"></span>
    </label>
    <label title="Size of nodes">
      radius: <span id="collideRadius"></span>
    </label>
    <label title="Higher values increase rigidity of the nodes (WARNING: high values are computationally expensive)">
      iterations: <span id="collideIterations"></span>
    </label>
  </div>
​
  <div class="force">
    <p><label><span id="forceXEnabled"></span> forceX</label> Acts like gravity. Pulls all points towards an X location.</p>
    <label>
      strength: <span id="forceX_Strength"></span>
    </label>
    <label title="The X location that the force will push the nodes to (NOTE: This demo multiplies by the svg width)">
      x: <span id="forceX_X"></span>
    </label>
  </div>
​
  <div class="force">
    <p><label><span id="forceYEnabled"></span> forceY</label> Acts like gravity. Pulls all points towards a Y location.</p>
    <label>
      strength: <span id="forceY_Strength"></span>
    </label>
    <label title="The Y location that the force will push the nodes to (NOTE: This demo multiplies by the svg height)">
      y: <span id="forceY_Y"></span>
    </label>
  </div>
​
  <div class="force">
    <p><label><span id="linkEnabled"></span> link</label> Sets link length</p>
    <label title="The force will push/pull nodes to make links this long">
      distance: <span id="linkDistance"></span>
    </label>
    <label title="Higher values increase rigidity of the links (WARNING: high values are computationally expensive)">
      iterations: <span id="linkIterations"></span>
    </label>
  </div>
</div>
<div id="chart"></div>
​
​
​
​
​
​
​
<script src="spec.js"></script>
<script>
​
var view = new vega.View(vega.parse(spec), {
  loader: vega.loader({baseURL: 'https://vega.github.io/vega/'}),
  logLevel: vega.Warn,
  renderer: 'svg'
}).initialize('#chart').hover().run();
​
</script>
​
    