Big Data Analytics Visualization

big-data-analytics-visualization.markdown

Big Data Analytics Visualization

When you work with big data to find intricate dependencies and relationships between unstructured data clusters, experimentation pays off. This prototype shows one way to experiment with visualizing such data clusters: just hover over any area to see the groups of dots interconnected within the immediate proximity. Enjoy. Share.

A Pen by Sander Nizni on CodePen.

License.

index.html

<canvas></canvas>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

script.js

/*
     SANDER SAYS:
     NO WARRANTIES EXPRESSED OR IMPLIED
     FOR USING THIS CODE. ALL THIS HAS
     HAPPENED BEFORE, AND IT WILL HAPPEN
     AGAIN... BUT IT DOESN'T MATTER...
     BECAUSE WE ARE IN THIS TOGETHER.
     EVERYTHING COULD HAVE BEEN ANYTHING
     ELSE, AND IT WOULD HAVE JUST AS
     MUCH MEANING. C'EST LA VIE. ENJOY.
     COMPLIMENTS? PARTY INVITATIONS?
     RIGHT ON! CONTACT @HYPERABSOLUTE ON
     TWITTER OR ON UXRIG.COM
     STAY AWESOME | HYPERABSOLUTE
*/

//CANVAS
$(function(){
  var canvas = document.querySelector('canvas'),
      ctx = canvas.getContext('2d')
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx.lineWidth = .35;
  ctx.strokeStyle = (new Color(150)).style;

  var mousePosition = {
    x: 30 * canvas.width / 100,
    y: 30 * canvas.height / 100
  };

  var dots = {
    nb: 500,
    distance: 100,
    d_radius: 220,
    array: []
  };

  function colorValue(min) {
    return Math.floor(Math.random() * 255 + min);
  }
  
  function createColorStyle(r,g,b) {
    return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
  }
  
  function mixComponents(comp1, weight1, comp2, weight2) {
    return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
  }
  
  function averageColorStyles(dot1, dot2) {
    var color1 = dot1.color,
        color2 = dot2.color;
    
    var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
        g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
        b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
    return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
  }
  
  function Color(min) {
    min = min || 0;
    this.r = colorValue(min);
    this.g = colorValue(min);
    this.b = colorValue(min);
    this.style = createColorStyle(this.r, this.g, this.b);
  }

  function Dot(){
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    this.vx = -.5 + Math.random();
    this.vy = -.5 + Math.random();

    this.radius = Math.random() * 2;

    this.color = new Color();
    console.log(this);
  }

  Dot.prototype = {
    draw: function(){
      ctx.beginPath();
      ctx.fillStyle = this.color.style;
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fill();
    }
  };

  function createDots(){
    for(i = 0; i < dots.nb; i++){
      dots.array.push(new Dot());
    }
  }

  function moveDots() {
    for(i = 0; i < dots.nb; i++){

      var dot = dots.array[i];

      if(dot.y < 0 || dot.y > canvas.height){
        dot.vx = dot.vx;
        dot.vy = - dot.vy;
      }
      else if(dot.x < 0 || dot.x > canvas.width){
        dot.vx = - dot.vx;
        dot.vy = dot.vy;
      }
      dot.x += dot.vx;
      dot.y += dot.vy;
    }
  }

  function connectDots() {
    for(i = 0; i < dots.nb; i++){
      for(j = 0; j < dots.nb; j++){
        i_dot = dots.array[i];
        j_dot = dots.array[j];

        if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
          if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
            ctx.beginPath();
            ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
            ctx.moveTo(i_dot.x, i_dot.y);
            ctx.lineTo(j_dot.x, j_dot.y);
            ctx.stroke();
            ctx.closePath();
          }
        }
      }
    }
  }

  function drawDots() {
    for(i = 0; i < dots.nb; i++){
      var dot = dots.array[i];
      dot.draw();
    }
  }

  function animateDots() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    moveDots();
    connectDots();
    drawDots();

    requestAnimationFrame(animateDots);	
  }

  $('canvas').on('mousemove', function(e){
    mousePosition.x = e.pageX;
    mousePosition.y = e.pageY;
  });

  $('canvas').on('mouseleave', function(e){
    mousePosition.x = canvas.width / 2;
    mousePosition.y = canvas.height / 2;
  });

  createDots();
  requestAnimationFrame(animateDots);	
});


social("codepen/sander-nizni",
		 "twitter/hyperabsolute",
		 "linkedin/sandernizni",
     "instagram/hyperabsolute",
     "facebook/sander.nizni",
     "/sandernizni.wordpress.com",
     "light", "Sander says... Try it in full screen, dawg.");

scripts

<script src="http://codepen.io/Sander-Nizni/pen/mPoOjg"></script>

style.css

html, body {
  background: #000;
  margin: 0;
}

canvas {
  position: absolute;
}

/*
SOCIAL STYLES APPEAR BELOW.
ALSO REMEMBER TO REFERENCE THE JS URL IN THE JS PAN SETTINGS: http://codepen.io/Sander-Nizni/pen/mPoOjg
*/

#social-container {
  opacity: 0.9;
	bottom: 5px;
	right: 5px;
}
#social-container p{
	padding-bottom: 0;
	margin-bottom: 0;
}
#social-container #social-links a {
	font-size: 2.8rem;
}
#social-message {
	font-size: 1.15rem;
}