Space

Demonstration of space with a rapid change

HTML

<div id='visualization'></div>

CSS

body {
  font: 10px 'Gudea', sans-serif;
  background: #111;
  overflow: hidden;
}
.node {
    fill: #77B72B;
    stroke: #fff;
    stroke-width: 1px;
}
rect {
    fill: steelblue;
}

JavaScript

/**
 * @fileoverview Business Landscape Explorer Space
 * @author MooD International
 */
mood = { d3: {} };

/**
* Generates the space area
* @constructor
*/
mood.d3.Space = function() {
   
  // Protect against missing new keyword
  if(!(this instanceof mood.d3.Space)) {
    return new mood.d3.Space();
  }

  // Local variables
  var alpha = 0.006;  // This is the warmth of the system. The more warmth the faster things move
  var maxSpeed = 10;  // Maximum speed a planet can go
  var force;

  // D3 variables
  var svg;
  var nodes;
  var rect;
  var group;

  // Properties with getter/setters
  var data;
  var width = 500;
  var height = 500;
  



  /**
   * Function that updates the data for the current visualization
   * @param {object} The data
     * @returns {object} this instance
   */
  this.data = function(_) {
    // Or fall through and use the backing store
    if (!arguments.length) return data;
    
    // Setup some extra initialization on the data that is required
    data = _;    
    return this;
  };




    



     /**
     * Handle the zoomed event in space to zoom and translate the view
     */
    function zoomed() {      
      group2.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }
        
    /**
     * Initialize each of the nodes in the dataset to ensure
     * that the required positions and speeds exist in the data
     * for collision avoidance and applying gravity
     * @param {array} The collection of nodes from the raw data
     * @param {object} A bounding rectangle to restrict where the nodes can be placed
     */
    function initializeData() {
        
        // Ensure each node has a random start location, speed and record
        // no recent bounces
        data.forEach(function(d) { 
            d.x = Math.random() * width;
            d.y = Math.random() * height;
            d.size = d.size || Math.random() * 40;
            d.speedX =  (Math.random() - 0.5) * 2 *...