D3 Foundations of a timeline

.block

license: apache-2.0

README.md

D3 Foundations of a timeline

Represents a system call tree, highlighting the leaf nodes which are acting as bottlenecks Preview all D3 blocks in http://bl.ocks.org/joaovicente as described here

index.html

<style type="text/css">
  .axis path, .axis line {
    fill: none;
    stroke: #999;
    shape-rendering: crispEdges;
  }
  .tick {
    font: 10px sans-serif;
  }
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">        var width = 800;
  var height = 500;

  // Create the containers
  var svg = d3.select('body').append('svg')
    .attr("width", width)
    .attr("height", height);
  var svg_data = svg.append('g')
    .attr('class', 'data');
  var svg_axis = svg.append('g')
    .attr('class', 'axis');
  var svg_x_axis = svg_axis.append('g')
    .attr('class', 'x-axis');
  var svg_y_axis = svg_axis.append('g')
    .attr('class', 'y-axis');

  // Margins
  var margin = {top: 40, right: 40, bottom: 40, left:60};

  // Domain for values

  var start = new Date('2013-01-01');
  var end = new Date('2013-12-31');

  // Random data point generator
  var randPoint = function() {
    var rand = Math.random;
    var rand_time = start.getTime() + rand() * (end.getTime() - start.getTime());
    return { x:new Date(rand_time), y: rand()*5000, r: rand()*10 };
  }
  
    // Create a data array with 300 random data points
  var data = d3.range(300).map(randPoint);
  
  function draw() {

  var x_scale = d3.time.scale()
    .domain([start, d3.max(data, function(d) { return d.x; })])
    .range([margin.left, width - margin.right])
    .nice();

  var y_scale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.y; })])
    .range([margin.top, height - margin.bottom])
    .nice();
    var x_axis = d3.svg.axis()
    .scale(x_scale)
    .orient('top')
    .tickFormat(d3.time.format('%b %d'));

  svg_x_axis
    .attr("transform", "translate(0, " + margin.top + ")")
    .call(x_axis);

  var y_axis = d3.svg.axis()
    .scale(y_scale)
    .orient('left')
    .tickFormat(d3.format(".3s"));

  svg_y_axis
    .attr("transform", "translate(" + margin.left + ")")
    .call(y_axis);
  // Set a key function to identify the elements
  var key = function(d, i) { return d.x + '#' + d.y; }

  // Bind data array to the Selection
  var circles = svg_data.selectAll('circle').data(data, key);

  // update the dataset
  circles

  // Add circles for new data
    .enter()
    .append('circle')

  // Change the properties of all circles
    .attr('r', function(d) { return d.r; })
    .attr('cx', function(d) { return x_scale(d.x); })
    .attr('cy', function(d) { return y_scale(d.y); })
    .attr('fill', function(d, i) {
      return 'rgb(' + parseInt(d.r*25) + ',0,' + parseInt(d.r*25) + ')';
    })

  // Delete circles when removed from data
    .exit()
    .remove();    
    
    
  }

</script>