Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Using D3.js to present XML as HTML Table
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;
});
});
<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>
@smarigowda

This comment has been minimized.

Show comment Hide comment
@smarigowda

smarigowda Sep 8, 2013

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

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

@haimeili

This comment has been minimized.

Show comment Hide comment
@haimeili

haimeili Jan 14, 2014

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

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

@ashleybot

This comment has been minimized.

Show comment Hide comment
@ashleybot

ashleybot Feb 24, 2014

My pleasure! Glad I could help.

Owner

ashleybot commented Feb 24, 2014

My pleasure! Glad I could help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment