simple bar

_.md

[ Launch: simple bar ] 6559330 by enjalot

config.json

{"description":"simple bar","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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/B2yds3T.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 svg = d3.select("svg");


var bg = svg.append("rect").classed("bg", true)
.attr({
  x: 100,
  y: 100,
  width: 400,
  height: 400,
  fill: "#fefefe",
  stroke: "#722C2C"
})
var circle = svg.append("circle")
.attr({
  cx: 100,
  cy: 100,
  r: 5
})
bg.on("mousemove", function() {
  var x = d3.mouse(this)[0];
  var y = d3.mouse(this)[1];
  circle
  .transition()
  .duration(35)
  .attr({
    cx: x,
    cy: y
  })
})

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