Init from given files

2017-11-07 21:33:16 +00:00
commit 61f2be55fe
45 changed files with 34460 additions and 0 deletions
--- a/examples/distribution_bar_graph.html
+++ b/examples/distribution_bar_graph.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  /* set the CSS */
+  /* .line {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 2px;
+  } */
+
+  .chart rect {
+    fill: steelblue;
+    stroke: none;
+  }
+
+  text {
+    font-size: 12px;
+  }
+</style>
+
+<body>
+  <!-- <svg width="960" height="600"></svg> -->
+  <!-- load the d3.js library -->
+  <svg class="chart"></svg>
+  <script src="https://d3js.org/d3.v4.min.js"></script>
+  <script src="js/lib/intercom.js"></script>
+  <script>
+    var data,
+      xDomain,
+      yDomain;
+
+    var intercom = Intercom.getInstance();
+    intercom.on("passedData", function (d) {
+      data = [];
+      var tmp = d.distribution;
+      for (var i = 0; i < d.l; i++) {
+        data.push({"index": i, "size": tmp[i]});
+      }
+      xDomain = d.l;
+      yDomain = d.maxSize;
+      showData(data);
+    });
+
+    // set the dimensions and margins of the graph
+    var margin = { top: 20, right: 20, bottom: 90, left: 70 },
+      width = 1500 - margin.left - margin.right,
+      height = 600 - margin.top - margin.bottom;
+
+    // append the svg obgect to the body of the page
+    // appends a 'group' element to 'svg'
+    // moves the 'group' element to the top left margin
+    var chart = d3.select(".chart")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    function showData(data) {
+
+      d3.selectAll(".bar").remove();
+      d3.selectAll(".xAxis").remove();
+      d3.selectAll(".yAxis").remove();
+
+      // set the ranges
+      var x = d3.scaleLinear().range([0, width]).domain([0, xDomain]);
+      var y = d3.scaleLinear().range([height, 0]).domain([0, yDomain]);
+
+      var barWidth = width / data.length;
+
+      // Add the X Axis
+      chart.append("g")
+        .attr("class", "xAxis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x));
+
+      // Add the Y Axis
+      chart.append("g")
+        .attr("class", "yAxis")
+        .call(d3.axisLeft(y));
+
+      chart.selectAll(".bar")
+        .data(data)
+        .enter().append("rect")
+        .attr("class", "bar")
+        .attr("x", function (d) { return x(d.index); })
+        .attr("y", function (d) { return y(d.size); })
+        .attr("height", function (d) { return height - y(d.size); })
+        .attr("width", barWidth);
+    }
+
+    // Add x axis label
+    chart.append("text")
+      .attr("transform",
+      "translate(" + (width / 2) + " ," +
+      (height + margin.top + 30) + ")")
+      .style("text-anchor", "middle")
+      .style("font-size", "22px")
+      .text("Points");
+
+    // Add y axis label
+    chart.append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("y", 0 - margin.left)
+      .attr("x", 0 - (height / 2))
+      .attr("dy", "1em")
+      .style("text-anchor", "middle")
+      .style("font-size", "22px")
+      .text("Number of neighbours");
+  </script>
+</body>