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
Last active
May 12, 2016 08:45
-
-
Save curran/d02ad2dbe0fe688e46c45c3a7f001f50 to your computer and use it in GitHub Desktop.
Observer Pattern Benchmarks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment