D3 Examples - Buble Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title> D3 Test </title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style>
      body {
        font-family: 'Open sans',verdana,arial,sans-serif;
        font-size: 10pt
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <script>
      var width = 834;
      var height = 370;
      var margin = 70;
      
      var labelX = 'In-Migration (000)';
      var labelY = 'Out-Migration (000)';
      
      var islands = {}
      d3.csv("migration.csv", 
        function(d) {
          islands[+d.island_code] = d.island;
          return {
            x: +d.inmigration/1000, 
            y: +d.outmigration/1000, 
            size: +d.poppulation, 
            label: d.prov_name,
            c: +d.island_code
          };
        }, 
        function(error, data) {
          var x = d3.scale.linear().domain([
                    d3.min(data, function (d) { return d.x; }), 
                    d3.max(data, function (d) { return d.x; })
                  ]).range([0, width]);
          var y = d3.scale.linear().domain([
                    d3.min(data, function (d) { return d.y; }), 
                    d3.max(data, function (d) { return d.y; })
                  ]).range([height, 0]);
​
          var svg = d3.select('body')
                      .append('svg')
                      .attr('class', 'chart')
                      .attr("width", width + margin + margin)
                      .attr("height", height + margin + margin)
                      .append("g")
                      .attr("transform", "translate(" + margin + "," + margin + ")");
​
          // X Axis
          var xAxis = d3.svg.axis().scale(x);
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
              .text(labelX)
              .attr("x", width + 20)
              .attr("y", margin - 40)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
​
          // Y Axis
          var yAxis = d3.svg.axis().scale(y).orient("left");
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
              .text(labelY)
              .attr("transform", "rotate(-90)")
              .attr("x", 20)
              .attr("y", -margin)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
​
          // Bubbles
          var scale = d3.scale.sqrt().domain([
                        d3.min(data, function (d) { return d.size; }), 
                        d3.max(data, function (d) { return d.size; })
                      ]).range([5, 100]);
          var color = d3.scale.category10();
​
          svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
              .attr("cx", function (d) { return x(d.x); })
              .attr("cy", function (d) { return y(d.y); })
              .attr("r", function (d) { return scale(d.size); })
              .attr("text", function (d) { return d.label })
              .style("fill", function (d) { return color(d.c); })
              .attr("opacity", 0.7)
​
          svg.selectAll("circle")
            .each(function(d, i) {
              circle = d3.select(this)
              svg.append("text")
                .text(circle.attr("text"))
                .attr("dx", +circle.attr("cx") - (+circle.attr("r")/2))
                .attr("dy", +circle.attr("cy") + 3);
            })
        }
      );
    </script>
  </body>
</html>
    