D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
zamfi
Full window
Github gist
communicating with flashes
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width: 100%; height: 100%; } path { stroke: #333; stroke-width: 1px; fill: none; } </style> </head> <body> <script> function getCrc(bytes) { var crc = 0; for (var b = 0; b < bytes.length; ++b) { crc ^= bytes[b] << 8; for (var i = 0; i < 8; ++i) { if (crc & 0x8000) { crc = (crc << 1) ^ 0x1021; } else { crc = (crc << 1) & 0xFFFF; } } } return crc & 0xFFFF; } function wrapBytes(bytes) { // console.log("sending bytes:", bytes); var data = [] for (var i = 0; i < 8; ++i) { data.push(0xAA); } data.push(0x2A); data.push(bytes.length); data = data.concat(bytes); var crc = getCrc(data.slice(9)); data.push(crc >> 8); data.push(crc & 0xFF); data.push(0xAA); return data; } function stringToBytes(s) { var bytes = []; for (i = 0; i < s.length; ++i) { bytes.push(s.charCodeAt(i)); } return bytes; } function generateByteStream(network, password) { var bytes = wrapBytes([1, network.length].concat(stringToBytes(network)).concat([2, password.length]).concat(stringToBytes(password))); console.log("blinking bytes:", bytes.map(function (byte) { return '0x' + byte.toString(16); })); return bytes; } function bytesToBits(bytes) { var bits = []; for (var i = 0; i < bytes.length; ++i) { for (var j = 0; j < 8; ++j) { bits.push((bytes[i] & (1 << (7-j))) > 0 ? 1 : 0); } } return bits; } var margin = {top: 20, right: 10, bottom: 20, left: 200}; var graphHeight = 10; var width = 1000 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) var data = bytesToBits(generateByteStream("Burkina Faso", "Ouagadougou")); function generateDigitalOutputSignal() { var x = d3.scale.linear().domain([0, data.length-1]).range([0, width]); var y = d3.scale.linear().domain([0, 1]).range([graphHeight, 0]); var bitstream = svg.selectAll("path.bitstream") .data([data]) .enter().append("path") .attr("class", "bitstream") .attr("d", d3.svg.line().interpolate("step-after") .x(function(d, i) { return x(i); }) .y(y)) .attr("transform", "translate("+margin.left+","+margin.top+")"); } generateDigitalOutputSignal(); d3.csv('real-bonafide-data.csv', function(error, samples) { var firstSample = 0; while (samples[firstSample].value > 900) { firstSample++; } samples = samples.slice(firstSample); var analogTotalTime = samples[samples.length-1].time - samples[0].time; var analogSamplesPerFrame = 76.7; function generateAnalogOutputSignal() { var x = d3.scale.linear().domain([samples[0].time, samples[samples.length-1].time]).range([0, width]); var y = d3.scale.linear().domain([1024, 240]).range([graphHeight, 0]); var analogSignal = svg.selectAll("path.analogSignal") .data([samples]) .enter().append("path") .attr("class", "analogSignal") .attr("d", d3.svg.line() .x(function(d, i) { return x(d.time); }) .y(function(d, i) { return y(d.value); })) .attr("transform", "translate("+margin.left+","+(margin.top*2+graphHeight)+")"); } generateAnalogOutputSignal(); function generateDigitizedSignal() { var x = d3.scale.linear().domain([samples[0].time, samples[samples.length-1].time]).range([0, width]); var y = d3.scale.linear().domain([0, 1]).range([graphHeight, 0]); var digitizedSignal = svg.selectAll("path.digitizedSignal") .data([samples]) .enter().append("path") .attr("class", "digitizedSignal") .attr("d", d3.svg.line() .x(function(d, i) { return x(d.time); }) .y(function(d, i) { return y(d.value > 500 ? 0 : 1); })) .attr("transform", "translate("+margin.left+","+(margin.top*3+graphHeight*2)+")"); } generateDigitizedSignal(); }); function generateApproximatedAnalogOutputSignal() { var data = bytesToBits(generateByteStream("Burkina Faso", "Ouagadougou")); var x = d3.scale.linear().domain([0, data.length-1]).range([0, width]); var y = d3.scale.linear().domain([0, 1]).range([graphHeight, 0]); var outputsignal = svg.selectAll("path.outputsignal") .data([data]) .enter().append("path") .attr("class", "outputsignal") .attr("d", d3.svg.line().interpolate(function(points) { return points.join("l5 0L"); }) .x(function(d, i) { return x(i); }) .y(y)) .attr("transform", "translate("+margin.left+","+(margin.top*2+graphHeight)+")"); } console.log("you are now rocking with d3", d3); </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js