Skip to content

Instantly share code, notes, and snippets.

@alexanderchan
Last active August 29, 2015 14:20
Show Gist options
  • Save alexanderchan/e6a4156f88a7e480a646 to your computer and use it in GitHub Desktop.
Save alexanderchan/e6a4156f88a7e480a646 to your computer and use it in GitHub Desktop.
test2
{"description":"test2","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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/g6H9w4r.gif","fullscreen":false,"ajax-caching":true,"inline-console":true}
var data = [8, 2, 3, 4, 8, 9,3,4];
var chartHeight = 398;
var chartWidth = 300;
var leftMargin = 10;
var xScale = d3.scale.linear().range([0, chartWidth]);
var yScale = d3.scale.linear().range([chartHeight, 0]);
function render(data) {
var chart = d3.select("svg");
chart.attr({
height: chartHeight,
width: chartWidth
});
var bars = chart.selectAll("rect").data(data);
xScale.domain([0, data.length]);
yScale.domain([0, d3.max(data)]);
chart.on('click',function(){
var newData = [];
var newrecs = Math.random() * 20 + 1;
for ( var i = 0; i < newrecs; i++) {
newData.push(Math.random() * 10);
}
render(newData);
})
bars.enter().append("rect")
bars.transition().attr({
width: function(d,i){
return ( ( chartWidth - leftMargin ) / data.length ) - 2;
},
x: function (d, i) {
return leftMargin + ( i * ( chartWidth ) / data.length);
},
y: function (d, i) {
return yScale(d) + 10;
},
fill: "#0b205a"
})
.attr({
height: function (d) {
return chartHeight - yScale(d);
}
}
)
;
bars.exit().remove();
}
render(data);
d3.select('svg').append('rect').attr({
x: 93,
y: 89,
height: 32,
width: 116,
fill: "#fca935"
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment