<html>
<head>
</head>
<body>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 14px sans-serif;
}
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #999;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
stroke-width:0px;
}
</style>
<body>
<script src="d3.v3.min.js"></script>
<h1>Ring Oscillators</h1>
<p>We started this page to catalog tests of speed for a variety of microprocessors and electronics modules. Here we define speed as how fast information can transit from external electronics into the core where microcode is running and back out again. A good way to test this is by constructing a ring oscillator, which simply sends token back and forth, producing a waveform that can be measured with an oscilloscope.</p>
<h2>GPIO</h2>
<p>To measure speed across a GPIO layer, we use a logic level as our token. We also enforce that the token must reach the CPU, where code is running, rather than simply be inverted by digital logic or an event system.</p>
<div id='gpio'></div>
<h2>RF</h2>
<p>To measure speed across a radio link, we use the smallest supported packet.</p>
<div id='rf'></div>
<script>
function make_graph(div_id,json_key,axis_labels,use_khz){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
//var y = d3.scale.log().range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-height,0);
var yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-width,0);
var svg = d3.select(div_id).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("ring.json", function(error, json) {
if (error) throw error;
data = json[json_key];
console.log(data);
update(data);
});
function update(data) {
var cols = d3.scale.category10();
function period_to_freq(p){
if (use_khz) return 1000./p;
else return 1/p;
}
//for linear
x.domain([0,d3.max(data, function(d) { return 1.01*d.dev_board_price; })]).nice();
y.domain([0,d3.max(data, function(d) { return 1.01*period_to_freq(d.ring_period); })]).nice();
//for log
//x.domain(d3.extent(data, function(d) { return 1.1*d.dev_board_price; })).nice();
//y.domain(d3.extent(data, function(d) { return 1.1*period_to_freq(d.ring_period); })).nice();
var node = svg.selectAll("g").data(data).enter().append("g").append("a")
.attr("xlink:href", function(d) { return d.subdirectory_path; });
node.append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return x(d.dev_board_price); })
.attr("cy", function(d) { return y( 1.0*period_to_freq(d.ring_period) ); })
.attr("r", 3.5)
.style("fill",function(d,i){return cols(i);});
node.append("text")
.attr("x", function(d) { return x(d.dev_board_price)+5; })
.attr("y", function(d) { return y( 1.0*period_to_freq(d.ring_period) ); })
.style("font-size","15px")
.style("font-family","sans-serif")
.text(function(d) { return d.name; });
svg.insert("g",":first-child")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", 25)
.style("text-anchor", "end")
.style("font-size","15px")
.text(axis_labels[0]);
svg.insert("g",":first-child")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", -25)
.attr("dy", ".2em")
.style("text-anchor", "end")
.style("font-size","15px")
.text(axis_labels[1])
}
}
make_graph("#gpio","gpio",["dev board price ($)", "ring frequency (MHz)"],0)
make_graph("#rf","rf",["dev board price ($)", "ring frequency (kHz)"],1)
</script>
</body>
</html>