Skip to content

Instantly share code, notes, and snippets.

@BruJu
Last active Jun 13, 2020
Embed
What would you like to do?
barchart_letters
license: mit
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
letter frequency
a 0.0711
b 0.0114
c 0.0318
d 0.0367
e 0.1210
f 0.0111
g 0.0123
h 0.0111
i 0.0659
j 0.0034
k 0.0029
l 0.0496
m 0.0262
n 0.0639
o 0.0502
p 0.0249
q 0.0065
r 0.0607
s 0.0651
t 0.0592
u 0.0449
v 0.0111
w 0.0017
x 0.0038
y 0.0046
z 0.0015
BruJu/e2edc9ac66aacc4db1ae2bd3aa485b44/edit<!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;
}
.hovered {
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>
<h1>Frequency of Letters Used in English and in French</h1>
<body>
<select id="d3-dropdown">
<option value="letter">Alphabetical</option>
<option value="frequency">Frequency in english</option>
<option value="french_frequency">Frequency in french</option>>
<option value="mixed_frenquency">Frequency in english / in french</option>
<option value="weight">Weight</option>
</select>
<script>
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
};
var width = 960 - margin.left - margin.right
var offset = 20;
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 = {
'frequency': d3.scaleLinear().range([0, width / 2 - offset]),
'french_frequency': d3.scaleLinear().range([width / 2, width - offset]),
};
var y = d3.scaleBand()
.range([height, 0]);
var xAxis = d3.axisTop(x['frequency']).ticks(10, "%");
var yAxis = d3.axisLeft(y);
d3.csv("data.csv").then(function (data) {
d3.csv("frequencesLettreFrance.csv").then(function (french_data) {
for (i in french_data) {
if (i >= 26) break;
let l = french_data[i].frequency;
data[i]['frequency'] = parseFloat(data[i]['frequency']);
data[i]['weight'] = parseFloat(data[i]['weight']);
data[i]["french_frequency"] = parseFloat(l.trim());
console.log(data[i]);
}
console.log(data);
data.sort(function (a, b) { return d3.descending(a.letter, b.letter); })
var maxFrequency = d3.max(data, function (d) { return Math.max(d.frequency, d.french_frequency); });
let iii = 0;
for (key in x) {
x[key].domain([0, maxFrequency]);
svg.append("g")
.attr("class", "x axis ")
.attr("transform", "translate(" + (iii * width / 2) + "," + -2 + ")")
.call(xAxis);
iii = iii + 1
}
y.domain(data.map(function (d) { return d.letter; }))
.paddingInner(0.1);
for (let iii = 0; iii != Object.keys(x).length; ++iii) {
svg.append("g")
.attr("class", "y axis " + Object.keys(x)[iii])
.attr("transform", "translate(" + (iii * width / 2) + "," + 0 + ")")
.call(yAxis);
}
iii = 0;
let z = svg.selectAll(".bar")
.data(data)
.enter();
let mouse_action = function (newClassification) {
return function (d) {
svg.selectAll(".bar")
.filter(function (dbar) { return d.letter == dbar.letter; })
.classed('hovered', newClassification);
};
};
for (key in x) {
z.append("rect")
.attr("class", "bar " + key)
.attr("x", iii * width / 2)
.attr("height", y.bandwidth())
.attr("y", function (d) { return y(d.letter); })
.attr("width", function (d) { return x['frequency'](d[key]); })
.on('mouseover', mouse_action(true))
.on('mouseout', mouse_action(false));
iii++;
}
d3.select("select")
.on("change", function (d) {
var selected = d3.select("#d3-dropdown").node().value;
console.log(selected);
d3.select("#selected-dropdown").text(selected);
for (let language in x) {
console.log(language);
data.sort(function (a, b) {
if (selected == "letter") {
return d3.descending(a[selected], b[selected]);
} else {
let sel = selected;
if (sel == "mixed_frenquency") {
sel = language;
}
return d3.ascending(parseFloat(a[sel]), parseFloat(b[sel]));
}
});
y.domain(data.map(function (d) { return d.letter; }))
.paddingInner(0.1);
svg.selectAll(".y.axis." + language)
.call(yAxis);
svg.selectAll(".bar." + language)
.attr("y", function (d) { return y(d.letter); })
;
}
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment