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

➜  ~  ruby habtm.rb
Active Record 4.1.1
-- create_table(:articles, {:force=>true})
   -> 0.3158s
-- create_table(:publisher_magazines, {:force=>true})
   -> 0.0005s
-- create_table(:articles_publisher_magazines, {:force=>true})
   -> 0.0005s
#<ActiveRecord::Associations::CollectionProxy [#<Article id: 1>]>

christophermanning

Created by Christopher Manning

Summary

This is an experiment using a random walk to draw shapes. Adjusting theta results in a very organic or procedural drawing. The random walk stays in the geometry by using a point in polygon test.

Controls

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

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

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

Draws a random walk onto a sphere using canvas and geo projections.

Controls

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!");

christophermanning

Created by Christopher Manning

References

• D3.js Force Layout
• Octocat Grid
• Canvas
• octodex

This is not affiliated with or endorsed by GitHub. The Octocat is a registered trademark of GitHub.

christophermanning

Created by Christopher Manning

Animation prototype.

References

• Nature of Code
• D3.js
• Processing.js
• simplex-noise.js