kba · October 26, 2015 13:13
diff --git a/data.xml b/data.xml
 <?xml version="1.0" encoding="UTF-8"?>
 <data>
    <docs nr_docs="0">42</docs>
    <docs nr_docs="1">24</docs>
    <docs nr_docs="2">12</docs>
    <docs nr_docs="3">1</docs>
    <docs nr_docs="5">1</docs>
    <docs nr_docs="6">15</docs>
    <docs nr_docs="7">1</docs>
    <docs nr_docs="8">1</docs>
    <docs nr_docs="9">1</docs>
    <docs nr_docs="14">1</docs>
    <docs nr_docs="18">1</docs>
    <docs nr_docs="20">1</docs>
    <docs nr_docs="21">1</docs>
 </data>
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>D3.xml Example</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
    <style type="text/css">
      .chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: left;
        padding: 3px;
        margin: 1px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2>Chart</h2>
    <div id="chart" class="chart">
    </div>
    <script type="text/javascript">
      d3.xml("data.xml", function(err, xml) {
        d3.select("#chart")
        .selectAll("div")
        .data(xml.documentElement.getElementsByTagName("docs"))
        .enter().append("div")
        .style("width", function(d) { return d.textContent * 10 + "px"; })
        .text(function(d) { return d.getAttribute('nr_docs') + " documents"; });
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>D3.xml Example</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
	<style type="text/css">
	.chart div {
	font: 10px sans-serif;
	background-color: steelblue;
	text-align: left;
	padding: 3px;
	margin: 1px;
	color: black;
	}
	</style>
	</head>
	<body>
	<h2>Chart</h2>
	<div id="chart" class="chart">
	</div>
	<script type="text/javascript">
	d3.xml("data.xml", function(err, xml) {
	d3.select("#chart")
	.selectAll("div")
	.data(xml.documentElement.getElementsByTagName("docs"))
	.enter().append("div")
	.style("width", function(d) { return d.textContent * 10 + "px"; })
	.text(function(d) { return d.getAttribute('nr_docs') + " documents"; });
	});
	</script>
	</body>
	</html>