Built with blockbuilder.org
forked from sierra073's block: animated bar chart with labels
license: mit |
Built with blockbuilder.org
forked from sierra073's block: animated bar chart with labels
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 12px Lato; | |
} | |
.axis path, | |
.axis line{ | |
fill: none; | |
stroke: #898989; | |
shape-rendering: crispEdges; | |
} | |
.x.axis { | |
font-size: 14px; | |
font-weight: 150; | |
} | |
.y.axis { | |
display: none; | |
} | |
svg text.label { | |
font-weight: 400; | |
text-anchor: start; | |
text-align: center; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var margin = {top: 40, right: 30, bottom: 30, left: 50}, | |
width = 460 - margin.left - margin.right, | |
height = 320 - margin.top - margin.bottom; | |
var formatPercent = d3.format(".0%"); | |
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 x = d3.scaleBand() | |
.range([0, width]) | |
.padding(0.4); | |
var y = d3.scaleLinear() | |
.range([height, 0]); | |
var xAxis = d3.axisBottom(x).tickSize([]).tickPadding(10); | |
var yAxis = d3.axisLeft(y).tickFormat(formatPercent); | |
var dataset = [{"year":"2015", "value": .77}, | |
{"year":"2016", "value": .88}, | |
{"year":"2017", "value": .95}, | |
{"year":"2018", "value": .98}]; | |
x.domain(dataset.map(function(d) { return d.year; })); | |
y.domain([0, d3.max(dataset, function(d) { return d.value; })]); | |
svg.append("g") | |
.attr("class", "x axis") | |
.style("stroke", "#898989") | |
.style("fill-opacity", .9) | |
.style("stroke-width", ".7") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class","y axis") | |
.attr("class","y axis") | |
.call(yAxis); | |
// svg.append("text") | |
// .attr("transform", "rotate(-90)") | |
// .attr("y", 0 - margin.left) | |
// .attr("x",0 - (height / 2)) | |
// .attr("dy", "1em") | |
// .attr("fill","#898989") | |
// .style("text-anchor", "middle") | |
// .text("% Districts Meeting 100 kbps/student"); | |
svg.selectAll(".bar") | |
.data(dataset) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.style("display", function(d) { return d.value === null ? "none" : null; }) | |
.style("fill", function(d){ | |
if (d.year == "2018") { | |
return "#f26c23"; | |
} else { | |
return "#fbdbca"; | |
}}) | |
.attr("x", function(d) { return x(d.year); }) | |
.attr("width", x.bandwidth()) | |
.attr("y", function(d) { return height; }) | |
.attr("height", 0) | |
.transition() | |
.duration(600) | |
.delay(function (d, i) { | |
return i * 150; | |
}) | |
.attr("y", function(d) { return y(d.value); }) | |
.attr("height", function(d) { return height - y(d.value); }); | |
svg.selectAll(".label") | |
.data(dataset) | |
.enter() | |
.append("text") | |
.attr("class","label") | |
.style("display", function(d) { return d.value === null ? "none" : null; }) | |
.attr("x", (function(d) { | |
return x(d.year) + (x.bandwidth() / 2) -8 ; | |
})) | |
.style("fill", function(d){ | |
if (d.year == "2018") { | |
return "#f26c23"; | |
} else { | |
return "#898989"; | |
}}) | |
.style("font", function(d){ | |
if (d.year == "2018") { | |
return "16px Lato"; | |
}}) | |
.attr("y", function(d) { return height; }) | |
.attr("height", 0) | |
.transition() | |
.duration(600) | |
.delay(function (d, i) { | |
return i * 150; | |
}) | |
.text(function(d) { return formatPercent(d.value); }) | |
.attr("y", function(d) { return y(d.value) + .1; }) | |
.attr("dy", "-.7em"); | |
</script> | |
</body> |