Bubble Chart

An example of a Bubble Chart.

In this set of examples the two charts are linked (hover over circles on one to reveal its position in the other).

This is part of a series of visualisations called My Visual Vocabulary which aims to recreate every visualisation in the FT's Visual Vocabulary from scratch using D3.

TODO:

Rewrite as a "reusable chart" e.g. like this, this, or this
Use voronoi polygons for labelling
Add bubble size legend - automatically gnerated from the radius scale

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>

<body>
  <script>
		var margin = {top: 120, right: 150, bottom: 125, left: 270};
    
    var width = 960 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var div = d3.select("body").append("div")
    	.attr("class", "tooltip")
    	.style("opacity", 0);
    
    var formatPercent = d3.format(".0%");
    
    var formatThousands = function(d) {
      return d == 0 ? "0" : d3.format(".2s")(d);   
    };
    
    var formatRatio = function(d) {
      return d == 0 ? "" : d + ":1";
    }
    
    var uniLookup = {};
    
    var xAccessor = function(d, x) { 
      return x(uniLookup[d.name].nonAcademicStaff);
    };
    
    var y1Accessor = function(d, y) {
      return y(d.max / d.min);
    };
    
    var y2Accessor = function(d, y) {
      return y(d.max);
    };
    
    var r1Accessor = function(d, r) {
      return r(uniLookup[d.name].over);
    }
    
    var xScale = d3.scaleLinear(),
        y1Scale = d3.scaleLinear(),
        r1Scale = d3.scaleSqrt();
    
    var y2Scale = d3.scaleLinear();
    
    var config1 = {
      top: 0,
      left: 0,
      width: 200,
      height: height,
      labelsToShow: ["Imperial", "UCL", "LSE", "LBS", "Brunel", "UEL"],
      dotClassName: "dot1",
      title: "Pay Ratios",
      subtitle: "(Highest to Lowest Paid)",
      xLabel: "No. of Non-academic Staff",
      tickSize: 0,
      domainOpacity: 0,
      xAxisOffset: 10,
      yAxisOffset: 10,
      xTicks: 5,
      yTicks: null
    }; 
    
    var config2 = {
      top: 0,
      left: width - 225,
      width: 200,
      height: height,
      labelsToShow: ["Imperial", "UCL", "LBS"],
      dotClassName: "dot2",
      title: "Highest Pay ",
      subtitle: "",
      xLabel: "No. of Non-academic Staff",
      tickSize: 0,
      domainOpacity: 0,
      xAxisOffset: 10,
      yAxisOffset: 10,
      xTicks: 5,
      yTicks: 3
    }; 
    
    var dataUrl1 = "https://raw.githubusercontent.com/tlfrd/pay-ratios/master/data/over140k.json";

var xAxis = d3.axisBottom(x.nice())
      	.ticks(cfg.xTicks)
      	.tickSize(cfg.tickSize)
      	.tickFormat(xFormat);

var xAxisGroup = plot.append("g")
      	.attr("transform", "translate(" + [0, cfg.height + cfg.xAxisOffset] + ")")
      	.call(xAxis);
      
     	xAxisGroup.select(".domain").style("opacity", cfg.domainOpacity);
      
      var xLabel = plot.append("g")
      	.append("text")
      	.attr("class", "axis-label")
      	.attr("text-anchor", "middle")
      	.attr("transform", "translate(" + [cfg.width / 2, cfg.height + 60] +")")
      	.text(cfg.xLabel);

var yAxis = d3.axisLeft(y.nice())
      	.ticks(cfg.yTicks)
      	.tickSize(cfg.tickSize)
      	.tickFormat(yFormat);

var yAxisGroup = plot.append("g")
      	.attr("transform", "translate(" + [-cfg.yAxisOffset, 0] + ")")
      	.call(yAxis);
      	
      yAxisGroup.select(".domain").style("opacity", cfg.domainOpacity);
      
      var title = plot.append("g")
      	.attr("transform", "translate(" + [cfg.width / 2, -50] + ") ")
      
      title.append("text")
      	.attr("class", "title")
      	.attr("text-anchor", "middle")
      	.text(cfg.title)
      
      title.append("text")
      	.attr("class", "sub-title")
      	.attr("y", 15)
      	.attr("text-anchor", "middle")
      	.text(cfg.subtitle)
      
      var gridLinesX = plot.append("g")
      	.selectAll("line")
      	.data(x.ticks(cfg.xTicks).slice(1, -1))
      	.enter().append("line")
      		.attr("class", "grid-line")
      		.attr("x1", d => x(d))
      		.attr("y1", d => 0)
      		.attr("x2", d => x(d))
      		.attr("y2", d => cfg.height);
      
      var gridLinesY = plot.append("g")
      	.selectAll("line")
      	.data(y.ticks(cfg.yTicks).slice(1, -1))
      	.enter().append("line")
      		.attr("class", "grid-line")
      		.attr("x1", d => 0)
      		.attr("y1", d => y(d))
      		.attr("x2", d => cfg.width)
      		.attr("y2", d => y(d));

</script>
</body>

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