D3 Example: zoom, pan, and axis rescale
This example is a mashup of the D3 Zoom-Pan example along with Ricardo Marimon's example of X-axis re-scaling by dragging.
- Drag on the canvas to translate/pan the graph.
- double-click on the canvas to zoom in
- shift-double-click on the canvas to zoom out
- Drag on one of the X or Y axis numeric labels to re-scale that axis
- click on a data point to select it
- drag a selected data point up or down to change it's Y value
- enter the delete or backspace key to delete a selected data point
- hold the ALT/Option key down and click an empty area of the graph to add a data point
Most of the UI should also work with the touch events generated by a tablet or SmartPhone.
source: gist.github.com/1182434
D3 References:
D3 Tutorials:
External D3 Tutorials
SVG Graphics