Skip to content

Instantly share code, notes, and snippets.

@dtchepak

dtchepak/README.md

Created August 31, 2014 06:53
Show Gist options
  • Save dtchepak/4426cc4778005485ad90 to your computer and use it in GitHub Desktop.
Save dtchepak/4426cc4778005485ad90 to your computer and use it in GitHub Desktop.
Download ZIP
D3 newbie updates a bar chart
Raw
README.md
Raw
data-chars.tsv
name value
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
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>D3 newbie updates a bar chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
</head>
<body>
<p>
Adapted from <a href="http://bost.ocks.org/mike/bar/3/">http://bost.ocks.org/mike/bar/3/</a>.
</p>
<svg id="mychart" class="chart"></svg>
<div>
<form>
<textarea id="textToAnalyse" name="textToAnalyse" cols="40" rows=5"></textarea>
<input id="submitBtn" type="button" value="Update"></input>
</form>
</div>
<script>
var outerWidth = 960, outerHeight = 500;
var margin = { top: 20, right: 30, bottom: 30, left: 40 },
width = outerWidth - margin.left - margin.right,
height = outerHeight - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
var chart = d3.select("#mychart")
.attr("width", outerWidth)
.attr("height", outerHeight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
d3.tsv("data-chars.tsv", type, update);
function update(err, data) {
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
chart
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.select(".y.axis").remove();
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
var bar = chart.selectAll(".bar")
.data(data, function(d) { return d.name; });
// new data:
bar.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("width", x.rangeBand());
// removed data:
bar.exit().remove();
// updated data:
bar
.transition()
.duration(750)
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
};
function type(d) {
d.value = +d.value;
return d;
}
document.getElementById("submitBtn")
.onclick = function() {
var f = freqs(document.getElementById("textToAnalyse").value);
update({}, f);
}
function freqs(str) {
var s = str.toUpperCase()
var n = s.length
var x = {}
for (var i = "A".charCodeAt(0); i<="Z".charCodeAt(0); i++) {
x[String.fromCharCode(i)] = 0;
}
for (var i=0; i<s.length; i++) {
if (/[A-Z]/.test(s[i])) {
x[s[i]]++;
}
}
var f = []
for (var c in x) {
f.push( { name: c, value: x[c]/=n });
}
return f;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment