CODEWITHSUNDEEP
javascriptd3.jsgraphchartsbar-chart
Deadpool
Deadpool

Reputation: 8240

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?

Upvotes: 0

Views: 381

Answers (1)

dbarton_uk
dbarton_uk

Reputation: 1067

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.

Upvotes: 1

Related Questions