XML Parsing

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

forked from mbostock's block: XML Parsing

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: teal;
}

.bar:hover {
  fill: #bf6e11;
}

.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: 10, right: 60, bottom: 60, left: 60},
    width = 740 - 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>

https://d3js.org/d3.v3.min.js