Simple Example for Presentation

_.md

[ Launch: Simple Example for Presentation ] 5328450 by gelicia

config.json

{"description":"Simple Example for Presentation","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,"thumbnail":"http://i.imgur.com/mXjMJR9.png"}

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 maxValue = d3.max(data, function(d){return d.value});
var height = 90;
var margin = 10;
var heightScale = d3.scale.linear().domain([0, maxValue])
.range([0, height]);

/* Or
var yScale = d3.scale.linear().domain([0, maxValue])
.range([height, 0]);
var heightScale = d3.scale.linear().domain([0, maxValue])
.range([0,height]);
*/

var colorScale = d3.scale.linear().domain([0, maxValue])
.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);}
})