bar code

_.md

[ Launch: bar code ] 6559536 by enoex
[ Launch: bar code ] 6559496 by ejfox
[ Launch: bar code ] 6559462 by enjalot

config.json

{"description":"bar code","endpoint":"","display":"div","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/bYneqso.png"}

inlet.js

var data = [5, 9, 12, 15, 2, 6];

var xscale = d3.scale.ordinal()
//.domain(d3.range(data.length))
.domain([0, 1, 2, 3, 4, 5])
.rangeBands([0, 400]);

var min = d3.min(data);
var max = d3.max(data);
var yscale = d3.scale.linear()
//.domain([min, max])
.domain([0, 15])
.range([400, 0]);

var x = 50;
var y = 50;

var display = d3.select("#display")
var svg = display.append("svg").classed("tributary_svg", true);


var height = 400;

var drag = d3.behavior.drag()
.on("drag", function(d,i) {
  var my = d3.mouse(bg.node())[1];
  d = Math.floor(yscale.invert(my - 50))
  data[i] = d;
  d3.select(this)
  .datum(d)
  .transition().ease("linear").duration(90)
  .attr({
    y: function(d,i) { return y + yscale(d) },
    height: function(d,i) { return 400 - yscale(d) }
  })
})


//bg rects
svg.selectAll("rect.barBg")
.data(data)
.enter()
.append("rect")
.classed("barBg", true)
.attr({
  x: function(d,i) { return x + xscale(i) },
  width: 60,
  y: function(d,i) { return y; },
  height: function(d,i) { return height; }
}).style({ fill: '#D6C8C8' });

var bg = svg.append("rect").classed("bg", true)
.attr({
  x: x,
  y: y,
  width: 400,
  height: height,
  fill: "#fefefe",
  opacity: 0.1,
  stroke: "#722C2C"
})



//interaction rects
svg.selectAll("rect.bar")
.data(data)
.enter()
.append("rect")
.classed("bar", true)
.attr({
  x: function(d,i) { return x + xscale(i) },
  width: 30,
  y: function(d,i) { return y + yscale(d) },
  height: function(d,i) { return 400 - yscale(d) }
})
.call(drag);

var circle = svg.append("circle")
.attr({
  cx: x,
  cy: y,
  r: 5
})


var options = {
  mode: 'javascript',
  lineNumbers: true,
  viewportMargin: Infinity,
  theme: 'vibrant-ink'
}

var editor = display.append("div").classed("editor", true)
.classed("test-editor", true);

var cm = CodeMirror(editor.node(), options);
Inlet(cm);

updateValue();
var setting;
function updateValue() {
  var value = "";
  value += "data = [" + data + "];\n"
  value += "xscale = d3.scale.ordinal()\n"
  value += ".domain([" + d3.range(data.length) + "])\n"
  value += ".rangeBands([0, 400]);\n"

  setting = true;
  cm.setValue(value)
}
cm.on("change", function() {
  if(!setting) {
    setting = false;
    return
  }
  eval(cm.getValue());
  
  svg.selectAll("rect.bar")
  .data(data)
  .transition()
  .attr({
    x: function(d,i) { return x + xscale(i) },
    y: function(d,i) { return y + yscale(d) },
    height: function(d,i) { return 400 - yscale(d) }
  })
  
})


bg.on("mousemove", function(d,i) {
  var x = d3.mouse(this)[0];
  var y = d3.mouse(this)[1];
  circle
  .transition()
  .duration(35)
  .attr({
    cx: x,
    cy: y
  })
  updateValue();
})

style.css

.test-editor {
  width: 400px;
  height: 400px;
}

.test-editor .CodeMirror {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
.tributary_svg {
  width: 450px;
  height: 450px;
}
#display {
  overflow:scroll;
}