README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    A bar chart showing benchmark results of various libraries (including reactive-property) emitting a single parameter. Data from Hypercubed/EventsSpeedTests node-v4.4.4.

forked from curran's block: Chart Types


## data.csv

        
        name
        ops/sec

        
        EventEmitter
        13514161

        
        EventEmitter2
        5699203

        
        EventEmitter3
        14359063

        
        RXJS
        4900605

        
        ReactiveProperty
        22578191

        
        JS-Signals
        566953

        
        MiniSignals
        28994936

        
        signal-emitter
        620903

        
        event-signal
        6936645

        
        signal-lite
        26685490

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
    <style>

      .axis text {
        font-family: 'Playfair Display', serif;
        font-size: 18pt;
      }
      .axis .label {
        font-size: 40pt;
      }

      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .y.axis path, .y.axis line {
        stroke: none;
      }

      .tooltip {
        font-family: 'Playfair Display', serif;
        font-size: 24pt;

        /* This trick adds a heavy white shadow around the text. */
        text-shadow:
          0px 0px 6px white,
          0px 0px 6px white,
          0px 0px 6px white,
          0px 0px 6px white,
          0px 0px 6px white,
          0px 0px 6px white,
          0px 0px 6px white,
          0px 0px 6px white,
          0px 0px 6px white;

        /* This eliminates the possibility of flickering tooltips. */
        pointer-events: none;
      }

    </style>
  </head>
  <body>
    <script>

      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 240, top: 0, right: 89, bottom: 101 };
      var barPadding = 0.2;
      var barPaddingOuter = 0.1;

      var xColumn = "ops/sec";
      var yColumn = "name";
      var xAxisLabelText = "Operations Per Second";
      var xAxisLabelOffset = 80;

      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("x", innerWidth / 2)
        .attr("y", xAxisLabelOffset)
        .attr("class", "label")
        .text(xAxisLabelText);
      var yAxisG = g.append("g")
        .attr("class", "y axis");

      var tooltip = svg.append("text").attr("class", "tooltip");

      var xScale = d3.scale.linear().range([0, innerWidth]);
      var yScale = d3.scale.ordinal().rangeRoundBands([0, innerHeight], barPadding, barPaddingOuter);

      // Use D3's number format that generates SI prefixes for the X axis.
      // See also http://en.wikipedia.org/wiki/Metric_prefix#List_of_SI_prefixes
      var siFormat = d3.format("s");
      function tickFormat(num){
        // Replace the confusing G (for Giga) with
        // the more recognizable B (for Billion).
        return siFormat(num).replace("G", "B");
      }

      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(5)
        .tickFormat(tickFormat)
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .outerTickSize(0);

      var tooltipFormat = d3.format(",");
      function showTooltip(d){
        tooltip.text(tooltipFormat(d[xColumn]) + " " + xAxisLabelText)
          .attr("x", d3.event.pageX + 20)
          .attr("y", d3.event.pageY);
      }
      function hideTooltip(){
        tooltip.text("");
      }

      function render(data){

        data.sort(function (a, b){
          return b[xColumn] - a[xColumn];
        });

        xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
        yScale.domain(       data.map( function (d){ return d[yColumn]; }));
        console.log(xScale.domain()[1])

        xAxisG.call(xAxis);
        yAxisG.call(yAxis);

        var bars = g.selectAll("rect").data(data);
        bars.enter().append("rect")
          .attr("height", yScale.rangeBand())
          .on("mouseover", showTooltip)
          .on("mousemove", showTooltip)
          .on("mouseout", hideTooltip);
        bars
          .attr("x", 0)
          .attr("y",     function (d){ return yScale(d[yColumn]); })
          .attr("width", function (d){ return xScale(d[xColumn]); });
        bars.exit().remove();
      }

      function type(d){
        d["ops/sec"] = +d["ops/sec"];
        return d;
      }

      d3.csv("data.csv", type, render);

    </script>
  </body>
</html>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png