D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
TommyCoin80
Full window
Github gist
Ten Random Walk Bars
<!DOCTYPE html> <meta charset="utf-8"> <head> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <style> </style> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <body> <script> var margin = {top: 30, right: 30, bottom: 50, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var data = d3.range(0,10,1).map(function(d) { return d3.randomUniform(0,100)(); }) var x = d3.scaleBand() .domain(data.map(function(d,i) { return i;})) .range([0,width]) .padding(.1); var y = d3.scaleLinear() .domain([d3.min(data.map(function(d) { return d}))-10,d3.max(data.map(function(d) { return d}))+10]) .range([height,0]); var color = d3.scaleOrdinal(d3.schemeCategory10) .domain(x.domain()); var xAxis = d3.axisBottom(x); var yAxis = d3.axisLeft(y); svg.append("g") .attr("class","axis x") .attr("transform","translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class","axis y") .call(yAxis); var duration = 250, ease = d3.easeLinear; var bars = svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("x", function(d,i) { return x(i)}) .attr("y", function(d) { return y(d);}) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d);}) .style("fill", function(d) { return color(d)}) bars.transition() .duration(duration) .ease(ease) .on("start", tick); function tick(d,i) { data[i] = data[i] + d3.randomUniform(-20,20)(); y.domain([d3.min(data.map(function(d) { return d}))-10,d3.max(data.map(function(d) { return d}))+10]) if(i==data.length-1) { svg.select(".axis.y").transition() .duration(duration) .ease(ease) .call(yAxis); } d3.active(this).attr("y", y(data[i])) .attr("height", height - y(data[i])) .on("end", function() { if(i==data.length-1) { bars.transition() .duration(duration) .ease(ease) .on("start", tick); } }) } </script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js