Barbell Chart

A scatter chart comparing two variables at each point along the x-axis. A connector line between the circles indicates that the two variables are related (e.g. male and female). As with other bubble charts, each circle can encode four data attributes: (1) horizontal position, (2) vertical position, (3) size, and (4) color.

forked from HarryStevens's block: Barbell Chart

<!DOCTYPE html>
<html>
	<head>
		<style>
		body {
			font-family: "Helvetica Neue", sans-serif;
		}

.dot {
			stroke-width: 1px;
			fill-opacity: .6;
		}
		.dot.a {
			stroke: steelblue;
			fill: steelblue;
		}
		.dot.b {
			stroke: tomato;
			fill: tomato;
		}
		.connect-line {
			stroke: #ccc;
			stroke-width: 1px;
		}
		</style>
	</head>
	<body>

// config
		var margin = {top: 40, bottom: 40, left: 40, right: 40},
			width = window.innerWidth - margin.left - margin.right,
			height = window.innerHeight - margin.top - margin.bottom,
			svg = d3.select("#viz").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 + ")"),
			x_scale = d3.scaleLinear()
				.range([0, width])
				.domain([0, 100]),
			y_scale = d3.scaleLinear()
				.range([height, 0])
				.domain([0, 1000]),
			size_scale = d3.scaleLinear()
				.range([1, 30])
				.domain([1, 30]),
			t = d3.transition()
				.duration(750),
			x_axis = d3.axisBottom()
				.scale(x_scale),
			y_axis = d3.axisLeft()
				.scale(y_scale);
			
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(x_axis);

svg.append("g")
			.attr("class", "y axis")
			.call(y_axis);

draw_chart(generate_binned_data());

d3.interval(function(){
			draw_chart(generate_binned_data());	
		}, 2000);

function draw_chart(data){

// JOIN
			var dot_a = svg.selectAll(".dot.a")
				.data(data, function(d){ return d.x; });

var dot_b = svg.selectAll(".dot.b")
				.data(data, function(d){ return d.x; });

var connect_line = svg.selectAll(".connect-line")
				.data(data, function(d){ return d.x });

// EXIT
			dot_a.exit()
				.transition(t)
					.style("r", 1e-6)
					.remove();

dot_b.exit()
				.transition(t)
						.style("r", 1e-6)
						.remove();

connect_line.exit()
				.transition(t)
						.style("opacity", 1e-6)
						.remove();

// UPDATE
			dot_a
				.transition(t)
					.attr("cx", function(d){ return x_scale(d.x); })
					.attr("cy", function(d){ return y_scale(d.y_a); })
					.attr("r", function(d){ return size_scale(d.size_a); });

dot_b
				.transition(t)
					.attr("cx", function(d){ return x_scale(d.x); })
					.attr("cy", function(d){ return y_scale(d.y_b); })
					.attr("r", function(d){ return size_scale(d.size_b); });

connect_line
				.transition(t)
					.attr("y1", function(d){ return y_scale(d.y_a) + (size_scale(d.size_a) * multiplier(d.y_a, d.y_b)); })
					.attr("y2", function(d){ return y_scale(d.y_b) - (size_scale(d.size_b) * multiplier(d.y_a, d.y_b)); })

// ENTER
			dot_a.enter().append("circle")
					.attr("class", "dot a")
					.attr("cx", function(d){ return x_scale(d.x); })
					.attr("cy", function(d){ return y_scale(d.y_a); })
					.attr("r", 1e-6)
				.transition(t)
					.attr("r", function(d){ return size_scale(d.size_a); });

dot_b.enter().append("circle")
					.attr("class", "dot b")
					.attr("cx", function(d){ return x_scale(d.x); })
					.attr("cy", function(d){ return y_scale(d.y_b); })
					.attr("r", 1e-6)
				.transition(t)
					.attr("r", function(d){ return size_scale(d.size_b); });

connect_line.enter().append("line")
					.attr("class", "connect-line")
					.attr("x1", function(d){ return x_scale(d.x); })
					.attr("y1", function(d){ return y_scale(d.y_a) + (size_scale(d.size_a) * multiplier(d.y_a, d.y_b)); })
					.attr("x2", function(d){ return x_scale(d.x); })
					.attr("y2", function(d){ return y_scale(d.y_b) - (size_scale(d.size_b) * multiplier(d.y_a, d.y_b)); })
		}

// a or b on top
		function multiplier(a, b){
			return a > b ? 1 : -1;
		}

// make some data
		function generate_binned_data(){

var bin_size = 5,
				arr = [];
				
			for (var i = bin_size; i <= 95; i += bin_size){
					
				arr.push({
					x: i,
					size_a: random(1, 30),
					size_b: random(1, 30), 
					y_a: random(1, 1000),
					y_b: random(1, 1000)
				});

}

return arr;

}

// random number function
		function random(min, max){
		  return Math.floor(Math.random() * (max - min + 1) + min);
		}

</script>

</body>
</html>

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