Bill Morris wboykinm

	age	population
	<10	2704659
	10-20	4499890
	21-30	2159981
	31-40	3853788
	41-50	14106543
	51-60	8819342
	61-70	612463
	71-80	144320
	81-90	3730220

Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., the same measure a year ago). Layout inspired by Stephen Few. Implementation by Mike Bostock based on work by Clint Ivy, Jamie Love of N-Squared Software and Jason Davies. The "update" button randomizes the values slightly to demonstrate transitions.

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. This summary approach allows the viewer to easily recognize differences between distributions. Data from the Michelson–Morley experiment. Implementation contributed by Jason Davies. This example periodically randomizes the values to demonstrate transitions.

By customizing the display of D3’s brush component, you can make a single-handle slider. Or, by using custom resize handles, you can make a two-handled slider.

	{
	"version": 4,
	"sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/outdoors",
	"glyphs": "https://mapbox.s3.amazonaws.com/gl-glyphs-256/{fontstack}/{range}.pbf",
	"constants": {
	"@land": "rgb(244,239,225)",
	"@water": "#cdd",
	"@water_dark": "#185869",
	"@crop": "#eeeed4",
	"@grass": "#e6e6cc",

	L.tileLayer.fancyCanvas = function(url){
	var layer = L.tileLayer.canvas({async: true});
	layer.setUrl(url);

	var dataSource = function(x, y, z, done){
	var url = layer.getTileUrl({x: x, y: y, z: z});
	d3.xhr(url).responseType('arraybuffer').get(done);
	};
	layer.data = function(fn){
	dataSource = fn;

	L.tileLayer.fancyCanvas = function(url){
	var layer = L.tileLayer.canvas();
	layer.setUrl(url);

	var dataSource = function(x, y, z, done){
	var url = layer.getTileUrl({x: x, y: y, z: z});
	d3.json(url, done);
	};

	layer.data = function(fn){

	<!DOCTYPE html>
	<html>
	<head>
	<title>Foo</title>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
	<style type='text/css'>
	body {
	background:#1C1D26;
	color:#e2e3e3;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Foo</title>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
	<style type='text/css'>
	body {
	background:#000;
	color:#fff;