Skip to content

Instantly share code, notes, and snippets.

@ColinEberhardt
Last active December 5, 2016 17:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ColinEberhardt/6e2d2ad21be4bc0fdaf5490b52fe8ad0 to your computer and use it in GitHub Desktop.
Save ColinEberhardt/6e2d2ad21be4bc0fdaf5490b52fe8ad0 to your computer and use it in GitHub Desktop.
Let's build a bar chart - d3fc version
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script src="https://d3fc.io/lib/d3fc.min.js"></script>
<style>
#chart {
width: 100%;
height: 500px;
}
.bar {
fill: steelblue;
}
.x-axis .domain {
display: none;
}
</style>
<div id="chart"></div>
<script>
var barSeries = fc.seriesSvgBar()
.barWidth(fc.seriesFractionalBarWidth(0.9))
.crossValue(function(d) { return d.letter; })
.mainValue(function(d) { return d.frequency; });
d3.tsv("data.tsv", function(d) {
d.frequency = +d.frequency;
return d;
}, function(error, data) {
var yExtent = fc.extentLinear()
.accessors([function(d) { return d.frequency; }])
.pad([0, 0.1])
.include([0]);
var chart = fc.chartSvgCartesian(
d3.scalePoint(),
d3.scaleLinear()
)
.xDomain(data.map(function(d) { return d.letter; }))
.xPadding(0.5)
.yDomain(yExtent(data))
.yTicks(10, '%')
.yOrient('left')
.plotArea(barSeries);
d3.select('#chart')
.datum(data)
.call(chart);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment