score:2

Accepted answer

In D3, once you load the data through the .data(dataset) command, you can now access each record of the data by inserting the anonymous function function(d, i) { } as you have done in a few of your attributes.

Since your dataset is:

var dataset = [
  {"country":"Hong Kong","score":8.98},
  {"country":"Singapore","score":8.54},
  {"country":"New Zealand","score":8.19},
  {"country":"Switzerland","score":8.09},
  {"country":"Mauritius","score":8.98},
  {"country":"United Arab Emirates","score":8.05},
  {"country":"Canada","score":8.00},
  {"country":"Australia","score":7.87},
  {"country":"Jordan","score":7.86},
  {"country":"Chile","score":7.84},
  ];

each d is a object record e.g. {"country":"Singapore","score":8.54}, while i refers to the index of the object d returned e.g. 1 for our example of d used above.

To access the score of the object record d, this becomes simple Javscript object notation i.e. d.score.

Hence your .attr call should look like:

.attr("height", function(d) {
          return d.score * 4;
        });

Similarly, you can extract the other fields e.g. country with d.country if you intend to use it in .attr("text", function(d) { return d.country; });

This is the real beauty and power of D3. If you ever want to expand your visualization with more features that is obtained through your data, then all you have to make sure is that your dataset data contains more data attributes, and you can call them later as you iterate through the anonymous functions. And D3 is in the spirit of its name, truly being "data-driven"! :)

score:0

Something like 

For( var i =0; i<dataset.length; i++){
   // Dataset[i].country
   // dataset[i].score
}

You have an array of objects

score:1

You will need to fix d to d.score.

If you want to show country text, write svg.selectAll("text") after svg.selectAll("rect").

Like this: 

var w = 500;
var h = 100;
var barPadding = 1;

var dataset = [
  {"country":"Hong Kong","score":8.98},
  {"country":"Singapore","score":8.54},
  {"country":"New Zealand","score":8.19},
  {"country":"Switzerland","score":8.09},
  {"country":"Mauritius","score":8.98},
  {"country":"United Arab Emirates","score":8.05},
  {"country":"Canada","score":8.00},
  {"country":"Australia","score":7.87},
  {"country":"Jordan","score":7.86},
  {"country":"Chile","score":7.84},
  ];

  //Create SVG element
  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return i * (w / dataset.length);
    })
    .attr("y", function(d) {
      return h - (d.score * 4);
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function(d) {
      return d.score * 4;
    });

  svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
      return d.country;
    })
    .attr("transform", function(d, i) {
      var barW = w / dataset.length;
      return "translate(" +
             ( barW * i + barW / 2 + barPadding ) + "," +
             ( h - 5 ) +
             ")rotate(-90)";
    })
    .attr("font-size", "8pt")
    .attr("fill", "white");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query

More Query from same tag