d3.js

My first d3 visualisation

February 2014

Use left an right arrows to navigate...

Just some points and lines

Including d3 library

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/jsonp.js"></script>
                    

Generating random data

plot1['create_points'] = function(num){
  var num = num || 1000;
  var points = [];
  var lines = [];

   var container = document.getElementById('container_1');
   var WIDTH = container.getAttribute('width')
   var HEIGHT = container.getAttribute('height')

  for ( var i = 0; i < num ; i++ ){
    var x = Math.random() * WIDTH;
    var y = Math.random() * HEIGHT;
    var z = Math.random() * 5;
    var type = parseInt(Math.random() * 3);
 
    points.push({id: i, x: x, y: y, z: z, c: plot1['COLORS'][type], type: 'point'})

    if ( i !== 0 ){
     lines.push({id: i, points: [points[i-1], points[i]], type: 'line'})
    }
  }
  return [points,lines]
}
                    

Google analytics data