Built with blockbuilder.org
forked from aurelient's block: barchart_letters
license: mit |
Built with blockbuilder.org
forked from aurelient's block: barchart_letters
letter | frequency | weight | |
---|---|---|---|
A | 0.08167 | 132 | |
B | 0.01492 | 232 | |
C | 0.02782 | 23 | |
D | 0.04253 | 144 | |
E | 0.12702 | 88 | |
F | 0.02288 | 143 | |
G | 0.02015 | 76 | |
H | 0.06094 | 34 | |
I | 0.06966 | 6 | |
J | 0.00153 | 56 | |
K | 0.00772 | 93 | |
L | 0.04025 | 22 | |
M | 0.02406 | 128 | |
N | 0.06749 | 13 | |
O | 0.07507 | 94 | |
P | 0.01929 | 67 | |
Q | 0.00095 | 95 | |
R | 0.05987 | 46 | |
S | 0.06327 | 12 | |
T | 0.09056 | 71 | |
U | 0.02758 | 29 | |
V | 0.00978 | 129 | |
W | 0.0236 | 99 | |
X | 0.0015 | 14 | |
Y | 0.01974 | 19 | |
Z | 0.00074 | 201 |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style> | |
h1 { | |
margin: 0px 0px 15px 20px; | |
font-family: 'Arial'; | |
} | |
.bar { | |
fill: steelblue; | |
} | |
.bar:hover { | |
fill: blue; | |
} | |
.label { | |
fill: black; | |
font: 10px sans-serif; | |
} | |
.y path, .y stroke, .y line { | |
display: none; | |
} | |
.x path, .x stroke { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Frequency of Letters Used in the English Language</h1> | |
<div> | |
<select id="d3-dropdown"> | |
<option value="first">First</option> | |
<option value="second">Second</option> | |
<option value="third">Third</option> | |
<option value="forth">Forth</option> | |
</select> | |
</div> | |
<script> | |
var margin = { | |
top: 20, | |
right: 20, | |
bottom: 30, | |
left: 40 | |
}; | |
var width = 960 - margin.left - margin.right; | |
var 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 x = d3.scaleLinear() | |
.range([0, width]); | |
var y = d3.scaleBand() | |
.range([height, 0]); | |
var xAxis = d3.axisTop(x) | |
.ticks(10, "%"); | |
var yAxis = d3.axisLeft(y); | |
d3.csv("data.csv").then(function(data) { | |
console.log(data); | |
var maxFrequency = d3.max(data, function(d) { return d.frequency; }); | |
x.domain([0, maxFrequency]); | |
y.domain(data.map(function(d) { return d.letter; })) | |
.paddingInner(0.1); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + -2 + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
svg.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", 0) | |
.attr("height", y.bandwidth()) | |
.attr("y", function(d) { return y(d.letter); }) | |
.attr("width", function(d) { return x(d.frequency); }); | |
}); | |
</script> |