title: Creating a table with d3.js from the properties in a geojson object
body: <p>I am trying to create a table containing the the properties for each of the features listed in an inline geojson object.</p>
  
  <p>The following nearly gets what I want but it only shows the properties for the first entry. How should I alter it so that shows the properties for all entries?</p>
  
  <pre><code>var thedatatable = d3.select("#propertiestable")
      .append("table")
      .attr("class", "datatable");
  
  var header = thedatatable.selectAll("th")
      .data(d3.keys(datapointsjson.features[0].properties))
      .enter()
      .append("th")
      .text(function (d) {
          return d
      });
  
  var tr = thedatatable.selectAll("tr")
      .data(d3.values(datapointsjson.features[0].properties))
      .enter()
      .append("tr");
  
  var td = thedatatable.selectAll("td")
      .data(d3.values(datapointsjson.features[0].properties))
      .enter()
      .append("td")
      .text(function (d) {
          return d
      });
  </code></pre>
  
  <p>I'm reasonably sure that it's the "td" bit that I'm getting wrong but nothing I try shows more than just the first entry. </p>
  
  <p>This is the geojson I'm working from, it needs to be inline in the same file.</p>
  
  <pre><code>var datapointsjson = {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [
                  136.33, -31.5
              ]
          },
          "properties": {
              "regno": "R123456",
              "taxon": "genus1 species1",
              "sitecode": "",
              "nearestnamedplace": "FREELING ISLAND",
              "preciselocation": "south coast",
              "collection": "Herpetology"
          }
      }, {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [
                  137.07, -36.23
              ]
          },
          "properties": {
              "regno": "R654185",
              "taxon": "genus2 species2",
              "sitecode": "",
              "nearestnamedplace": "Neptune Island",
              "preciselocation": "Middle of island",
              "collection": "Herpetology"
          }
      }, {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [
                  142.0358, -38.7719
              ]
          },
          "properties": {
              "regno": "R6528445",
              "taxon": "genus3 species3",
              "sitecode": "TT02",
              "nearestnamedplace": "Woolongong",
              "preciselocation": "5 km N",
              "collection": "Herpetology"
          }
      }, {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [
                  137.6914, -32.2789
              ]
          },
          "properties": {
              "regno": "R654987",
              "taxon": "genus4 species4",
              "sitecode": "IL0601",
              "nearestnamedplace": "Ballarat",
              "preciselocation": "5.3 KM E",
              "collection": "Herpetology"
          }
      }]
  };
  </code></pre>
  
  <p>I've made a <a href="http://jsfiddle.net/kmaguire/nZm48/" rel="nofollow">jsfiddle</a> showing the result</p>
  
  <p>Any advice would be gratefully received. Thank you.</p>