A variant of the bar chart example demonstrating how to parse a simple XML file and traverse it using the selectors API. (I recommend converting your data to TSV or CSV instead of parsing XML, if you can, of course.)
Last active
February 9, 2016 01:51
-
-
Save mbostock/ec585e034819c06f5c99 to your computer and use it in GitHub Desktop.
XML Parsing
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
| license: gpl-3.0 |
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
| <?xml version="1.0" encoding="utf-8"?> | |
| <data> | |
| <letter id="A"><frequency>.08167</frequency></letter> | |
| <letter id="B"><frequency>.01492</frequency></letter> | |
| <letter id="C"><frequency>.02782</frequency></letter> | |
| <letter id="D"><frequency>.04253</frequency></letter> | |
| <letter id="E"><frequency>.12702</frequency></letter> | |
| <letter id="F"><frequency>.02288</frequency></letter> | |
| <letter id="G"><frequency>.02015</frequency></letter> | |
| <letter id="H"><frequency>.06094</frequency></letter> | |
| <letter id="I"><frequency>.06966</frequency></letter> | |
| <letter id="J"><frequency>.00153</frequency></letter> | |
| <letter id="K"><frequency>.00772</frequency></letter> | |
| <letter id="L"><frequency>.04025</frequency></letter> | |
| <letter id="M"><frequency>.02406</frequency></letter> | |
| <letter id="N"><frequency>.06749</frequency></letter> | |
| <letter id="O"><frequency>.07507</frequency></letter> | |
| <letter id="P"><frequency>.01929</frequency></letter> | |
| <letter id="Q"><frequency>.00095</frequency></letter> | |
| <letter id="R"><frequency>.05987</frequency></letter> | |
| <letter id="S"><frequency>.06327</frequency></letter> | |
| <letter id="T"><frequency>.09056</frequency></letter> | |
| <letter id="U"><frequency>.02758</frequency></letter> | |
| <letter id="V"><frequency>.00978</frequency></letter> | |
| <letter id="W"><frequency>.02360</frequency></letter> | |
| <letter id="X"><frequency>.00150</frequency></letter> | |
| <letter id="Y"><frequency>.01974</frequency></letter> | |
| <letter id="Z"><frequency>.00074</frequency></letter> | |
| </data> |
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| .bar { | |
| fill: steelblue; | |
| } | |
| .bar:hover { | |
| fill: brown; | |
| } | |
| .axis { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(10, "%"); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.xml("data.xml", function(error, data) { | |
| if (error) throw error; | |
| // Convert the XML document to an array of objects. | |
| // Note that querySelectorAll returns a NodeList, not a proper Array, | |
| // so we must use map.call to invoke array methods. | |
| data = [].map.call(data.querySelectorAll("letter"), function(letter) { | |
| return { | |
| letter: letter.getAttribute("id"), | |
| frequency: +letter.querySelector("frequency").textContent | |
| }; | |
| }); | |
| x.domain(data.map(function(d) { return d.letter; })); | |
| y.domain([0, d3.max(data, function(d) { return d.frequency; })]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Frequency"); | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.letter); }) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { return y(d.frequency); }) | |
| .attr("height", function(d) { return height - y(d.frequency); }); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment