maisnamraju/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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


## index.html
<!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; }

    .chart-background {
    	opacity: 0;
    }

    div.tooltip{
      position: absolute;
      text-align: center;
      padding: 5px;
      font: 12px sans-serif;
      background-color: white;
      border: 1px #b7b7b7 solid;
      pointer-events: none;
      width: 100px;
    }

    .dot {
      fill: #7ff4a8;
      stroke: black;
      stroke-width: 0.75;
    }

    .active {
      fill: blue;
    }

    .dot1 {
      fill: #ffb4d9;
      stroke: black;
      stroke-width: 0.75;
    }

    .dot2 {
      fill: #90bcf9;
      stroke: black;
      stroke-width: 0.75;
    }

    .axis-label {
      font-size: 12px;
      font-weight: 700;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
    }

    .sub-title {
      font-weight: 700;
    }

    .grid-line {
      stroke: black;
      opacity: 0.2;
      stroke-dasharray: 1,2;
    }

    text {
      font-family: sans-serif;
      font-size: 12px;
    }

    .dot-label {
      font-weight: 700;
      text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }
  </style>
</head>

<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 r1Accessor = function(d, r) {
      return r(uniLookup[d.name].over);
    }

    var xScale = d3.scaleLinear(),
        y1Scale = d3.scaleLinear(),
        r1Scale = d3.scaleSqrt();

    var config1 = {
      top: 0,
      left: 0,
      width: 900,
      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 dataUrl1 = "https://raw.githubusercontent.com/tlfrd/pay-ratios/master/data/over140k.json";

    d3.queue()
      .defer(d3.json, dataUrl1)
      .await(load);

    // When all data has loaded draw the scatter plot(s)
    function load(error, data1, data2) {
      if (error) throw error;

      var over140 = data1.number_over_140k;
      over140.forEach(d => uniLookup[d.name] = d);

      // Filter out universities where number of women is not provided
      over140 = over140.filter(a => a.women != "-");

      xScale.domain([0, d3.max(over140, d => d.nonAcademicStaff)]);
      y1Scale.domain([0, d3.max(ratios1516, d => d.max / d.min)]);

      r1Scale.domain(d3.extent(over140, d => d.over))
        		.range([2, 20]);


     	scatterPlot(ratios1516, config1, xScale, y1Scale, r1Scale, xAccessor, y1Accessor, r1Accessor, formatThousands, formatRatio);

    }

    var legend = svg.append("g")
    	.attr("class", "legend")
    	.attr("transform", "translate(" + [-120, 0] + ")")

    legend.append("circle")
    	.attr("class", "dot")
    	.attr("r", 10);

    var flip = true;

    function pulse(time) {
      legend.select("circle")
      	.transition()
      	.duration(time)
      	.attr("r", d => flip ? 20 : 10)
      	.on("end", function() {
        	flip = !flip;
        	pulse(time);
      	})
    }

    pulse(3000);

    var legendLabel = legend.append("g")
    	.attr("transform", "translate(" + [0, -50] + ")")
    	.attr("text-anchor", "middle")

    legendLabel.append("text")
    	.text("No. of Staff")
    legendLabel.append("text")
    	.attr("y", 14)
    	.text("Earning Over 140k");

    // Draws a scatter plot
    function scatterPlot(data, cfg, x, y, r, xAcc, yAcc, rAcc, xFormat, yFormat) {

      var plot = svg.append("g")
      	.attr("class", "scatter-plot")
      	.attr("transform", "translate(" + [cfg.left, cfg.top] + ")");

      plot.append("rect")
      	.attr("class", "chart-background")
      	.attr("width", cfg.width)
      	.attr("height", cfg.height);

			x.range([0, cfg.width]);
      y.range([cfg.height, 0]);

      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));

      var dots = plot.append("g")
        .selectAll("circle")
        .data(data)
        .enter().append("circle")
          .attr("class", cfg.dotClassName)
      		.attr("id", (d, i) => d.id = "c" + i)
          .attr("cx", d => xAcc(d, x))
          .attr("cy", d => yAcc(d, y))
          .attr("r", d => rAcc(d, r))
      		.on("mouseover", function(d) {
            d3.selectAll("circle#" + d.id)
            	.raise()
            	.transition()
            	.style("stroke-width", 1.5);
            showLabel(d);
          })
      		.on("mousemove", moveLabel)
      		.on("mouseout", function(d) {
           	d3.selectAll("circle#" + d.id)
            	.lower()
            	.transition()
            	.style("stroke-width", 0.75);
            hideLabel();
          })

      var labels = plot.append("g")
      	.selectAll("text")
      	.data(data.filter(function(a) {
          return cfg.labelsToShow.includes(a.name);
        }))
      	.enter().append("text")
      		.attr("class", "dot-label")
          .attr("x", d => xAcc(d, x))
          .attr("y", d => yAcc(d, y))
      		.attr("text-anchor", "middle")
          .attr("dy", d => -(rAcc(d, r) + 10))
      		.text(d => d.name)
    }

    function showLabel(d) {
      var coords = [d3.event.clientX, d3.event.clientY];
      var top = coords[1] + 30,
          left = coords[0] - 50;

      div.transition()
        .duration(200)
        .style("opacity", 1);

      div.html("<b>" + d.name + "</b></br>" +
              "Students: " + uniLookup[d.name].students + "</br>" +
              "Staff: " + uniLookup[d.name].nonAcademicStaff)
      	.style("top", top + "px")
      	.style("left", left + "px");
    }

    function moveLabel() {
      var coords = [d3.event.clientX, d3.event.clientY];

      var top = coords[1] + 30,
          left = coords[0] - 50;

      div.style("top", top + "px")
      	.style("left", left + "px");
    }

    function hideLabel(d) {
    	div.transition()
        .duration(200)
        .style("opacity", 0);
    }


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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; }

	.chart-background {
	opacity: 0;
	}

	div.tooltip{
	position: absolute;
	text-align: center;
	padding: 5px;
	font: 12px sans-serif;
	background-color: white;
	border: 1px #b7b7b7 solid;
	pointer-events: none;
	width: 100px;
	}

	.dot {
	fill: #7ff4a8;
	stroke: black;
	stroke-width: 0.75;
	}

	.active {
	fill: blue;
	}

	.dot1 {
	fill: #ffb4d9;
	stroke: black;
	stroke-width: 0.75;
	}

	.dot2 {
	fill: #90bcf9;
	stroke: black;
	stroke-width: 0.75;
	}

	.axis-label {
	font-size: 12px;
	font-weight: 700;
	}

	.title {
	font-size: 16px;
	font-weight: 700;
	}

	.sub-title {
	font-weight: 700;
	}

	.grid-line {
	stroke: black;
	opacity: 0.2;
	stroke-dasharray: 1,2;
	}

	text {
	font-family: sans-serif;
	font-size: 12px;
	}

	.dot-label {
	font-weight: 700;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
	}
	</style>
	</head>

	<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 r1Accessor = function(d, r) {
	return r(uniLookup[d.name].over);
	}

	var xScale = d3.scaleLinear(),
	y1Scale = d3.scaleLinear(),
	r1Scale = d3.scaleSqrt();

	var config1 = {
	top: 0,
	left: 0,
	width: 900,
	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 dataUrl1 = "https://raw.githubusercontent.com/tlfrd/pay-ratios/master/data/over140k.json";

	d3.queue()
	.defer(d3.json, dataUrl1)
	.await(load);

	// When all data has loaded draw the scatter plot(s)
	function load(error, data1, data2) {
	if (error) throw error;

	var over140 = data1.number_over_140k;
	over140.forEach(d => uniLookup[d.name] = d);

	// Filter out universities where number of women is not provided
	over140 = over140.filter(a => a.women != "-");

	xScale.domain([0, d3.max(over140, d => d.nonAcademicStaff)]);
	y1Scale.domain([0, d3.max(ratios1516, d => d.max / d.min)]);

	r1Scale.domain(d3.extent(over140, d => d.over))
	.range([2, 20]);


	scatterPlot(ratios1516, config1, xScale, y1Scale, r1Scale, xAccessor, y1Accessor, r1Accessor, formatThousands, formatRatio);

	}

	var legend = svg.append("g")
	.attr("class", "legend")
	.attr("transform", "translate(" + [-120, 0] + ")")

	legend.append("circle")
	.attr("class", "dot")
	.attr("r", 10);

	var flip = true;

	function pulse(time) {
	legend.select("circle")
	.transition()
	.duration(time)
	.attr("r", d => flip ? 20 : 10)
	.on("end", function() {
	flip = !flip;
	pulse(time);
	})
	}

	pulse(3000);

	var legendLabel = legend.append("g")
	.attr("transform", "translate(" + [0, -50] + ")")
	.attr("text-anchor", "middle")

	legendLabel.append("text")
	.text("No. of Staff")
	legendLabel.append("text")
	.attr("y", 14)
	.text("Earning Over 140k");

	// Draws a scatter plot
	function scatterPlot(data, cfg, x, y, r, xAcc, yAcc, rAcc, xFormat, yFormat) {

	var plot = svg.append("g")
	.attr("class", "scatter-plot")
	.attr("transform", "translate(" + [cfg.left, cfg.top] + ")");

	plot.append("rect")
	.attr("class", "chart-background")
	.attr("width", cfg.width)
	.attr("height", cfg.height);

	x.range([0, cfg.width]);
	y.range([cfg.height, 0]);

	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));

	var dots = plot.append("g")
	.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("class", cfg.dotClassName)
	.attr("id", (d, i) => d.id = "c" + i)
	.attr("cx", d => xAcc(d, x))
	.attr("cy", d => yAcc(d, y))
	.attr("r", d => rAcc(d, r))
	.on("mouseover", function(d) {
	d3.selectAll("circle#" + d.id)
	.raise()
	.transition()
	.style("stroke-width", 1.5);
	showLabel(d);
	})
	.on("mousemove", moveLabel)
	.on("mouseout", function(d) {
	d3.selectAll("circle#" + d.id)
	.lower()
	.transition()
	.style("stroke-width", 0.75);
	hideLabel();
	})

	var labels = plot.append("g")
	.selectAll("text")
	.data(data.filter(function(a) {
	return cfg.labelsToShow.includes(a.name);
	}))
	.enter().append("text")
	.attr("class", "dot-label")
	.attr("x", d => xAcc(d, x))
	.attr("y", d => yAcc(d, y))
	.attr("text-anchor", "middle")
	.attr("dy", d => -(rAcc(d, r) + 10))
	.text(d => d.name)
	}

	function showLabel(d) {
	var coords = [d3.event.clientX, d3.event.clientY];
	var top = coords[1] + 30,
	left = coords[0] - 50;

	div.transition()
	.duration(200)
	.style("opacity", 1);

	div.html("<b>" + d.name + "</b></br>" +
	"Students: " + uniLookup[d.name].students + "</br>" +
	"Staff: " + uniLookup[d.name].nonAcademicStaff)
	.style("top", top + "px")
	.style("left", left + "px");
	}

	function moveLabel() {
	var coords = [d3.event.clientX, d3.event.clientY];

	var top = coords[1] + 30,
	left = coords[0] - 50;

	div.style("top", top + "px")
	.style("left", left + "px");
	}

	function hideLabel(d) {
	div.transition()
	.duration(200)
	.style("opacity", 0);
	}


	</script>
	</body>