In response to a Stack Overflow question, How to convert to D3's JSON format?.
This variation of a simple bar chart adds sorting with staggered delay and translucency to improve readability during the transition. This technique is recommended by Heer & Robertson. Use the checkbox in the top right to turn sorting on or off.
Quick example demonstrating how to sort a bar chart and animate the reordering. The staggered delay makes it easier to follow individual bars, per Heer & Robertson. Built with d3.js.
| <!DOCTYPE html> | |
| <html manifest="cache.manifest"> | |
| <head> <title>d3 example</title> </head> | |
| <body> | |
| <div id='d3TutoGraphContainer'></div> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> |
This variation of a simple bar chart adds sorting with staggered delay and translucency to improve readability during the transition. This technique is recommended by Heer & Robertson. Use the checkbox in the top right to turn sorting on or off.
This variation of a simple bar chart adds sorting with staggered delay and translucency to improve readability during the transition. This technique is recommended by Heer & Robertson. Use the checkbox in the top right to turn sorting on or off.
Like a box plot, a quartile plot summarises a distribution with five statistics: the median (the dot); the upper quartile and the maximum value (either end of the upper centre line); and the lower quartile and the minimum value (either end of the lower centre line). However, a quartile plot reduces a box plot's glyphs to one dot and two lines, so it has a larger data-ink ratio.
For more information about quartile plots, see:
- Tufte, E.R., 2001. The Visual Display of Quantitative Information. 2nd ed. Cheshire, CT, USA: Graphics Press.
Refractive indices of samples of six types of glass, gathered for criminological investigation (source).
| {"error":0,"samples":42,"value":[0],"label":"LVEF<=37.8","type":"split","children":[{"error":"0.","samples":19,"value":[0],"label":"periph_gluc <= 91","type":"split","children":[{"error":0,"samples":12,"value":[0],"label":"Leaf - 1","type":"leaf"},{"error":0,"samples":7,"value":[1],"label":"Leaf - 2","type":"leaf"}]},{"error":"0","samples":23,"value":[0],"label":"periph_gluc <= 102","type":"split","children":[{"error":0,"samples":14,"value":[1],"label":"Leaf - 1","type":"leaf"},{"error":0,"samples":9,"value":[2],"label":"Leaf - 2","type":"leaf"}]}]} |