nitaku

An example that superimposes CartoDB labels over an ESRI's satellite layer with Leaflet.js.

nitaku

A treemap algorithm is used to area-encode an array of random values, while an isometric projection is used to length-encode a second random value. Occlusion is extremely limited by the ordering of the treemap algorithm, making the diagram fairly readable (compare with a bar chart example that does not exhibit this property). This is possible because parallelepipedons are drawn by following the same ordering used by the treemap (to be honest, we tried and succedeed in using this method, but we are not aware of the internals of the treemap ordering algorithm that makes this possible).

An interaction tecnique is also put into place to let users focus on specific parallelepipedons by making the other ones translucent. This can be used to better evaluate their height. Because there are no fully occluded parallelepipedons, there is always a way to select a specific one.

Implementation note: we formerly used z as the name for the z axis, but this conflicted with

nitaku

Test sidenote¹ blah.

Footnotes

1. Bah. ↩

nitaku

And now for something completely different: a Windows desktop application! Open this gist for the code.

This example uses a python wrapper around Wacom's Wintab/Feel driver to read a Wacom stylus input, and draws a representation of it onto a Tkinter canvas. Each circle represents a point, and its radius is proportional to the pressure of the stylus.

To run the application, you will need: a (Wacom?) tablet or a tablet PC, Microsoft Windows (I tried it with 8.1), Python 3.3, cgkit 2, the code from this repo. To actually run it, open a command prompt where you put the python files, then execute:

python test.py

nitaku

Another sky chart. This time, the HYG (Hipparcos-Yale-Gliese) database is used.

Stars with magnitude greater than 7 have been omitted, for performance reasons.

nitaku

Various links and papers are useful for reference about space filling curves and L-systems.

The white page from which I took most of the SFC L-systems configurations.

This book chapter on plant structure presents various L-systems that draw space-filling curves (for example, the quadratic Gosper and the Peano curve). See also the full book index. This essay shows a stable Hilbert curve, and provides an L-system representation for it (unfortunately, not compatible with our implementation). This essay shows many variants of Hilbert curves that go from a specified point to another (without L-systems).

[A page about SFC](http://www.nahee.com/spanky/www/fractint/lsys/spacefilling.htm

nitaku

Same as the previous example, the bounding box of an SVG text element is used to highlight it with a yellow rectangle.

This time, the functionality is implemented with SVG transforms. The text is translated to its position, getBBox() is used in combination with getCTM() to obtain the original bounding box and the transformation matrix respectively. Then, the rect is created as before, but in addition the read transformation matrix is applied to it (see this StackOverflow post for more info).

(By reading the provided link on getBBox() pointing to the W3C spec, I got the impression that getBBox() should have returned the bounding box after the transform. I don't know if I am getting it wrong, but at least on Chrome 32 getCTM() is needed to make it work.)

nitaku

Not a real Dorling diagram, I know, but similar. Each bubble tries to stay centered in its country's centroid, like in this example, but also avoid collisions with other bubbles. Similar to the previous example, but providing more geographical information.

nitaku

This experiment tries to define and show the concepts of intersection and difference between two word clouds.

Two distinct documents A and B (the first about infovis and datavis, and the other about Human-Computer Interaction) are each used to compute word frequencies. Each word in common between the two documents is then used to create the intersection set, in which each word is assigned the minimum value among its original weights (something reminiscent of a fuzzy intersection operation). The remaining words are used to create the difference sets. For each word in common, the set which had the greatest weight also retains that word with a weight subtracted of the intersection weight mentioned above. In pseudocode:

for each word in common between A and B
  let a_w be the weight of the word in A
  let b_w be the weight of the word in B
  put the word into the intersection set with weight = min(a_w, b_w)
  if a_w - min(a_w, b_w) > 0

put the word into the A \ B set with weigh

nitaku

window.AppView = class AppView extends View
  constructor: (conf) ->
    super(conf)
    
    new Editor
      parent: this