curran/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
	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
	<!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>