-
-
Save ariutta/5036142 to your computer and use it in GitHub Desktop.
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
| <results> | |
| <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> | |
| <runner place="124" age="27" gender="M" age_range="20-29" place_by_group="30"> | |
| <name>Bill Greer</name> | |
| <city>Louisville KY</city> | |
| <bib>85</bib> | |
| <time>2:42:19</time> | |
| <pace>12:22/M</pace> | |
| </runner> | |
| </results> |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>D3.js Table</title> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| width: 960px; | |
| height: 500px; | |
| position: relative; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="presentation"></div> | |
| <script> | |
| d3.xml("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("AgeRange"); | |
| 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"); | |
| // gender | |
| var td = tr.selectAll("td") | |
| .data(function(d) { | |
| return d3.select(d).attr("gender"); | |
| }) | |
| .enter().append("td") | |
| .text(function(d) { | |
| return d; | |
| }); | |
| // age_range | |
| var td = tr.selectAll("td") | |
| .data(function(d) { | |
| return d3.select(d).attr("age_range"); | |
| }) | |
| .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; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I am trying to run this code but age range is not printed correctly.
I tried printing age instead and found if age is 27, this application prints only 7.
I am trying to learn reading xml data from d3 but stuck in between.
please answer.
Thanks in advance,
Renu