eweitnauer

...

eweitnauer

A series of related examples:

• Canvas geometric zooming
• Canvas semantic zooming
• SVG geometric zooming
• SVG semantic zooming

Using

d3.transition().duration(0).each('end', function() {

eweitnauer

A series of related examples:

• Canvas geometric zooming
• Canvas semantic zooming
• SVG geometric zooming
• SVG semantic zooming

Using newer version of d3 and measuring fps (disabled since inaccurate).

eweitnauer

A series of related examples:

• Canvas geometric zooming
• Canvas semantic zooming
• SVG geometric zooming
• SVG semantic zooming

Using newer version of d3 and measuring fps (disabled since inaccurate).

eweitnauer

A series of related examples:

• Canvas geometric zooming
• Canvas semantic zooming
• SVG geometric zooming
• SVG semantic zooming

Using newer version of d3 and measuring fps (disabled since inaccurate).

eweitnauer

Related examples:

• SVG geometric zooming
• SVG semantic zooming

eweitnauer

This example demonstrates how to take the size of objects into account when selecting objects efficiently with a quadtree. Selected objects are shown in red, visited but not selected objects are shown in yellow. The efficiency depends on the size of the objects. It is assumed that all objects are square-shaped and have the same size.

Example series:

• Quadtree 1
• Quadtree 2
• Quadtree 3

Based on Mike Bostock's quadtree example.

eweitnauer

This example demonstrates how to take the size of objects into account when selecting objects efficiently with a quadtree. Selected objects are shown in red, visited but not selected objects are shown in yellow. The efficiency depends on the size of the biggest object. It is assumed that the objects are square-shaped.

Example series:

• Quadtree 1
• Quadtree 2
• Quadtree 3

Based on Mike Bostock's quadtree example.

eweitnauer

Series of examples:

• direct immediate dragging
• indirect immediate dragging
• direct animated dragging
• indirect animated dragging

The examples explore different dragging implementations along two dimensions: First, direct vs. indirect where in the former case the dragged element is determined automatically by the DOM event, while in the latter case, the hit tests on the elements are done manually. This allows, e.g., for moving several elements at once, or moving elements that are not under the mouse when the user started dragging. The second dimension is immediate position update as new mouse positions come in as dragging events or positions updates using transitions. The latter may give the feeling of a slightly smoother interaction.

eweitnauer

Series of examples:

• direct immediate dragging
• indirect immediate dragging
• direct animated dragging
• indirect animated dragging

The examples explore different dragging implementations along two dimensions: First, direct vs. indirect where in the former case the dragged element is determined automatically by the DOM event, while in the latter case, the hit tests on the elements are done manually. This allows, e.g., for moving several elements at once, or moving elements that are not under the mouse when the user started dragging. The second dimension is immediate position update as new mouse positions come in as dragging events or positions updates using transitions. The latter may give the feeling of a slightly smoother interaction.