score:2

Accepted answer

I'm not getting any error message while running your code.

Also there is a mistake in your code. You are appending 'rect' element twice (see snippet below):

svg.selectAll('rect')
                .data(data)
                .enter().append('rect')
                .append('rect') // 'rect' element appended twice

Here's an updated and working code :

var margin = {
    top: 20,
    right: 10,
    bottom: 100,
    left: 50
  },
  width = 700 - margin.right - margin.left,
  height = 500 - margin.top - margin.bottom;
var svg = d3.select("body")
  .append("svg")
  .attr({
    "width": width + margin.right + margin.left,
    "height": height + margin.top + margin.bottom
  })
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.right + ")");
var xScale = d3.scale.ordinal()
  .rangeRoundBands([0, width], 0.2, 0.2);

var yScale = d3.scale.linear()
  .range([height, 0]);
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");

d3.csv("mathResults.csv", function(error, data) {
  if (error) console.log("Error: can not be loaded!");
  data.forEach(function(d) {
    d.Name = d.Name;
    d.Grade = +d.Grade;
    console.log(d.Grade);
  });
  data.sort(function(a, b) {
    return b.Grade - a.Grade;
  });
  xScale.domain(data.map(function(d) {
    return d.Name;
  }));
  yScale.domain([0, d3.max(data, function(d) {
    return d.Grade;
  })]);
  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr("height", 0)
    .attr("y", height)
    .transition().duration(3000)
    .delay(function(d, i) {
      return i * 200;
    })
    .attr({
      "x": function(d) {
        return xScale(d.Name);
      },
      "y": function(d) {
        return yScale(d.Grade);
      },
      "width": xScale.rangeBand(),
      "height": function(d) {
        return height - yScale(d.Grade);
      }
    })
    .style("fill", function(d, i) {
      return 'rgb(20, 20, ' + ((i * 30) + 100) + ')'
    });

  svg.selectAll('text')
    .data(data)
    .enter()
    .append('text')

    .text(function(d) {
      return d.Grade;
    })
    .attr({
      "x": function(d) {
        return xScale(d.Name) + xScale.rangeBand() / 2;
      },
      "y": function(d) {
        return yScale(d.Grade) + 12;
      },
      "font-family": 'sans-serif',
      "font-size": '13px',
      "font-weight": 'bold',
      "fill": 'white',
      "text-anchor": 'middle'
    });

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .attr("dx", "-.8em")
    .attr("dy", ".25em")
    .attr("transform", "rotate(-60)")
    .style("text-anchor", "end")
    .attr("font-size", "10px");

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -height / 2)
    .attr("dy", "-3em")
    .style("text-anchor", "middle")
    .text("Trillions of US Dollars ($)");
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Show data in BaraGraph</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
</head>

<body>
  <h1 style="text-align:center;">Show Maths data in BaraGraph</h1>

</body>

</html>


Related Query

More Query from same tag