D3 insert H3 tags Google Sheet

Question

I'm trying to use D3 to generate some headers on an HTML document in a D3 project. I can get D3 to print the data to the console, but I'm not sure how to get it to show up on the HTML from the Google Sheet I'm using. Basically, I'm trying to call the specific value under a specific header and use that data value as the text for a header. The data prints to the console. I can manually generate the h3 tags, but I'm having difficult with binding my data and using enters.

Here's the code:

HTML:

<div class="col-sm-2" id="records">
  <strong>records obtained</strong>
  <div class="col-sm-2" id="records">
    <strong>records obtained</strong>
  </div>
</div>

JavaScript:

d3.csv("https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv", function(error, data) {
  data.forEach(function(d) {
    d.rqt_count = d.rqt_count;
  });

  console.log(data[1]);

  d3.select("#records")
    .data()
    .enter()
    .append("h3")
    .text(function(d) {
      return d.rqt_count;
    });
});

Thanks!

Answer 1

Add .selectAll('h3') to associate new H3 elements with #records .

Also, you need to pass the data parameter to the data method:

 d3.csv("https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv", function(error, data) { d3.select("#records") .selectAll('h3') //ADD THIS .data(data) //CHANGE THIS .enter() .append("h3") .text(function(d) { return d.rqt_count; }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div class="col-sm-2" id="records"> <strong>records obtained</strong> </div>