This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom. With the abitility to zoom and pan in the Focus view using d3.zoom behavior.
# Editor backup files | |
*.bak | |
*~ |
height: 540 |
A simple freehand drawing application, based on Bostock's Line Drawing gist.
Use your stylus, fingers or mouse to draw. The color of the line can be changed by interacting with the color palette, and the canvas can be cleared by clicking the trash in the upper-right corner of the UI.
The application uses two stacked SVG elements, one for the UI and one for the canvas. This is used to disable drawing when interacting with UI elements.
Unlike Bostock's example, this application maintains a DOM-independent object to store all the drawing's data (just look at the JavaScript console each time you complete a line).
Colors are from Colorbrewer's Dark2 palette.
license: gpl-3.0 | |
border: no |
height: 960 |
license: gpl-3.0 |
license: gpl-3.0 | |
height: 200 |
This plugin is a fork of d3-zoom that adds several features by separating scaling on x and y:
Scale independently along x-axis and y-axis
Constrain scale extent on zoom out to respect translate extent constraints
Apply "scale factor ratio" on user input. For instance, with a scale ratio of 0.5 on x-axis and 1 on y-axis, when user zoom with its mouse, the increase of scale factor on x-axis will only be half of the increase on y-axis.
license: gpl-3.0 |