show narco

_.md

[ Launch: show narco ] 5934712 by gelicia

config.json

{"description":"show narco","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var data = [
  {name: 'pear', value : 32},
  {name: 'apple', value : 20},
  {name: 'orange', value : 27},
  {name: 'banana', value : 36}
]

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

var maxHeight = d3.max(data, function(d){return d.value});
var height = 90;
var margin = 50;
var heightScale = d3.scale.linear().domain([0, maxHeight])
.range([0, height]);

var colorScale = d3.scale.linear().domain([0, maxHeight])
.range(['blue', 'green']);


svg.selectAll("rect")
  .data(data).enter()
  .append('rect')
.attr({
  x: function(d,i){return margin + (50 * i);},
  y: function(d){return margin + height - heightScale(d.value);},
  height : 0,
  width: 0,
  fill : function(d){return colorScale(d.value);}
})
//.transition()
 // .duration(1000)
  //.ease("bounce")
.attr({
  x: function(d,i){return margin + (50 * i);},
  y: function(d){return margin + height - heightScale(d.value);},
  height : function(d){return heightScale(d.value);},
  width: 50,
  fill : function(d){return colorScale(d.value);}
})

svg.selectAll("text")
  .data(data).enter()
  .append('text')
.attr({
  x: function(d,i){return margin + (50 * i);},
  y: function(d){return margin + height - heightScale(d.value);},
  height : 0,
  width: 0,
  fill : function(d){return colorScale(d.value);}
})
.text(function(d){return d.value})