index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Straßennamen in Köln</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->



  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
  text {
  font: 11px sans-serif;
}

.male {
  fill: #71C671;
}

.female {
  fill: #FFA54F;
}
  </style>
</head>
<body>

  <div class="container">

      <div class="page-header">
        <h1>Straßennamen in Köln</h1>
        <p class="lead">Ein Diagramm zur Verteilung von weiblichen und männlichen Vornamen in den Straßen von Köln.</p>
      </div>

      <div class="row">
        <div id ="chart">
        </div>
      </div>

    </div> <!-- /container -->


    <div class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
        <span class="navbar-text">
          <a href="http://www.offenedaten-koeln.de/dataset/0792603e-2598-4c10-a3e2-e025b6dd178a/resource/0792603e-2598-4c10-a3e2-e025b6dd178a"  target="_blank">Straßenverzeichnis</a> <a href="http://creativecommons.org/licenses/by/3.0/de/" target="_blank">CC-BY</a> Stadt Köln |
           Basiert auf Vornamendatenbank <a href="http://www.namesia.de/" target="_blank">Namesia</a> |
           Entwickelt vom <a href="http://codefor.de/koeln/" target="_blank">OKLab Köln</a> |
           <a href="https://github.com/codeforcologne/strassenkoeln" target="_blank">Sourcecode</a>
        </span>
      </div>
    </div>

  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>

var diameter = 1060,
  format = d3.format(",d"),
  color = d3.scale.category20c();

var bubble = d3.layout.pack()
  .sort(null)
  .size([diameter, diameter])
  .padding(1.5);

var svg = d3.select("#chart").append("svg:svg")
  .attr("width", diameter)
  .attr("height", diameter)
  .attr("class", "bubble");

  d3.json("data.json", function(error, data) {
    if (error) throw error;

    var root = classes(data);

    var nodes = bubble.nodes(root)
      .filter(function(d) {
        return !d.children;
      });


    var node = svg.selectAll(".node")
      .data(nodes)
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      });

    node.append("title")
      .text(function(d) {
        return d.name + ": " + format(d.value);
      });

    node.append("circle")
      .attr("r", function(d) {
        return d.r;
      })
      .attr('class', function(d) {
        return d.className;
      });

    node.append("text")
      .attr("dy", ".3em")
      .attr("fill", "black")
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.name + ": " + format(d.value);
      });
});



// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  for (var i = 0; i < root.length; i++) {
    var node = root[i];
    classes.push({
      name: node["name"],
      className: node["gender"],
      value: node["number"],
      packageName: node["gender"]
    });
  }

  return {
    children: classes
  };
}

d3.select(self.frameElement).style("height", diameter + "px");

  </script>






</body>
</html>