Skip to content

Latest commit

 

History

History
33 lines (18 loc) · 1.71 KB

README.md

File metadata and controls

33 lines (18 loc) · 1.71 KB

✿ field of flowers ✿

Welcome to a sortable garden! https://shelby.cool/field-of-flowers/

flowers

Flowers

These flowers are randomly generated and drawn on page load, using d3 to define SVG elements and position.

Sorting

Sorting is hierarchical based on selected attributes and sort direction. Attributes are compared in order until a difference between flowers is found. Use slider to rescale field.

Layouts

1. Linear

flowers sorted linearly

Flowers are arranged in order from left to right, wrapping to the next row as needed. This mode is useful when comparing stem size or number of leaves.

2. Hilbert curve

flowers sorted along a Hilbert curve

This uses a Hilbert curve (https://en.wikipedia.org/wiki/Hilbert_curve) to map items from a 1-dimensional array to 2-dimensional space, so that similar items are close in proximity. Conversely, sorting linearly by row could cause visual breaks in groups as they wrap from one line to the next. This mode is useful when sorting by color or flower size, grouping visually similar flowers together.

Optionally, toggle sort path:

flowers sorted along a Hilbert curve with visible path

Running locally

python3 -m http.server 5775