Peterson Peterson - 1 month ago 4
Javascript Question

Simple bar chart d3

Copying simple example for barchart as per D3.js page still I am not getting anything on my screen except left black line. Can someone help me out?

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
fill: steelblue;
}

.bar:hover {
fill: brown;
}

.axis--x path {
display: none;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(d) {
d.frequency = +d.frequency;
return d;
}, function(error, data) {
if (error) throw error;

x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "%"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");

g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("y", function(d) { return y(d.frequency); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.frequency); });
});

</script>


data.tsv

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


Reference


https://bl.ocks.org/mbostock/3885304


Kindly, let me know where am I doing wrong?

Answer

It looks like the issue is because of the way your IDE is understanding the TABs in the .tsv file.

I suspect that if you put some console logging in (or debug) at line 37 you will see that both the letter and frequency value is being read into the "letter" property. i.e the TAB between the two values is not being recognised. This is turn will lead to a 'Nan' value for the y which propagates to a 'Nan' value for the height on each rect.

There is probably a setting in your IDE that allows the Tabs to be recognised as intended.