public
Last active

Using D3.js to present XML as HTML Table

  • Download Gist
D3HTMLtable.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
d3.xml("/data/GoldenGate2012Results.xml", function(xml) {
var runners = d3.select(xml).selectAll("runner")[0];
var table = d3.select("#presentation").append("table").attr("class","grid");
var thead = table.append("thead");
thead.append("th").text("Gender");
thead.append("th").text("City");
thead.append("th").text("Time");
thead.append("th").text("Pace");
var tr = table.selectAll("tr")
.data(runners)
.enter().append("tr");
// place
var td = tr.selectAll("td")
.data(function(d) {
return d3.select(d).attr("gender");
})
.enter().append("td")
.text(function(d) {
return d;
});
// city
tr.selectAll("tr")
.data(function(d) {
return d3.select(d).select("city")[0];
})
.enter().append("td")
.text(function(d) {
return d.textContent;
});
// time
tr.selectAll("tr")
.data(function(d) {
return d3.select(d).select("time")[0];
})
.enter().append("td")
.text(function(d) {
return d.textContent;
});
// pace
tr.selectAll("tr")
.data(function(d) {
return d3.select(d).select("pace")[0];
})
.enter().append("td")
.text(function(d) {
return d.textContent;
});
});
Example.xml
XML
1 2 3 4 5 6 7
<runner place="123" age="29" gender="F" age_range="20-29" place_by_group="24">
<name>Elizabeth Greer</name>
<city>Lexington KY</city>
<bib>84</bib>
<time>2:42:18</time>
<pace>12:23/M</pace>
</runner>

Thank you. This was really helpful in understanding how XML data can be processed using d3 APIs. - Santosh

Thank you for this simply but very good example. Very easy to understand.

My pleasure! Glad I could help.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.