Creating a table with d3.js from the properties in a geojson object

Question

I am trying to create a table containing the the properties for each of the features listed in an inline geojson object.

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?

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
    });

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.

This is the geojson I'm working from, it needs to be inline in the same file.

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"
        }
    }]
};

I've made a jsfiddle showing the result

Any advice would be gratefully received. Thank you.

score 0 · Accepted Answer · edited May 23 '17 at 10:28

I've bumped your fiddle to here a lot of which is based on Shawn Allen fantastic answer here.

For now, you needed to provide an array so d3 could iterate over them (in this case 4 times)

var tr = thedatatable.selectAll("tr")
    .data(d3.values(datapointsjson.features))
    .enter()
    .append("tr");

Then you needed to extract the info you needed from the json using:

var td = tr.selectAll("td")
    .data(function(row) {
        return headers.map(function(d) { console.log(row.properties)
            return {column: d, value: row.properties[d]};
        });
    })
    .enter()
    .append("td")
    .text(function (d) {
        return d.value;
    });

Thanks so much - that works perfectly, and the links helped with understanding what you were doing — kmaguire, May 22 '14 at 03:57

Creating a table with d3.js from the properties in a geojson object

1 Answers1