|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>D3: A flexible, scalable bar chart</title> |
|
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> |
|
<style type="text/css"> |
|
div { |
|
position:absolute; |
|
margin:auto; |
|
|
|
|
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div> |
|
<button>Randomise!</button> |
|
</div> |
|
<br> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
//Width and height |
|
var w = 960; |
|
var h = 500; |
|
|
|
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, |
|
11, 12, 15, 20, 18, 17, 16, 18, 23, 25,34,36,12,32,56,23,25,34,87,43,54 ]; |
|
|
|
var xScale = d3.scaleBand() |
|
.domain(d3.range(dataset.length)) |
|
.rangeRound([0, w]) |
|
.paddingInner(0.08); |
|
|
|
var yScale = d3.scaleLinear() |
|
.domain([0, d3.max(dataset)]) |
|
.range([50, h]); |
|
|
|
//Create SVG element |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
//Create bars |
|
svg.selectAll("rect") |
|
.data(dataset) |
|
.enter() |
|
.append("rect") |
|
.attr("x", function(d, i) { |
|
return xScale(i); |
|
}) |
|
.attr("y", function(d) { |
|
return h - yScale(d); |
|
}) |
|
.attr("width", xScale.bandwidth()) |
|
.attr("height", function(d) { |
|
return yScale(d); |
|
}) |
|
.attr("fill", function(d) { |
|
return "rgb(0, 0, " + Math.round(d * 10) + ")"; |
|
}); |
|
|
|
//Create labels |
|
svg.selectAll("text") |
|
.data(dataset) |
|
.enter() |
|
.append("text") |
|
.text(function(d) { |
|
return d; |
|
}) |
|
.attr("text-anchor", "middle") |
|
.attr("x", function(d, i) { |
|
return xScale(i) + xScale.bandwidth() / 2; |
|
}) |
|
.attr("y", function(d) { |
|
if(yScale(d)<=15) { |
|
return h - yScale(d) - 2; |
|
}else{ |
|
return h - yScale(d) + 14; |
|
} |
|
}) |
|
.attr("font-family", "sans-serif") |
|
.attr("font-size", "11px") |
|
.attr("fill", function (d) { |
|
if(yScale(d)<=15){ |
|
return "black" |
|
}else{ |
|
return "white"; |
|
} |
|
}); |
|
|
|
|
|
//On click, update with new data |
|
d3.select("button") |
|
.on("click", function() { |
|
|
|
//New values for dataset |
|
var numValues = dataset.length; //Count original length of dataset |
|
dataset = []; //Initialize empty array |
|
var maxValue = 100; |
|
for (var i = 0; i < numValues; i++) { //Loop numValues times |
|
var newNumber = Math.floor(Math.random() * maxValue); //New random integer (0-24) |
|
dataset.push(newNumber); //Add new number to array |
|
} |
|
|
|
yScale.domain([0, d3.max(dataset)]); |
|
|
|
//Update all rects |
|
svg.selectAll("rect") |
|
.data(dataset) |
|
.transition() |
|
.delay(function(d, i) { |
|
return i * 100; |
|
}) |
|
.duration(1000) |
|
.ease(d3.easeBounceOut) |
|
.attr("y", function(d) { |
|
return h - yScale(d); |
|
}) |
|
.attr("height", function(d) { |
|
return yScale(d); |
|
}) |
|
.attr("fill", function(d) { |
|
return "rgb(0,0," + Math.round(d * 10) + ")"; |
|
}); |
|
|
|
|
|
|
|
//Update all labels |
|
svg.selectAll("text") |
|
.data(dataset) |
|
.transition() // <-- Now with |
|
.delay(function(d, i) { |
|
return i * 100; |
|
}) |
|
.duration(1000) |
|
.ease(d3.easeCircleIn) |
|
.text(function(d) { |
|
return d; |
|
}) |
|
.attr("x", function(d, i) { |
|
return xScale(i) + xScale.bandwidth() / 2; |
|
}) |
|
.attr("y", function(d) { |
|
if(yScale(d)<=15) { |
|
return h - yScale(d) - 2; |
|
}else{ |
|
return h - yScale(d) + 14; |
|
} |
|
}) |
|
.attr("fill", function (d) { |
|
if(yScale(d)<=15){ |
|
return "black" |
|
}else{ |
|
return "white"; |
|
} |
|
}); |
|
}); |
|
|
|
</script> |
|
|
|
|
|
</body> |
|
</html> |
