dem binaries

_.md

[ Launch: dem binaries ] 6480340 by georules
[ Launch: something neat ] 5592618 by georules
[ Launch Inlet ]
Gist #4103209
Gist #4103149

config.json

{"description":"dem binaries","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.6280948026772978,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"freq.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"freq2.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"thumbnail":"http://i.imgur.com/1EUtf1t.png"}

inlet.js

// Mouse over the binary codes :)

letters = "abcdefghijklmnopqrstuvwxyz";
letters += letters.toUpperCase();
console.log(letters)

numLetters = 16;

data = [];

for (x in d3.range(numLetters)) {
  y = letters.charAt(x)
  data.push(y)
}


function charToDecimal(d) {
  return d.charCodeAt(0).toString()
}

function decimalToBinary(d) {
  bd = parseInt(d,10).toString(2);
  while(bd.length < 8) {
    bd = "0" + bd;
  }
  //return "a";
  return bd;
}

var svg = d3.select("svg")

var c = svg.append("rect")
.attr("x",10)
.attr("y",0)
.attr("fill","#292929")
.attr("width",200)
.attr("height",500);

offset = 0;
data.forEach(function(d)	{
  d2 = charToDecimal(d);
  bd = decimalToBinary(d2);
  svg.append("text")
  .text(bd)
  .attr("fill", "#FFFFFF")
  .attr("font-size",25)
  .attr("font-family","Courier")
  .attr("x",48)
  .attr("y",offset+=30)
  .on("mouseenter", function ()	{
    screen.text(d);
    d3.select(this).attr('fill','#FFaaFF');
  })
  .on("mouseleave", function()	{
    d3.select(this).attr('fill','#FFFFFF');
  })
});

var c2 = svg.append("rect")
.attr("x",10)
.attr("y",510)
.attr("fill","#292929")
.attr("width",200)
.attr("height",160);

var screen = svg.append("text")
.attr("x", parseInt(c2.attr("x"),10) + 54)
.attr("y", parseInt(c2.attr("y"),10) + 124)
.attr("fill","#FFaaFF")
.attr("font-size",147)
.attr("font-family","Courier")