joaovicente · September 29, 2020 10:35 · Sep 29, 2020 · Sep 29, 2020 · Jul 18, 2016 · Jul 18, 2016
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-Foundations of a timeline
+# 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](https://bl.ocks.org/emmasaunders/2ac8e418958f4c681f229f82729c9647)
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     font: 10px sans-serif;
   }
 </style>
-
+<script src="//d3js.org/d3.v3.min.js"></script>
 <script type="text/javascript">        var width = 800;
   var height = 500;
 

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: apache-2.0
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Foundations of a timeline
diff --git a/index.html b/index.html
@@ -0,0 +1,102 @@
+<style type="text/css">
+  .axis path, .axis line {
+    fill: none;
+    stroke: #999;
+    shape-rendering: crispEdges;
+  }
+  .tick {
+    font: 10px sans-serif;
+  }
+</style>
+
+<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>
No results found