Box and Whisker

An implementation of a box-and-whisker plot in D3.js. From Mike Bostock's similar block:

A box-and-whisker plot uses simple glyphs that summarize a quantitative distribution with five standard statistics: the smallest value, lower quartile, median, upper quartile, and largest value.

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

.box, .line, .line-dotted {
			stroke: #000;
			stroke-width: 1.5px;
		}
		.box {
			fill: #fff;
		}
		.line-dotted {
			stroke-dasharray: 3,3;
		}

.text {
			font-size: .8em;
		}
		.text.three, .text.one {
			text-anchor: end;
		}

.label {
			text-anchor: middle;
		}
		</style>
	</head>
	<body>
		<div id="viz"></div>

var setup = d3.marcon().top(30).bottom(10).left(10).right(10).width(window.innerWidth).height(window.innerHeight);
			setup.render();
			var width = setup.innerWidth(),
				height = setup.innerHeight(),
				svg = setup.svg();

var x = d3.scaleBand().rangeRound([0, width]).padding(0.8).domain(letters);
			var y = d3.scaleLinear().range([height, 0]);

var dy = 6;

function generate_data(){
				
				return letters.map(function(d){

return {
						id: d,
						max: jz.num.randBetween(900, 1000),
						min: jz.num.randBetween(0, 100),
						three: jz.num.randBetween(650, 850),
						median: jz.num.randBetween(400, 600),
						one: jz.num.randBetween(150, 350)			
					}

});

}

draw(generate_data());

d3.interval(function(){
				draw(generate_data());
			}, 2000);

function draw(data){

// update the y domain
				y.domain([d3.min(data, function(d){ return d.min; }), d3.max(data, function(d){ return d.max; })]);

// JOIN
				var box = svg.selectAll(".box")
					.data(data, function(d, i){ return d.id; });

var line_dotted_top = svg.selectAll(".line-dotted.top")
					.data(data, function(d, i){ return d.id; });

var line_dotted_bottom = svg.selectAll(".line-dotted.bottom")
					.data(data, function(d){ return d.id; });

var line_top = svg.selectAll(".line.top")
					.data(data, function(d){ return d.id; });

var line_bottom = svg.selectAll(".line.bottom")
					.data(data, function(d){ return d.id; });

var line_med = svg.selectAll(".line.med")
					.data(data, function(d){ return d.id; });

var text_top = svg.selectAll(".text.top")
					.data(data, function(d){ return d.id; });

var text_75 = svg.selectAll(".text.three")
					.data(data, function(d){ return d.id; });

var text_med = svg.selectAll(".text.med")
					.data(data, function(d){ return d.id; });

var text_25 = svg.selectAll(".text.one")
					.data(data, function(d){ return d.id; });

var text_bottom = svg.selectAll(".text.bottom")
					.data(data, function(d){ return d.id; });

var label = svg.selectAll(".label")
					.data(data, function(d){ return d.id; })

// UPDATE
				box
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y", function(d){ return y(d.three); })
						.attr("height", function(d){ return y(d.one) - y(d.three); });

line_dotted_top
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y1", function(d){ return y(d.three); })
						.attr("y2", function(d){ return y(d.max); });

line_dotted_bottom
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y1", function(d){ return y(d.one); })
						.attr("y2", function(d){ return y(d.min); });

line_top
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y1", function(d){ return y(d.max); })
						.attr("y2", function(d){ return y(d.max); });

line_med
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y1", function(d){ return y(d.median); })
						.attr("y2", function(d){ return y(d.median); });

line_bottom
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y1", function(d){ return y(d.min); })
						.attr("y2", function(d){ return y(d.min); });

text_top
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y", function(d){ return y(d.max); })
						.text(function(d){ return d.max; });

text_75
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y", function(d){ return y(d.three); })
						.text(function(d){ return d.three; });

text_med
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y", function(d){ return y(d.median); })
						.text(function(d){ return d.median; });

text_25
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y", function(d){ return y(d.one); })
						.text(function(d){ return d.one; });

text_bottom
					.transition().delay(function(d, i){ return i * 200; })
						.attr("y", function(d){ return y(d.min); })
						.text(function(d){ return d.min; });

// ENTER
				box.enter().append("rect")
						.attr("class", "box")
						.attr("x", function(d){ return x(d.id); })
						.attr("y", function(d){ return y(d.three); })
						.attr("width", x.bandwidth())
						.attr("height", function(d){ return y(d.one) - y(d.three); });

line_dotted_top.enter().append("line")
						.attr("class", "line-dotted top")
						.attr("x1", function(d){ return x(d.id) + x.bandwidth() / 2; })
						.attr("x2", function(d){ return x(d.id) + x.bandwidth() / 2; })
						.attr("y1", function(d){ return y(d.three); })
						.attr("y2", function(d){ return y(d.max); });

line_dotted_bottom.enter().append("line")
						.attr("class", "line-dotted bottom")
						.attr("x1", function(d){ return x(d.id) + x.bandwidth() / 2; })
						.attr("x2", function(d){ return x(d.id) + x.bandwidth() / 2; })
						.attr("y1", function(d){ return y(d.one); })
						.attr("y2", function(d){ return y(d.min); });

line_top.enter().append("line")
						.attr("class", "line top")
						.attr("x1", function(d){ return x(d.id); })
						.attr("x2", function(d){ return x(d.id) + x.bandwidth(); })
						.attr("y1", function(d){ return y(d.max); })
						.attr("y2", function(d){ return y(d.max); });

line_med.enter().append("line")
					.attr("class", "line med")
						.attr("x1", function(d){ return x(d.id); })
						.attr("x2", function(d){ return x(d.id) + x.bandwidth(); })
						.attr("y1", function(d){ return y(d.median); })
						.attr("y2", function(d){ return y(d.median); });

line_bottom.enter().append("line")
						.attr("class", "line bottom")
						.attr("x1", function(d){ return x(d.id); })
						.attr("x2", function(d){ return x(d.id) + x.bandwidth(); })
						.attr("y1", function(d){ return y(d.min); })
						.attr("y2", function(d){ return y(d.min); });

text_top.enter().append("text")
						.attr("class", "text top")
						.attr("x", function(d){ return x(d.id) + x.bandwidth() + dy; })
						.attr("y", function(d){ return y(d.max); })
						.attr("dy", dy)
						.text(function(d){ return d.max; });

text_75.enter().append("text")
						.attr("class", "text three")
						.attr("x", function(d){ return x(d.id) - dy; })
						.attr("y", function(d){ return y(d.three); })
						.attr("dy", dy)
						.text(function(d){ return d.three; });

text_med.enter().append("text")
						.attr("class", "text med")
						.attr("x", function(d){ return x(d.id) + x.bandwidth() + dy; })
						.attr("y", function(d){ return y(d.median); })
						.attr("dy", dy)
						.text(function(d){ return d.median; });

text_25.enter().append("text")
						.attr("class", "text one")
						.attr("x", function(d){ return x(d.id) - dy; })
						.attr("y", function(d){ return y(d.one); })
						.attr("dy", dy)
					.text(function(d){ return d.one; });

text_bottom.enter().append("text")
						.attr("class", "text bottom")
						.attr("x", function(d){ return x(d.id) + x.bandwidth() + dy; })
						.attr("y", function(d){ return y(d.min); })
						.attr("dy", dy)
						.text(function(d){ return d.min; });

label.enter().append("text")
					.attr("class", "label")
					.attr("x", function(d){ return x(d.id) + x.bandwidth() / 2; })
					.attr("y", -10)
					.text(function(d){ return d.id; })
			}

</script>
	</body>
</html>

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

https://unpkg.com/d3-marcon/build/d3-marcon.min.js

https://unpkg.com/jeezy/lib/jeezy.min.js