Built with blockbuilder.org
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
Day Frequency | |
A .08167 | |
B .01492 | |
C .02782 | |
D .04253 | |
E .12702 | |
F .02288 | |
G .02015 | |
H .06094 | |
I .06966 | |
J .00153 | |
K .00772 | |
L .04025 | |
M .02406 | |
N .06749 | |
O .07507 | |
P .01929 | |
Q .00095 | |
R .05987 | |
S .06327 | |
T .09056 | |
U .02758 | |
V .00978 | |
W .02360 | |
X .00150 | |
Y .01974 | |
Z .00074 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.bar { | |
fill: #0067AC; | |
} | |
.bar:hover { | |
fill: #666666; | |
} | |
.axis--x path { | |
display: none; | |
} | |
</style> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = +svg.attr("width") - margin.left - margin.right, | |
height = +svg.attr("height") - margin.top - margin.bottom; | |
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), | |
y = d3.scaleLinear().rangeRound([height, 0]); | |
var g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.tsv("data.tsv", function(d) { | |
d.frequency = +d.frequency; | |
return d; | |
}, function(error, data) { | |
if (error) throw error; | |
x.domain(data.map(function(d) { return d.Day; })); | |
y.domain([0, d3.max(data, function(d) { return d.frequency; })]); | |
g.append("g") | |
.attr("class", "axis axis--x") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)); | |
g.append("g") | |
.attr("class", "axis axis--y") | |
.call(d3.axisLeft(y).ticks(10, "%")) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", "0.71em") | |
.attr("text-anchor", "end") | |
.text("Frequency"); | |
g.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", function(d) { return x(d.letter); }) | |
.attr("y", function(d) { return y(d.frequency); }) | |
.attr("width", x.bandwidth()) | |
.attr("height", function(d) { return height - y(d.frequency); }); | |
}); | |
</script> |