Built with blockbuilder.org
forked from aurelient's block: barchart_letters
license: mit |
Built with blockbuilder.org
forked from aurelient's block: barchart_letters
<!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> | |
<h1>Frequency of Letters Used in the English Language</h1> | |
<body> | |
<script> | |
var margin = { | |
top: 20, | |
right: 20, | |
bottom: 30, | |
left: 40 | |
}; | |
var width = 960 - margin.left - margin.right; | |
var height = 700 - 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([0, height]); | |
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> |