Skip to content

Instantly share code, notes, and snippets.

View alexmacy's full-sized avatar

alexmacy

View GitHub Profile
@alexmacy
alexmacy / .block
Last active January 28, 2017 13:28
Brush Slider Test
license: mit
@alexmacy
alexmacy / README.md
Last active May 16, 2019 09:12
Past Presidents

This dashboard was made for testing a couple different visualizations. Mainly a sortable data table and a stacked single-line row charts. It displays data about U.S Presidents, their party affiliations, duration in office, etc.

Pie charts are very convenient, but are not ideal for accurately displaying data - not to mention have a steadily decreasing amount of fans, so I wanted something that would easliy display comparable percentages of a whole, while not requiring less space than is needed for a histogram.

That brought me to making a stacked row chart that falls somewhere in the middle of the two. To do this, I repurposed a bar chart, gave all the bars the same height, and adjusting their width and placement based upon their percentage of the whole. The top row chart resizes based on the time period selected, and the bars on both charts fade when either outside of the selected time period or if their party is not selected.

@alexmacy
alexmacy / README.md
Last active May 25, 2016 14:51
Overlapping Circles

The purpose of this was to create an homage to a print by RF Dahl while also becoming more familiar with D3.js and how it interacts with the DOM.

One of the sliders adjusts the size of the circles and the other adds or removes circles. The shuffle button randomly relocates all the circles. And you can move individual pairs of circles by either clicking and dragging, or by double clicking to make it move on it's own.

This was an opportunity to experiment with: - randomly generating paired SVG elements, placed in relation to each other's location, and to stay bound together when moved. - working with event listeners - slider and number inputs - having the visualization react to the inputs in real time

  • dragging circles to new locations, and having the paired circle follow
@alexmacy
alexmacy / .block
Last active May 17, 2019 01:29
Past Presidents - ES5
license: mit
@alexmacy
alexmacy / README.md
Last active May 17, 2019 01:29
OPD License Plate scans

I'm a big fan of locations and patterns, and particularly social patterns relating to location, movement, and usage trends. I'd been looking for a way to explore this when I heard about the Oakland Police Department having released all their license plate reader data.

I filtered this data to license plates that appeared in a minimum of 15 distinct locations, and then removed obvious errors (like 'CAUTION' and other street signs) as well as government vehicles like buses and police cars (these have numeric digits only, rather than the alpha-numeric). The result was 205 plates, with 6,623 unique scan events.

It's not really enough data to find trends, but it was a good exercise in learning mechanisms that can be used to find and rank common traits. For this, I compared the locations that each license plate had been scanned and calculated the similarity to the other license

@alexmacy
alexmacy / .block
Last active May 25, 2016 15:35
Choropleth w/ state highlighting
license: gpl-3.0
@alexmacy
alexmacy / .block
Last active January 7, 2019 15:30
Blocks Graph - w/thumbnails
license: gpl-3.0
height: 960
@alexmacy
alexmacy / .block
Last active August 5, 2016 05:57
Mergesort w/ color
license: gpl-3.0
@alexmacy
alexmacy / README.md
Last active June 14, 2016 06:58
Repeating sorting animation

This is an offshoot of a project where I was playing around with animating a merge sort. I started messing with transitions and timeouts and it kinda turned into its own thing.

A lot of this was built around mbostock's block: Mergesort I.

@alexmacy
alexmacy / README.md
Last active June 14, 2016 06:52
Mergesort animation

This is an interpretation of mbostock's block: Mergesort I.

I kept all the passes through the sort visible to be able to compare the steps of the sorting algorithm.