D3 Examples - fernwaerme

xxxxxxxxxx
 
<!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>
​
    