understanding bits of numbers

_.md

[ Launch: test ] 5506324 by enjalot

config.json

{"description":"understanding bits of numbers","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"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,"thumbnail":"http://i.imgur.com/pzBZaOi.png"}

inlet.js

//UUID
/*
A UUID is a 16-octet (128-bit) number. In its canonical form, a UUID is represented by 
32 hexadecimal digits, displayed in five groups separated by hyphens, in the form 
8-4-4-4-12 for a total of 36 characters (32 alphanumeric characters and four hyphens). 
For example:
  550e8400-e29b-41d4-a716-446655440000
The number of possible UUIDS is 340,282,366,920,938,463,463,374,607,431,768,211,456 
(16^32 or 2^128), or about 3.4 × 10^38.
*/

var svg = d3.select("svg");

var NUMBER = 5406349;


var ng = svg.append("g")
.attr("transform", "translate(" + [tributary.sw - 239,100] + ")")



var twoColor = d3.scale.ordinal()
  .domain([0, 1])
  .range(["#6CB8DB", "#63DACB"]);


function numberForms(group,n) {
  //@params
  // group: d3 selection to update our text
  //display a number "n" in integer, hex, binary
  //assumes positive integers
  g = group.selectAll("g.num").data([0])
  var dy = 30;
  genter = g.enter()
    .append("g").classed("num", true)
  genter.append("g").classed("int", true)
  genter.append("g").classed("bin", true)
    .attr("transform", "translate(" + [0, dy] + ")")
   genter.append("g").classed("hex", true)
  .attr("transform", "translate(" + [0,2*dy] + ")")
  
  var hex = n.toString(16);
  hex = zeropad(hex.length, 2) + hex;
  hex = splitNumber(hex, 2)
  var bytes = hex.length

  
  var binary = n.toString(2);  
  //we want to pad our 
  var bits = binary.length;
  zeropadding = zeropad(binary.length, 8)
  binary = zeropadding + binary;
  binary = splitNumber(binary, 8)
  
  var inttext = g.select("g.int");
  inttext.append("text")
  .text("decimal").attr("x", 10)
  inttext.append("text").classed("number", true)
    .text(n)

  var bintext = g.select("g.bin");
  bintext.append("text")
    .text("binary: " + bits + " bits used").attr("x", 10)
  bintext.append("text").classed("number", true)
    .selectAll("tspan.chunks")
    .data(binary.reverse()).enter().append("tspan")
      .text(function(d){ return " " + d })
      .style("fill", function(d,i) { return coloring(i, binary.length); })
  
  var hextext = g.select("g.hex");
  hextext.append("text")
    .text("hex: " + bytes + " bytes used").attr("x", 10)
  hextext.append("text").classed("number", true)
    .selectAll("tspan.chunks")
    .data(hex.reverse()).enter().append("tspan").classed("chunks", true)
      .text(function(d){ return " " + d.toUpperCase() })
      .style("fill", function(d,i) { return coloring(i, hex.length); })

  
  
}
function numberVis(g,n) {
  //visualize a number in terms of bits and bytes
}


function zeropad(l, p) {
  //given a number of l digits, give a string of 0s to pad with
  //so that there is always a multiple of p digits
  n = l % p;
  if(n)
    return d3.range(p - n).map(function() { return "0" }).join("")
  return "";
}

function splitNumber(s, l) {
  //given a number (represented as a string "s")
  //split it into chunks of size l
  var chunks = [];
  var chunk = "";
  for(var i = s.length; i--;) {
    chunk = s[i] + chunk;
    if(i % l === 0) {
      chunks.push(chunk);
      chunk = "";
    }
  }
  return chunks
}

function coloring(i,n) {
  var ind = (n-i) & 1;
  return twoColor(ind);
}

numberForms(ng, NUMBER)

style.css

#display {
  background: #0A0C35;
}

g.num {
  fill: #008A69
}

.num .int .number {
  text-anchor: end;
  font-size: 28px;
  fill: #00DA57
}

.num .hex .number {
  text-anchor: end;
  font-size: 17px
}


.num .bin .number {
  text-anchor: end;
  font-size: 12px
}