Example showing how to switch between an open and closed hand cursor during mouse up and down events.
Modified from http://jsfiddle.net/uZ377/21/ for use with d3.
body { | |
font: 12px Arial; | |
} | |
path { | |
stroke: steelblue; | |
stroke-width: 2; | |
fill: none; | |
} | |
.axis path, .axis line { | |
fill: none; |
Example showing how to switch between an open and closed hand cursor during mouse up and down events.
Modified from http://jsfiddle.net/uZ377/21/ for use with d3.
Click on bar chart or legend to change which group moves to the y=0 baseline.
This version lets you set the chart's container div, for sizing.
D3 version of Alan Dix's dancing histograms at http://www.meandeviation.com/dancing-histograms/
The problem
A stacked histogram allows three judgements: (i) the trends on the total height of the columns, (ii) the proportion of each category within each column and (iii) the trends in the lowest category. The trends, or even inter-column comparisons for any other category is very difficult as the blocks are at different heights.
To see the chart in action, open it in a new window. When you resize the new window, the chart will update to reflect its new size.
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
.axis line, .axis path { | |
shape-rendering: crispEdges; | |
stroke: black; | |
fill: none; | |
} | |
</style> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
</head> | |
<body> | |
<div id="viz" style="position:absolute;width:100%;height:100%"></div> | |
<script type="text/javascript"> | |
var div = d3.select("#viz"); | |
var divWidth = parseInt(div.style("width")); |
Click on bar chart or legend to change which group moves to the y=0 baseline.
D3 version of Alan Dix's dancing histograms at http://www.meandeviation.com/dancing-histograms/
The problem
A stacked histogram allows three judgements: (i) the trends on the total height of the columns, (ii) the proportion of each category within each column and (iii) the trends in the lowest category. The trends, or even inter-column comparisons for any other category is very difficult as the blocks are at different heights.
The interactive stacked histogram solves this problem by allowing different trends to be analysed using the same dynamic graph. It is an example of a general princple of adding interactivity to existing paper visualisations.
Click to add elements.
Hit any key to remove an element.
Appended elements appear in red.
Note: We begin with two <p>
tags and this data array: [0, 1, 2]. So the
first time through, the '2' element is not initially bound to a <p>
tag.
The first click will add a '3' element and append <p>
's for all the
unbound elements. In this case, two new `` tags will be added (for the '2'
Click to add elements.
Hit any key to remove an element.
Appended elements appear in red.
Note: We begin with two <p>
tags and this data array: [0, 1, 2]. So the
first time through, the '2' element is not initially bound to a <p>
tag.
The first click will add a '3' element and append <p>
's for all the
unbound elements. In this case, two new `` tags will be added (for the '2'