fernwaerme

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
    var width = 960,
        height = 500,
        padding = 60;
    
    /* ---------- SVG erstellen ---------- */
    var svg = d3.select("body")
    						.append("svg")
    						.attr("width", width)
    						.attr("height", height);
    
    
    /* ---------- Daten laden ---------- */
    d3.csv("bezirkszentren_fernwaerme.csv", function(error, data) {
      if (error) throw error;
      
      /* ---------- Daten formatieren ---------- */
      //alle Strings in Zahlen umwandeln, die Zahlen sein sollen
      data.forEach(function(d) {
        d.Bezirk = +d.Bezirk;
        d.SHP_Area = +d.SHP_Area;
        d.Geb_anz_ges = +d.Geb_anz_ges;
        d.Geb_anz_fw = +d.Geb_anz_fw;
        d.x = +d.x;
        d.y = +d.y;        
      })
      
      console.log(data);
      
      
      /* ---------- Scales erstellen ---------- */
      var xScale = d3.scaleLinear()
      								.domain([d3.min(data, function(d) {return d.x;}), d3.max(data, function(d) {return d.x;})])
      								.range([padding, width-padding]);
      
      var yScale = d3.scaleLinear()
      								.domain([d3.min(data, function(d) {return d.y;}), d3.max(data, function(d) {return d.y;})])
      								.range([height-padding, padding]);
      
      var rScale = d3.scaleLinear()
      								.domain([0, d3.max(data, function(d) {return d.Geb_anz_ges})])
      								.range([0, 30]);
      
      
      /* ---------- Kreise zeichnen ---------- */
      svg.selectAll("circle")
      		.data(data)
      		.enter()
      		.append("circle")
      		.attr("cx", function(d) {return xScale(d.x); })
      		.attr("cy", function(d) {return yScale(d.y); })
      		.attr("r", function(d) {return rScale(d.Geb_anz_ges); });
      
      /* ---------- Labels schreiben ---------- */
      svg.selectAll("text")
      		.data(data)
      		.enter()
      		.append("text")
      		.text(function(d) {return d.Bezirk_Nam; })
      		.style("text-anchor", "middle")
      		.attr("x", function(d) {return xScale(d.x); })
      		.attr("y", function(d) {return yScale(d.y) - rScale(d.Geb_anz_ges) - 5;})
      		.attr("font-family", "sans-serif")
      		.attr("font-size", "14px")
      		.attr("fill", "black");
      
      //console.log(yScale(5931348.556596945971251));
    })

</script>
</body>

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