[ Launch: Tributary inlet ] 5102056 by helixmat
-
-
Save helixmat/5102056 to your computer and use it in GitHub Desktop.
Tributary inlet
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
| {"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01} |
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
| var color = "#2EDF7C" | |
| //HERE BE DRAGONS... | |
| var hex = color.slice(1, color.length); | |
| var hexs = [hex.slice(0, 2), hex.slice(2, 4) , hex.slice(4, 6)]; | |
| var rgbs = _.map(hexs, function(hex) { | |
| return parseInt(hex, 16); | |
| }); | |
| //from this article http://blog.sarathonline.com/2009/02/javascript-convert-strings-to-binary.html | |
| function intToBin(d){ | |
| var j; | |
| var arr = []; | |
| for (j = 0; j < 8; j++) { | |
| arr.push(d%2); | |
| d = Math.floor(d2.5.2); | |
| } | |
| //reverse all bits again. | |
| return arr.reverse().join(""); | |
| } | |
| var bins = _.map(rgbs, function(rgb) { | |
| return intToBin(rgb); | |
| }); | |
| //from @mrejFox http://enjalot.com/tributary/2632354/sinwaves.js | |
| var binarrs = _.map(bins, function(bin) { | |
| var i; | |
| var data = []; | |
| bin = String(bin); | |
| //for (var i=0; i < bin.length; i++) { data.push({text: bin.slice(i,i+1)}) }; | |
| for (i=0; i < bin.length; i++) { data.push(parseInt(bin.slice(i,i+1), 10)); } | |
| return data; | |
| }); | |
| var sw = parseInt(d3.select("svg").style("width"), 10); | |
| var sh = parseInt(d3.select("svg").style("height"), 10); | |
| var svg = d3.select("svg") | |
| .append("svg:g"); | |
| svg.append("rect") | |
| .attr("width", sw) | |
| .attr("height", sh) | |
| .attr("fill", color) | |
| .attr("x", 0) | |
| .attr("y", 0); | |
| make_text(hexs, "hex", 50); | |
| make_text(rgbs, "rgb", 100); | |
| make_text(bins, "bins", 150); | |
| make_dots(binarrs, "binarys", 200); | |
| make_boxes(binarrs, "boxes", 250); | |
| make_boxes(binarrs, "boxes2", 300); | |
| make_dots(binarrs, "binarys2", 380); | |
| function make_text(text, clazz, y) { | |
| var text_group = svg.append("g") | |
| .classed(clazz, true) | |
| var txt = text_group.append("text") | |
| .style("font-size", 30); | |
| txt.selectAll("tspan") | |
| .data(text) | |
| .enter().append("tspan") | |
| .text(function(d,i) { | |
| return d; | |
| }) | |
| .attr("dx", 33); | |
| //center the text | |
| var offset = -37; | |
| var bbox = txt.node().getBBox(); | |
| //txt.attr("x", -bbox.width/2); | |
| text_group | |
| .attr("transform", "translate(" + [-bbox.width/2 + sw/2 + offset, y] + ")"); | |
| return txt; | |
| } | |
| function make_dots(binary, clazz, y) { | |
| var r = 30; | |
| var spacer = r + 10; | |
| var bw = 8 * spacer + 50; | |
| var dots_group = svg.append("g") | |
| var three_dots = dots_group.append("g") | |
| .selectAll("g." + clazz) | |
| .data(binary) | |
| .enter().append("g") | |
| .classed(clazz, true) | |
| .attr("transform", function(d,i) { | |
| return "translate(" + [i*bw, 0] + ")"; | |
| }); | |
| var dots = three_dots.selectAll("circle") | |
| //.data(function(d, i) { return {"digit":d, "i": i}; }) | |
| .data(function(d, i) { return d; }) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d,i) { | |
| return i * spacer; | |
| }) | |
| .attr("r", function(d,i) { | |
| return 10 + 15*d; | |
| }) | |
| .attr("fill", function(d,i) { | |
| if(d) { | |
| return "#ffffff"; | |
| } else { | |
| return "#000000"; | |
| } | |
| }) | |
| .attr("fill-opacity", 0.5) | |
| .attr("stroke", "#000000") | |
| ; | |
| var offset = 20; | |
| var bbw = dots_group.node().getBBox().width; | |
| dots_group.attr("transform", function(d,i) { | |
| return "translate(" + [-bbw/2 + sw/2 + offset, y] + ")"; | |
| }); | |
| return dots; | |
| } | |
| function make_boxes(binary, clazz, y) { | |
| var rw = 30; | |
| var rh = rw; | |
| var bw = 8 * rw + 95; | |
| var boxes_group = svg.append("g"); | |
| var three_boxes = boxes_group.append("g") | |
| .selectAll("g." + clazz) | |
| .data(binary) | |
| .enter().append("g") | |
| .classed(clazz, true) | |
| .attr("transform", function(d,i) { | |
| return "translate(" + [i*bw, 0] + ")"; | |
| }); | |
| var boxes = three_boxes.selectAll("rect") | |
| //.data(function(d, i) { return {"digit":d, "i": i}; }) | |
| .data(function(d, i) { return d; }) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d,i) { | |
| return i * 80; | |
| }) | |
| .attr("width", rw) | |
| .attr("height", rh) | |
| .attr("fill", function(d,i) { | |
| if(d) { | |
| return "#ffffff"; | |
| } else { | |
| return "#000000"; | |
| } | |
| }) | |
| .attr("fill-opacity", 0.5) | |
| .attr("stroke", "#000000") | |
| ; | |
| var bbw = boxes_group.node().getBBox().width | |
| boxes_group.attr("transform", function(d,i) { | |
| return "translate(" + [-bbw/2 + sw/2, y] + ")"; | |
| }); | |
| return boxes; | |
| } | |
| //var hsl_color = d3.rgb(colors[0]).hsl(); | |
| //console.log(hsl_color) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment