nitaku

A really, really simple example about the usage of GeoJSON and D3's geo path generators with purely geometrical (non-geographical) data.

It creates a GeoJSON polygon representing a square for each pair of coordinates in the input data, then it packs all polygons in a feature collection. In order to use the path generator, a custom projection is defined, representing the identity (I don't know if there is a better way to implement that). A feature's type property is then used to color the rendering.

nitaku

I drew this after reading an article (of which I lost the link) about how to design an automatic recommendation system. I believe that it could be of inspiration for other stuff as well...

nitaku

A test of the Indexed Database API. It simply records and displays when the user has already visited the page.

The code illustrates the creation of the schema, the definition of an auto-increment key, the use of a transaction to write to and read from the DB. Date formatting is done by using the Moment.js library.

If you want to delete the database from your browser, follow this guide (Chrome).

References: the W3C specification, an article on HTML5 rocks.

nitaku

Test sidenote¹ blah.

Footnotes

1. Bah. ↩

nitaku

An experimental interface that could be useful to teach children how to write. Each of the three sections correspond to a distinct phase of the writing process:

• Collecting ideas
• Defining an outline
• Write the actual text

nitaku

A simple d3.js example. Click to add circles to the SVG.

nitaku

An upgrade of this example: circles can now be dragged around, thanks to D3's drag behavior.

Click on the background to create a new circle, then drag it!

nitaku

A proof-of concept prototype of an interface for the browsing of vector layers.

Layers are represented as stacked transparent slides. Each slide can be in one of three different position: on the leftmost layer, on the central one, or on the rightmost one. Only the first two stacks actually display their content, while the third one is used as a place to hold hidden layers. Layers can be dragged from each stack to the adjacent ones.

This type of interaction, similar to the behavior of an [accordion widget](http://en.wikipedia.org/wiki/Accordion_(GUI), should let users compare layers by both superimposition and justaxposition in a (hopefully) natural way, reminiscent of physical transparent slides. It should also play well with touch-enabled devices.

One possible shortcoming could be the inability to rearrange the order of layers. It could also be solvable by implementing a drag-to-reorder behavior.

nitaku

An example of TopoJSON rendering for geometrical (non-geographical) features with integer coordinates.

The data files have been produced with OpenJUMP and saved in ESRI's Shapefile format, then converted with ogr2ogr into GeoJSON, then converted for a last time in TopoJSON with topojson, using some parameters that deal with integer coordinates:

ogr2ogr -f geoJSON data.json data.shp
topojson --cartesian --no-quantization -p a -p b -o data.topo.json data.json

The file is then loaded into D3.js, rendered with a custom projection that only performs a scale and a translation, and styled according to two example properties: a (categorical) and b (quantitative).

nitaku

An example of some random hexagons from an integer-coordinates hexagonal tiling, rendered with a custom projection that makes hexagons appear regular.

The technique is taken from this Mike Bostock's example, and it makes use of 3x2 hexagons like this one:

   -1 0 1   X
 2    *
 1  *   *
 0  * O *
-1 *