Skip to content

Instantly share code, notes, and snippets.

@wboykinm
Created July 31, 2013 04:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/6119359 to your computer and use it in GitHub Desktop.
Save wboykinm/6119359 to your computer and use it in GitHub Desktop.
Mockup of a D3-based map interactive

##Apologies I'm sure someone's done something similar - I'm looking for examples of D3-based maps where the map symbology updates based on an unbounded user action. For example:

A user visits the Reindeer Unified Defense Youth (RUDY) homepage. Some simple country boundary TopoJSON loads into memory with one attribute: "# of reindeer":

They're prompted to distribute reindeer to countries where they might be welcome. The user thinks that Norway is a likely prospect, so she clicks repeatedly on the "+" button by Norway, and presently the country fill color changes to reflect the invasion of reindeer, while the surplus reindeer supply ticks down.

The Guts

My assumptions about the process are:

  • The "# of reindeer" attribute of the TopoJSON can be manipulated in-state by some jQuery
  • As the user clicks + or - the corresponding math changes the attribute value of the target feature
  • D3 has an onclick event that can fire to change a feature's color as it crosses some threshold of deer-inundation

Has anyone done this sort of thing? I'd love to pick it apart if so.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment