Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Apr 7, 2013
Embed
What would you like to do?
Simple Example for Presentation
{"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"}
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);}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.