Adam T. Bradley

Posts in tag “paperjs”

PaperJS Sparklines

Yet another PaperJS experiment. This one generates Sparklines. It simply looks for canvases matching a specific CSS selector (canvas.sparkler by default), and draws a chart based on JSON-formatted data in the data-data attribute. Here, I'm displaying some unemployment data from Quandl.

The code is on Gist.



ct.unemp <- Quandl("FRBC/UNEMP_ST_CT", trim_start="1978-01-01", trim_end="2013-12-01", collapse="monthly")
ct.2yunemp <- rev(ct.unemp$Value[1:24])

me.unemp <- Quandl("FRBC/UNEMP_ST_ME", trim_start="1978-01-01", trim_end="2013-12-01", collapse="monthly")
me.2yunemp <- rev(me.unemp$Value[1:24])

ma.unemp <- Quandl("FRBC/UNEMP_ST_MA", trim_start="1978-01-01", trim_end="2013-12-01", collapse="monthly")
ma.2yunemp <- rev(ma.unemp$Value[1:24])

nh.unemp <- Quandl("FRBC/UNEMP_ST_NH", trim_start="1978-01-01", trim_end="2013-12-01", collapse="monthly")
nh.2yunemp <- rev(nh.unemp$Value[1:24])

ri.unemp <- Quandl("FRBC/UNEMP_ST_RI", trim_start="1978-01-01", trim_end="2013-12-01", collapse="monthly")
ri.2yunemp <- rev(ri.unemp$Value[1:24])

vt.unemp <- Quandl("FRBC/UNEMP_ST_VT", trim_start="1978-01-01", trim_end="2013-12-01", collapse="monthly")
vt.2yunemp <- rev(vt.unemp$Value[1:24])
New England Unemployment by State, 2011-12-31 to 2013-11-30
State Min/max 2011-12-31 2013-11-30
Connecticut 7.5%/8.5% 8.3% 7.5%
Maine 6.4%/7.4% 7.4% 6.4%
Massachusetts 6.7%/7.2% 6.9% 7.1%
New Hampshire 5.2%/5.6% 5.4% 5.2%
Rhode Island 9.4%/10.9% 10.9% 9.4%
Vermont 4.2%/5.1% 5.1% 4.3%

Social Network Simulation with PaperJS

What it's doing: Each node has a belief that matches its hue, represented as an angle between 0 and 359 degrees. Every 25 frames (once a second or so), a node is chosen at random and given a choice whether to speak; if it does (this is represented by a fading circle expanding from the node). Every other node has a chance to hear the speaking node based on the distance between the speaker and the listener--the farther you are from the speaker, the less likely you are to hear.

Once a node does hear another node, it will only care about what it's hearing under one of two conditions:

  1. The hearer's beliefs (i.e. color) are similar to the speakers, in which case the hearer's beliefs will move slightly closer to the speaker's; or
  2. The hearer's beliefs are very different from the speakers, and its beliefs will move even further away from the speaker's.

In either case, there is a small chance the hearer will subscribe to the speaker, which adds a line between the two and means the hearer will always hear announcements from that speaker.

NB: This isn't designed--at least in this incarnation--to be a realistic simulation of anything. It's another experiment with PaperJS.

Word Hail

This is a minor experiment with Paper.js, made while I (re-)teach myself to animate color and movement. (Click through to view.)