Built with blockbuilder.org
forked from EmbraceLife's block: 4. barChart3.b.v3
forked from EmbraceLife's block: 4. barChart3.b.v4
forked from EmbraceLife's block: 4. barChart3.c.v3
forked from EmbraceLife's block: 4. barChart3.c.v4
license: gpl-3.0 |
Built with blockbuilder.org
forked from EmbraceLife's block: 4. barChart3.b.v3
forked from EmbraceLife's block: 4. barChart3.b.v4
forked from EmbraceLife's block: 4. barChart3.c.v3
forked from EmbraceLife's block: 4. barChart3.c.v4
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> | |
<meta charset="utf-8"> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<style> | |
/* must: rect:hover, without space */ | |
.bar rect:hover { | |
fill: brown; | |
} | |
.bar rect { | |
fill: gray; | |
} | |
.bar text { | |
fill: green; | |
} | |
.axis { | |
font: 10px sans-serif; | |
} | |
.axis text { | |
fill: cyan; | |
} | |
/* path here is axis line */ | |
.axis path { | |
fill: none; | |
stroke: yellow; | |
} | |
/* line here is tick line */ | |
.axis line { | |
stroke: red; | |
shape-rendering: crispEdges; | |
} | |
/* specify x-axis */ | |
.x.axis path { | |
/* make it invisible */ | |
display: none; | |
} | |
</style> | |
<body> | |
<script> | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
// ---- create a svg upon body -------------- | |
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 + ")"); | |
// SVG with full width&height => g at topLeft corner of inner canvas => var svg | |
var yScale = d3.scaleLinear() | |
.range([height, 0]); | |
var xScale = d3.scaleBand() | |
.rangeRound([0, width]).padding(.2); | |
var xAxis = d3.axisBottom(xScale); | |
var yAxis = d3.axisLeft(yScale) | |
// create 10 ticks with % as post fix | |
.ticks(10,"%"); | |
function type(d) { | |
d.frequency = +d.frequency; | |
return d; | |
} | |
d3.tsv("data.tsv", type, function(error, data) { | |
if (error) throw error; | |
xScale.domain(data.map(function(d) { return d.letter; })); | |
yScale.domain([0, d3.max(data, function(d) { return d.frequency; })]); | |
var xaxis= svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
var yaxis = svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
// ---- add label to y-axis | |
var ylabel = yaxis | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("fill", "red") | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Frequency"); | |
// ---- select all existing g placeholders for holding rects and texts ---- | |
// 1. as placeholders for x-axis and y-axis and inner canvas are all g | |
// 2. therefore, we can't selectAll("g") for making rects and text | |
// 3. so, selectAll only g with className "bar" | |
// 4. if not exist, then create g placeholders and name them "bar" | |
var bars = svg.selectAll(".bar").data(data) | |
.enter().append("g") | |
.attr("class", "bar") | |
.attr("transform", function(d) { return "translate(" + xScale(d.letter) + ", " + yScale(d.frequency) + ")"; }); | |
var rects = bars.append("rect") | |
// ---- add a className for easy selecting | |
.attr("class", "bar") | |
.attr("width", xScale.bandwidth()) | |
.attr("height", function(d){return height-yScale(d.frequency);}) | |
.attr("fill", "steelblue"); | |
var texts = bars.append("text") | |
.attr("class", "bar") | |
.text(function(d){return d.letter;}) | |
.attr("x", xScale.bandwidth()/2) | |
.attr("y", -3) | |
.attr("dy", "-0.1em")// trial error | |
.attr("fill", "orange") | |
.attr("text-anchor", "middle"); | |
}) | |
</script> |