This is an example of how to use the d3 framework without Scalable Vector Graphics. The bubbles are CSS styled div elements.
Try it on bl.ocks.org
It is also an example of how to write your JavaScript using CoffeeScript. The following CoffeeScript was compiled into JavaScript, and results in the graphic above.
colors = new d3.scale.category10()
This is a game to test your knowledge of the US states and their location. The object of the game is to place each state in its correct location. When all states are in their correct position, the timer will stop and show your success.
Try it on bl.ocks.org.
##Game Play
Start button.Reset button to start over at any point in the game.
A force directed graph with 3 foci for the nodes to cluster around.
Try it on bl.ocks.org
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!");
A Twitter-like text input that alerts you to some sort of text limit.
A Pen by Geoffrey Bell on CodePen.
This is a PoC exercise showing that you can use D3/CSS to layout and style arrays of data to look like columns of data, similar to a spreadsheet. This would be useful if you had potentially long(vertical) lists of data that the user can modify.
You can add and delete values to each column of data.
Try it on bl.ocks.org
A fun little color changer for the background. Move your mouse around to change the color. Color based upon the HSL scale.
Try it on bl.ocks.org
This is a visualization that displays events on a timeline. The radius of the circles corresponds to the number of events that happened.
A Pen by Geoffrey Bell on CodePen.
| var G = { | |
| vertices: [{ | |
| edges: [1, 4] | |
| }, { | |
| edges: [0, 2, 3, 4] | |
| }, { | |
| edges: [1, 3] | |
| }, { | |
| edges: [1, 2, 4] | |
| }, { |