| [electron-forge ruby-2.7.3 (master)]$ git pull | |
| Already up to date. | |
| [electron-forge ruby-2.7.3 (master)]$ bolt | |
| ⚡️ bolt v0.24.9 (node v14.17.4) | |
| 🔎 [1/4] Validating project... | |
| 📦 [2/4] Installing project dependencies... | |
| yarn install v1.22.11 | |
| [1/5] 🔍 Validating package.json... | |
| [2/5] 🔍 Resolving packages... | |
| [3/5] 🚚 Fetching packages... |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Simple Beam</title> | |
| <script type="text/javascript" src="https://d3js.org/d3.v2.js"></script> | |
| <script type="text/javascript" src="https://d3js.org/d3-geo.v2.js"></script> | |
| <style type="text/css"> |
Note: January 7, 2020
This benchmark was written in 2012 and the performance measurements below are valid for browsers at that time. The attribute
path_seglisthas been removed from the SCG element on Chrome and Firefox and this older benchmark no long runs on those systems.
The benchmark does still run on Safari and now has performance equivalent to the Canvas benchmark.
This example benchmarks the time taken to draw an SVG path with 10000 line segments.
| license: gpl-3.0 |
| <html> | |
| <head> | |
| <title>HSL Hues</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
| </head> | |
| <body> | |
| <p>HSL Hues: 0 .. 360 </p> | |
| <svg id="hsl-hue1"></svg> | |
| <p>HSL Hues: 0 .. 256 </p> | |
| <svg id="hsl-hue2"></svg> |
| (function(){if (!Date.now) Date.now = function() { | |
| return +new Date; | |
| }; | |
| try { | |
| document.createElement("div").style.setProperty("opacity", 0, ""); | |
| } catch (error) { | |
| var d3_style_prototype = CSSStyleDeclaration.prototype, | |
| d3_style_setProperty = d3_style_prototype.setProperty; | |
| d3_style_prototype.setProperty = function(name, value, priority) { | |
| d3_style_setProperty.call(this, name, value + "", priority); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Simple Beam</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font: 13px sans-serif; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Two Graphs</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
| <script type="text/javascript" src="simple-graph.js"></script> | |
| <style type="text/css"> | |
| body { font: 13px sans-serif; } | |
| rect { fill: #fff; } |
JavaScript mixin patterns
Four different ways JavaScript variables and closures can be used to implement different mix-in patterns.
Each implementation creates a mixin that creates property getter functions for model objects.
By model object I mean a function that takes properties (keys and values)( and returns an object that:
AgentScript Climate model.
Requires Java applets to be enabled in browser.
source: gist.github.com/stepheneb/4705258
demo: bl.ocks.org/stepheneb/4705258
20130204