Skip to content

Instantly share code, notes, and snippets.

View msbarry's full-sized avatar

Michael Barry msbarry

202 followers · 33 following
  • MetroWest Boston
View GitHub Profile
@msbarry
msbarry / index.html
Last active August 29, 2015 13:55
Using motion to aid in target detection
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.controls {
text-align: center;
}
.countdown {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@msbarry
msbarry / data.json
Last active August 29, 2015 13:56
Ordinal Visual Variables
[
[
null,
null,
null,
null,
null,
null,
null,
null,
@msbarry
msbarry / data.csv
Last active August 29, 2015 13:56
Probing 2-d data with row/column aggregations
MLS Location Price Bedrooms Bathrooms Size Price/SQ.Ft Status
132842 Arroyo Grande 795000.00 3 3 2371 335.30 Short Sale
134364 Paso Robles 399000.00 4 3 2818 141.59 Short Sale
135141 Paso Robles 545000.00 4 3 3032 179.75 Short Sale
135712 Morro Bay 909000.00 4 4 3540 256.78 Short Sale
136282 Santa Maria-Orcutt 109900.00 3 1 1249 87.99 Short Sale
136431 Oceano 324900.00 3 3 1800 180.50 Short Sale
137036 Santa Maria-Orcutt 192900.00 4 2 1603 120.34 Short Sale
137090 Santa Maria-Orcutt 215000.00 3 2 1450 148.28 Short Sale
137159 Morro Bay 999000.00 4 3 3360 297.32 Short Sale
@msbarry
msbarry / README.md
Last active August 29, 2015 13:56
Parallel Coordinates

This visualization uses parallel coordinates to display darkness (SRM), bitterness (IBU), alcohol content, and user rating of 281 beers. Each line represents a beer which intersects each axis corresponding to the value of that attribute of the beer. Additionally, the color of each beer is calculated from its SRM (darkness).

Several techniques discussed in chapter 7 of Interactive Data Visualization by Ward, Grinstein, and Keim are used to aid in exploration of the data:

  1. Curved lines to better convey continuity across axes.
  2. Interactive highlighting of records to see relationships that span all dimensions (hover over any line to highlight)
  3. Use of opacity to reveal clusters and deal with occlusion
  4. Interactive filtering of records to reveal clusters of relationships that span all dimensions (click and drag on any axis to filter)

Code adapted from a previous project of mine github.com/msbarry/d3-beers.

@msbarry
msbarry / README.md
Last active August 29, 2015 13:57
Hubway Sankey

This visualization uses a Sankey Diagram to visualize paths of Hubway bicycle rides from several stops in Cambridge to several stops in Boston. Each bicycle rental station is represented by a rectangle and the path between rectangles is proportional to the number of trips taken from the rectangle on the left to the rectangle on the right. Colors of paths match the destination station.

Sankey diagrams are typically used to visualize flow rates through a network of nodes and links. This implementation of a sankey layout uses the D3 Sankey Plugin which works as follows:

  1. Specify list of nodes with names and links with a source node, destination node, and value
  2. Compute the value of each node as the sum of incoming link values or outgoing link values, whichever is greater
  3. Assign nodes to columns by iteratively moving nodes to the left of nodes that they link to (so the "flow" is from left to right)
  4. Compute the heig
@msbarry
msbarry / README.md
Last active August 29, 2015 13:57
World Health Statistics

This visualization uses sortable columns as an interaction technique to explore a dataset as described in chapter 10 of Interactive Data Visualization by Ward, Grinstein, and Keim. This falls under the category of "reconfiguring operators" described on page 319.

Hovering over a column re-sorts the data by that column which may make related patterns appear in other columns.

Data courtesy of the World Health Organization

@msbarry
msbarry / README.md
Last active August 29, 2015 13:58
Absolute vs. Relative Comparisons

This visualization demonstrates different techniques for facilitating relative vs. absolute comparisons as described in section 12.2.5 of Interactive Data Visualization by Ward, Grinstein, and Keim. For each variation, this graphic shows 10 bars representing values of 10 through 19. The top variation is the worst, requiring the user to make absolute comparisons between the bars - which humans are very bad at. The techniques below that demonstrate different ways to facilitate relative comparisons instead:

  1. Bounding Boxes: Bounding boxes give a consistent frame of reference to facilitate relative comparisons
  2. Grid/Tick Marks: Grid or tick marks give intermediate points of reference
  3. Residuals: By subtracting the average value from each bar, only the relative differences remain
  4. Reorientation: By simply re-orienting the bars to be stacked vertically instead of horizontally, relative comparisons become much easier
@msbarry
msbarry / data.csv
Last active August 29, 2015 14:05
Distribution of last letter in newborn boys' names
year letter percent
1880 n 15.32
1880 m 10.19
1880 s 16.7
1880 e 12.21
1880 k 4.27
1880 h 3.66
1880 y 7.58
1880 t 6.29
1880 d 8.31
@msbarry
msbarry / MMN.js
Last active December 18, 2015 20:29
MMN vs. NxMM1
// MMN simulation (load balancer)
var mmNServers = d3.range(numServers).map(function () { return null; });
var mmNQueue = [];
var mmNGroup = svg.append("g");
function styleMMNPacket(packet) {
packet
.attr("cx", function (d, i) { return serverX - (i + 3) * 2 * (packetRadius + packetPadding); })
.attr("cy", mmNEnterY);
}
@msbarry
msbarry / woof.bash
Last active January 19, 2016 17:13
Send yourself notifications from the command line
# Some utilities for sending notifiations to yourself from the command line (mac only).
# Just add them to your ~/.bashrc and fill in these parameters.
# See them all in action: "ugh <long running command> && woof command succeeed || woof command failed"
TWITTER_HANDLE= # twitter handle
EMAIL_ADDRESS= # email address
CELL_EMAIL_ADDRESS= # email address for your cell phone (ie 1234567890@vtext.com)
TERMINAL_APP="com.apple.Terminal" # replace with iterm if you use that
THEME_SONG="~/waiting.mp3" # replace with a path to your theme song