title: D3 - loading xml data from file, using scales for barchart
body: <p>I'm following this great tutorial on d3 here
  <a href="http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_modernizing_the_bar_chart" rel="nofollow">http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_modernizing_the_bar_chart</a></p>
  
  <p>which introduces a bar chart in this chapter using scales. Now I wanted to load my data from an xml file but of course my code doesn't work. I'm guessing that in creating xScale and yScale variables I don't get the length of the dataset </p>
  
  <p>Here is the xml file</p>
  
  <pre><code>&lt;data&gt;
  &lt;value&gt;5&lt;/value&gt;
  &lt;value&gt;10&lt;/value&gt;
  &lt;value&gt;53&lt;/value&gt;
  &lt;value&gt;19&lt;/value&gt;
  &lt;value&gt;61&lt;/value&gt;
  &lt;value&gt;25&lt;/value&gt;
  &lt;value&gt;22&lt;/value&gt;
  &lt;value&gt;18&lt;/value&gt;
  &lt;value&gt;15&lt;/value&gt;
  &lt;value&gt;13&lt;/value&gt;
  &lt;value&gt;11&lt;/value&gt;
  &lt;value&gt;12&lt;/value&gt;
  &lt;value&gt;15&lt;/value&gt;
  &lt;value&gt;20&lt;/value&gt;
  &lt;value&gt;18&lt;/value&gt;
  &lt;value&gt;17&lt;/value&gt;
  &lt;value&gt;16&lt;/value&gt;
  &lt;value&gt;18&lt;/value&gt;
  &lt;value&gt;23&lt;/value&gt;
  &lt;value&gt;25&lt;/value&gt;
  &lt;/data&gt;
  </code></pre>
  
  <p>And the code itself</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Vjezba - 9.poglavlje - barchart&lt;/title&gt;
      &lt;script type="text/javascript" src="d3/d3.v3.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          /* No style rules here yet */       
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script type="text/javascript"&gt;
      d3.xml("values.xml","application/xml", function(dataset) {
  
          var w = 600;
          var h = 250;
  
          //var dataset = [ 5, 10, 53, 19, 61, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
          //radi jednakog razmaka stupova             
  
          var xScale = d3.scale.ordinal()
                          .domain(d3.range(dataset.length))
                          .rangeRoundBands([0, w], 0.05);
  
          var yScale = d3.scale.linear()
                          .domain([0, d3.max(dataset)])
                          .range([0, h]);
  
          //Create SVG element
          var svg = d3.select("body")
                      .append("svg")
                      .attr("width", w)
                      .attr("height", h);
  
          //Create bars       
          svg.selectAll("rect")
             .data(dataset.documentElement.getElementsByTagName("value"))
             .enter()
             .append("rect")
             .attr("x", function(d, i) {
                  return xScale(i);
             })
             .attr("y", function(d) {
                  return h - yScale(d);
             })
             .attr("width", xScale.rangeBand())
             .attr("height", function(d) {
                  return yScale(d);
             })
             .attr("fill", function(d) {
                  return "rgb(0, 0, " + (d * 10) + ")";
             });
  
      });
      /*
          //Create labels
          svg.selectAll("text")
             .data(xml.documentElement.getElementsByTagName("value"))
             .enter()
             .append("text")
             .text(function(d) {
                  return d;
             })
             .attr("text-anchor", "middle")
             .attr("x", function(d, i) {
                  return xScale(i) + xScale.rangeBand() / 2;
             })
             .attr("y", function(d) {
                  return h - yScale(d) + 14;
             })
             .attr("font-family", "sans-serif")
             .attr("font-size", "11px")
             .attr("fill", "white");
      */          
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>