Using D3.js to present XML as HTML Table

D3HTMLtable.js

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

<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.