Skip to content

Instantly share code, notes, and snippets.

@Cynnexis

Cynnexis/.block

Last active December 12, 2019 10:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Cynnexis/9334c2bd69464e5018f856f08b66d75c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Cynnexis/9334c2bd69464e5018f856f08b66d75c to your computer and use it in GitHub Desktop.
Download ZIP
TP5 - Interaction
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap" rel="stylesheet">
<title>TP5 - Interaction</title>
<style>
h1 {
margin: 0 0 15px 20px;
font-family: 'Arial',serif;
}
.bar.fr {
fill: steelblue;
}
.bar.en {
fill: #cd454f;
}
.label {
fill: black;
font-family: "Raleway", "Verdana", "Arial", sans-serif, serif;
font-size: 10pt;
}
.y path, .y stroke, .y line {
display: none;
}
.x path, .x stroke {
display: none;
}
.navbar + .container {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<div class="container">
<h1 class="navbar-brand">TP5 - Interaction</h1>
</div>
</div>
<div class="container">
<div class="row">
<label for="sort-dropdown" class="col-1">Sort</label>
<select id="sort-dropdown" name="sort-dropdown" class="form-control col-2">
<option value="alphabetical">Alphabetical</option>
<option value="frequency">Frequency</option>
<option value="weight">Weight</option>
</select>
<select id="order-dropdown" name="order-dropdown" class="form-control col-2">
<option value="asc">Asc</option>
<option value="dec">Dec</option>
</select>
</div>
<div class="row">
<div class="col-6">
<h2>Frequency of Letters Used in the English Language</h2>
<div id="chart-en-placeholder"></div>
</div>
<div class="col-6">
<h2>Frequency of Letters Used in the French Language</h2>
<div id="chart-fr-placeholder"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
$(document).ready(function() {
let margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
};
let width = 400 - margin.left - margin.right;
let height = 500 - margin.top - margin.bottom;
let svg_en = d3.select("#chart-en-placeholder")
.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 + ")");
let svg_fr = d3.select("#chart-fr-placeholder")
.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 + ")");
let x = d3.scaleLinear()
.range([0, width]);
let y = d3.scaleBand()
.range([0, height]);
let sortMethod = "alphabetical";
let orderMethod = "asc";
function sort(data) {
let s = d3.ascending;
if (orderMethod === "dec")
s = d3.descending;
switch (sortMethod) {
case "alphabetical":
data.sort((x, y) => {
return s(x.letter, y.letter);
});
break;
case "frequency":
data.sort((x, y) => {
return s(x.frequency, y.frequency);
});
break;
case "weight":
data.sort((x, y) => {
return s(x.weight, y.weight);
});
break;
}
}
function drawChart() {
svg_en.selectAll("*").remove();
svg_fr.selectAll("*").remove();
let xAxis = d3.axisTop(x)
.ticks(10, "%");
let yAxis = d3.axisLeft(y);
d3.csv("letter-frequency.en.csv").then(function (data) {
let maxFrequency = d3.max(data, function (d) {
return d.frequency;
});
x.domain([0, maxFrequency]);
sort(data);
y.domain(data.map(function (d) {
return d.letter;
}))
.paddingInner(0.1);
svg_en.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + -2 + ")")
.call(xAxis);
svg_en.append("g")
.attr("class", "y axis")
.call(yAxis);
svg_en.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", d => "bar en " + d.letter.toLowerCase())
.attr("x", 0)
.attr("height", y.bandwidth())
.attr("y", function (d) {
return y(d.letter);
})
.attr("width", function (d) {
return x(d.frequency);
})
.on("mouseover", function(bar) {
d3.select(".bar.en." + bar.letter.toLowerCase()).style("fill", "#ee505c");
d3.select(".bar.fr." + bar.letter.toLowerCase()).style("fill", "#549DD9");
})
.on("mouseout", function(bar) {
d3.select(".bar.en." + bar.letter.toLowerCase()).style("fill", "#cd454f");
d3.select(".bar.fr." + bar.letter.toLowerCase()).style("fill", "steelblue");
});
});
d3.csv("letter-frequency.fr.csv").then(function (data) {
let maxFrequency = d3.max(data, function (d) {
return d.frequency;
});
x.domain([0, maxFrequency]);
sort(data);
y.domain(data.map(function (d) {
return d.letter;
}))
.paddingInner(0.1);
svg_fr.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + -2 + ")")
.call(xAxis);
svg_fr.append("g")
.attr("class", "y axis")
.call(yAxis);
svg_fr.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", d => "bar fr " + d.letter.toLowerCase())
.attr("x", 0)
.attr("height", y.bandwidth())
.attr("y", function (d) {
return y(d.letter);
})
.attr("width", function (d) {
return x(d.frequency);
})
.on("mouseover", function(bar) {
d3.select(".bar.fr." + bar.letter.toLowerCase()).style("fill", "#549DD9");
d3.select(".bar.en." + bar.letter.toLowerCase()).style("fill", "#ee505c");
})
.on("mouseout", function(bar) {
d3.select(".bar.fr." + bar.letter.toLowerCase()).style("fill", "steelblue");
d3.select(".bar.en." + bar.letter.toLowerCase()).style("fill", "#cd454f");
});
});
}
drawChart();
d3.select("#sort-dropdown")
.on("change", function(d) {
sortMethod = d3.select("#sort-dropdown").node().value;
drawChart();
});
d3.select("#order-dropdown")
.on("change", function(d) {
orderMethod = d3.select("#order-dropdown").node().value;
drawChart();
});
});
</script>
</body>
</html>
Raw
letter-frequency.en.csv
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
Raw
letter-frequency.fr.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment