christophermanning

Created by Christopher Manning

Summary

Red dots on a map; it really makes you think. Uses Poisson-Disc Sampling and a point in polygon test to spread out dots on this map of the United States.

This We Put 700 Red Dots On A Map

christophermanning

Created by Christopher Manning

Summary

Line simplification of the CTA train routes. Different line interpolations and simplification levels create interesting designs.

I created this because I like line simplification, d3.js, the CTA train map, and abstract geometric shapes.

extract_gtfs.rb

christophermanning

Created by Christopher Manning

Summary

This creates a graph with the number of nodes you specify and random edges based on the probability selected. The number indicates how many edges are connected to that node. Red nodes are not connected to any other nodes.

Inspired by this tweet from @ChicagoCDO

Nodes are added to the graph along the path of an Archimedean spiral. This is more pleasing than adding nodes at random locations. This also prevents

christophermanning

Created by Christopher Manning

Summary

The wards in Chicago were recently remapped and I was mesmerized by the idea of creating an interaction that would animate the transition from the old to the new wards. I shortly found out that tweening polygons in a non-intersecting and interlocked fashion is a complicated topic. I've done a lot of reading about the math and research that has been done in this space and found a few interesting theories which I would like to implement in a future version. Currently, the morphing/tweening/interpolation is done with an array interpolator. Unfortunately, this technique causes the intermediate polygons to self-intersect and morph inefficiently. Ideally, I would overlay these polygons on a slippy map and there

christophermanning

Created by Christopher Manning

Summary

Kaprekar's constant is 6174. The Kaprekar Routine arranges four digits (zeros are appended to the number if it's less than 4 digits) in descending and ascending order, subtracts those two numbers, and repeats the process until the difference is 0 (degenrate case) or 6174 (Kaprekar's constant). The color is HSL with a scale of 0 to 300 in the

christophermanning

Created by Christopher Manning

Summary

This is a map of the Chicago Wards that demonstrates how to use the JSTS Topology Suite and D3.js to find and display intersections between polygons.

Wards shaded grey are scanned since their bounding boxes intersect with the search envelope and wards shaded blue intersect with the search

christophermanning

Created by Christopher Manning

Summary

Draws a force directed graph using svg:path and geo projections onto a sphere.

TODO

christophermanning

Created by Christopher Manning

christophermanning

Created by Christopher Manning

Summary

I created this to experiment with SVG rotate, chained transitions, and arc generated paths. I picked my company's logo since it has an interesting design and I had an idea of animating it.

My first attempt had me just using the d3.svg.arc() startAngle and endAngle to create the arcs, but that left the arcs with angled edges when they were rotated to line up. Instead, the arcs are full circles and white rectangles rotate around each arc to give the illusion

christophermanning

Forked from: https://gist.github.com/gtb104/3667340

Here's a d3 plugin that allows you to create a polygon selection. You instantiate it just like d3.svg.brush.

var brush = d3.svg.polybrush();

It has an extra public method that 'brush' does not, and that's 'isWithinExtent(x, y)'. You can use this method to test if a given point falls within the drawn extent.

if (brush.isWithinExtent(x, y)) {
 console.log("I'm inside!");