Basic sorting functionality

100%

Basic sorting functionality

✓ Published0🌍 Public

Last edited Oct 31, 2019

Created on Oct 31, 2019

This example demonstrates a basic sorting interaction for a list of add-on products, showing how users can drag items into a new order and persist that arrangement. The interface relies on the TypeScript component `sortableOption()` in `ui.ts`, which iterates through the displayed add-ons, reassigns a sequential `order` value to each, and submits the updated list to a product service via an HTTP subscription. On the server side, the C# handler `UpdateAddOnOrder` receives a list of `UpdateSortOrderRequest` objects, fetches the corresponding add-on records by ID, updates each record’s `SortOrder` property, and saves the changes through a gateway. The rendering approach appears to be a standard Angular-based reactive UI with a user action logger for audit trails.

AI-generated description

Similar vizzes

Loading thumbnail…

Order

This example demonstrates how a user can reorder a list of five items (A–E) through clicks. The initial list is rendered as an HTML `<ul>` using D3’s `d3.select` and `selectAll` chains, with each item bound to the first row of a hardcoded 5×5 string array. Clicking an item triggers the `reorder` function, which calls `.data()` on the existing `li` nodes with that click’s corresponding row, then applies D3’s `.order()` to smoothly animate the reordered elements.

Mmbostock

60% match

Loading thumbnail…

sortable table

This interactive table displays product data with sortable columns for name, price, and stock. Built with React, it uses custom hooks containing `useState` and `useMemo` to manage and calculate sorting logic, toggling between ascending and descending order on click. The header buttons trigger the sort and display directional indicators defined in CSS. D3 is included in the page for potential data manipulation, though the core functionality relies on React state and event handling.

XXiaoyu Su

60% match

Loading thumbnail…

Shopping App Prototype

This example animates a shopping list as items are progressively added to a cart, showing a bar chart where each bar represents an item and its length corresponds to its price. The data, loaded from a local JSON file, updates every second, causing new rows to slide in and existing bars to resize smoothly via D3’s data join and enter/update/exit pattern with `d3.scaleLinear` and `d3.scaleBand`. Text labels for item names and prices are rendered in SVG with both a stroked background and foreground layer for readability.

CCurran Kelleher

55% match

Loading thumbnail…

Shopping App Prototype

This visualization animates a growing shopping list, showing each item’s name and price as a horizontal bar chart that updates in real time. The bars are sorted by price in descending order, with item labels overlaid on each bar. The code uses D3 v4 with an SVG renderer and `.transition()` to animate the vertical positions of bars as items are added every second. Data comes from a local JSON file containing sequential snapshots of the list, and scales are created with `d3.scaleLinear` and `d3.scaleBand`.

CCurran Kelleher

55% match

Loading thumbnail…

Shopping App Prototype

The visualization animates a growing shopping list, with each item added as a horizontal steelblue bar whose length encodes price, paired with a text label. It plays through successive arrays from the `data.json` file, revealing new products and re-sorting bars in descending order of price with a smooth resizing animation. Built with D3 v4, it uses `scaleBand` for vertical positioning, a linear `scaleLinear` for bar widths, and applies transitions to new, updated, and exiting SVG elements, including bars and text groups, to choreograph state changes.

CCurran Kelleher

54% match

Loading thumbnail…

Shopping App Prototype

This example demonstrates a simple shopping list interface where items and their prices appear, update, and disappear over time using animated data joins. The prototype renders text elements in an SVG canvas, with each item positioned vertically and displaying its name and price. D3 v4’s data join pattern (`selectAll`, `enter`, `exit`, `merge`) handles the dynamic updates, while timed `setTimeout` calls trigger sequential changes to the dataset. The code uses `d3.select` to target the SVG and `text` elements, with styles applied directly via `.style()` and attributes set through `.attr()`.

CCurran Kelleher

54% match

Loading thumbnail…

Fork of Hour 5

This example demonstrates client-side data processing with D3.js, displaying a hardcoded array of key-value pairs in the browser console. It shows how D3’s `ascending()` comparator is used within the `sort()` method to order entries alphabetically by their `key` field, producing a reordered sequence (A, B, C) from the initial unsorted list. The visualization itself is minimal, consisting of a large “Hello HTML!” message styled via CSS, while the actual algorithmic behavior is observable only through the console output. The code relies on the D3 library (v7.8.5) and standard JavaScript array methods, with no rendering to the canvas or SVG.

Nnreinig3@gatech.edu

53% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to explore array sorting. It renders a single styled message, while the script defines an array of numeric values and sorts it using a custom comparator function that specifies ordering logic based on direct comparisons. The code does not display the sorted result on the page, instead logging the output to the browser console. It relies on plain JavaScript and inline CSS, with no external libraries or frameworks.

Zzhansihua

53% match