Skip to content

Instantly share code, notes, and snippets.

@sampathweb
Last active Oct 20, 2016
Embed
What would you like to do?
Alpha Frequencies
license: mit
letter 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>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<button id="btn-asc">Sort Ascending</button>
<button id="btn-desc">Sort Descending</button>
<hr />
<script>
var width = 960;
var height = 500;
var xScale = d3.scaleLinear()
.range([0, width]);
var chart = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var dataset;
d3.csv("alpha_frequencies.csv", function(error, data) {
dataset = data;
dataset.forEach(function(d) {
d.frequency = +d.frequency; // parseFloat(d.frequency)
});
dataset.sort(function(a, b) {
return b.frequency - a.frequency;
});
var max_freq = d3.max(dataset, function(d) {
return d.frequency;
})
// Set Domain of the scale
xScale.domain([0, max_freq]);
var rects = chart.selectAll("rect")
.data(dataset);
rects.enter()
.append("rect")
.attr("width", function(d) { return xScale(d.frequency); })
.attr("y", function(d, i) { return i * 20})
.attr("height", 18);
d3.selectAll("#btn-asc")
.on("click", function(){
console.log("Clicked")
dataset.sort(function(a, b) {
return b.frequency - a.frequency;
});
console.log("clicked Asc")
chart.selectAll("rect")
.data(dataset)
.attr("width", function(d) { return xScale(d.frequency); })
.attr("y", function(d, i) { return i * 20}) });
d3.select("#btn-desc")
.on("click", function(){
dataset.sort(function(a, b) {
return a.frequency - b.frequency;
});
console.log("clicked Desc")
chart.selectAll("rect")
.data(dataset)
.attr("width", function(d) { return xScale(d.frequency); })
.attr("y", function(d, i) { return i * 20}) });
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment