Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

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

@haimeili

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

@ashleybot
Owner

My pleasure! Glad I could help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.