emilyinamillion

license: gpl-3.0

emilyinamillion

forked from treboresque's block: Circles Chartlet

emilyinamillion

height: 500
border: yes

emilyinamillion

license: gpl-3.0

emilyinamillion

This is a relativly straight forward graph with two lines. Each line and it's corresponding Y axis can be toggled on and off by clicking on the text labels at the bottom of the graph.

This example is based on the explanation given by 'mdml' in response to a Stack Overflow question on showing and hiding links and nodes.

It is used as an example of showing and hiding an element in d3.js using a separate element and described in the book D3 Tips and Tricks which can be downloaded for free from Leanpub.

forked from d3noob's block: Show / hide elements on mouse click with d3.js

emilyinamillion

license: gpl-3.0

emilyinamillion

license: gpl-3.0
height: 960
border: no

emilyinamillion

license: gpl-3.0

emilyinamillion

license: gpl-3.0

emilyinamillion

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