r-suen

Drag and snap circles to a grid within a zoomable canvas. The zoomable canvas adds complexity in converting coordinate positions between the circles and mouse pointer. It also introduces new behavior to address with the zoom. Should the grid scale and position also transform with zoom?

In this implementation, the snap behavior repositions the circles to screen xy coordinates at dynamic grid unit sizes. The grid size is based on D3 ticks. This is visualized by the grid unit size continuously increasing or decreasing and then suddenly resetting with the canvas zoom behavior.

Drag and drop selected circles with the mouse.
Pan and zoom the canvas with the mouse.
Press spacebar to toggle the brush.

r-suen

Drag and snap circles to a grid within a zoomable canvas. The zoomable canvas adds complexity in converting coordinate positions between the circles and mouse pointer. It also introduces new behavior to address with the zoom. Should the grid scale and position also transform with zoom?

In this implementation, the snap behavior repositions the circles to screen xy coordinates at the scaled grid unit size. This is visualized by the grid translating and scaling by the canvas zoom behavior.

Drag and drop selected circles with the mouse.
Pan and zoom the canvas with the mouse.
Press spacebar to toggle the brush.

r-suen

Drag and snap circles to a grid within a zoomable canvas. The zoomable canvas adds complexity in converting coordinate positions between the circles and mouse pointer. It also introduces new behavior to address with the zoom. Should the grid scale and position also transform with zoom?

In this implementation, the snap behavior repositions the circles to screen xy coordinates at relative intervals of 20; a grid unit size. This is visualized by the grid translating and not scaling by the canvas zoom behavior.

Drag and drop selected circles with the mouse.
Pan and zoom the canvas with the mouse.
Press spacebar to toggle the brush.

r-suen

Drag and snap circles to a grid within a zoomable canvas. The zoomable canvas adds complexity in converting coordinate positions between the circles and mouse pointer. It also introduces new behavior to address with the zoom. Should the grid scale and position also transform with zoom?

In this implementation, the snap behavior repositions the circles to screen xy coordinates at absolute intervals of 20; a grid unit size. This is visualized by the grid being unchanged by the canvas zoom behavior.

Drag and drop selected circles with the mouse.
Pan and zoom the canvas with the mouse.
Press spacebar to toggle the brush.

r-suen

Rendering Natural Earth populated places by longitude and latitude using D3 quadtree and data joins. A quadtree can significantly reduce the number of data point comparisons. Using longitude and latitude for the quadtree x- and y- coordinates allows for scanning after map projections and zoom behaviors. The mouse extent searches the quadtree for nearby points. The search extent needs to be adjusted from xy min max to longitude latitude min max coordinates. Scanned points are marked orange. Selected points are marked red.

Press spacebar to toggle all places.
Pan and zoom the map with the mouse.

r-suen

Rendering points using D3 quadtree and data joins. A quadtree can significantly reduce the number of data point comparisons. The brush extent searches the quadtree for nearby points. Scanned points are marked orange. Selected points are marked red.

Press spacebar to toggle all points.
Press c to toggle the quadtree cells.

r-suen

Exploring lines across the antimeridian using D3. Given two points on Earth, how to infer the appropriate way to connect them?

The red path is the great-circle distance, and the black path is a straight line connecting the two points. Drag the map left or right to see how the two paths are drawn differently across the antimeridian.

r-suen

World map wrap with constrained zoom using D3. The constraints prevent the map from moving off screen.

Drag left or right to see the wrap effect. Drag up or down to see the constraint up to the ±85th latitudes. Zoom in and out to see the map constrained to the viewport bounds.

r-suen

Dynamic map using D3 and TopoJSON with data from Natural Earth. The goal is to implement a performant nonintrusive background map at 1:50 million scale.

Natural Earth data is processed from the command-line to convert shape file to GeoJSON to TopoJSON. The data is reduced, quantized, and projected to Mercator to reduce file size and remove client side projection calculation.

The map is rendered using dynamic simplification and viewport clipping. The zoom level is based on a map tile of 256 x 256 pixels. Map panning is constrained to the y-axis.

r-suen

Clustering points using D3 and supercluster. Red circles are clusters with point counts. Green circles are individual points. Zoom in and out to see the clustering effect.