Created
February 21, 2012 05:22
-
-
Save ashleybot/1873934 to your computer and use it in GitHub Desktop.
Using D3.js to present XML as HTML Table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
My pleasure! Glad I could help.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for this simply but very good example. Very easy to understand.