Miles McCrocklin milroc

This is an implentation of the Bubble Cursor, which was originally introduced by Tovi Grossman and Ravin Balakrishnan at CHI 2005.

Source: American Community Survey, 2011 5-Year Estimate

This map was inspired by a similar map found on Wikipedia. I wasn’t wild about the diverging color scale, so I thought it would be a fun challenge to recreate.

Finding the shapefiles was easy; I used the U.S. National Atlas 1:1,000,000 scale dataset, conveniently packaged in my U.S. Atlas repository. I reprojected the shapefiles to the California Albers projection using ogr2ogr:

ogr2ogr \
	-f 'ESRI Shapefile' \
	-t_srs 'EPSG:3310' \

A minimum spanning tree of the canvas is generated using randomized depth-first traversal. Hue encodes Manhattan distance from the start. (This is not an optimal visual encoding, but it suffices and is pretty.)

Randomized depth-first traversal can also be used to generate mazes. See a maze generated with randomized depth-first traversal flooded with color, and compare color floods of spanning trees generated by Prim’s algorithm, Wilson’s algorithm and random traversal.

This is a fork of Interrupting Chained Transitions. It is showing the power of d3.dispatch for building reusable components.

d3.legend

d3.legend is a quick hack to add a legend to a d3 chart. Simply add a g and .call(d3.legend). Any elements that have a title set in the "data-legend" attribute will be included when d3.legend is called. Each title will appear only once (even when multiple items define the same data-legend) as the process uses a set based on a existing names, not an array of all items.

Color

By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items. Color can be explicitly defined by attribute "data-legend-color"

Order

The order of items in the legend will be sorted using the top of the bounding box for each included item. The order can be explicitly defined by attribute "data-legend-pos"

Click on any arc to zoom in. Click on the center circle to zoom out.

A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

This bar chart visualizes hierarchical data using D3. Each blue bar represents a folder, whose length encodes the total size of all files in that folder (and all subfolders). Clicking on a bar dives into that folder, while clicking on the background bubbles back up to the parent folder. The effect is similar to a zoomable partition layout, though in a more conventional display.

This variation of a line chart demonstrates how to use a linear gradient to change the color of a line based on a y-threshold. This technique is similar to the gradient encoding, but with two stops at the same offset. An alternative method is to draw multiple lines with different colors and different clipping regions.

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	rect {
	stroke: #fff;
	}

	</style>
	<body>