Skip to main content
100%

Gist d0d5610ab577351ae1b1

✓ Published0🌍 Public
Aandybak
Last edited Jul 27, 2014
Created on Jul 27, 2014

This example shows a navigation menu for a warehouse task interface, with links for Picking and Dispatch tasks that highlight the active task type. The HTML uses AngularJS directives such as `ng-repeat`, `ng-href`, and `ng-class` to render task links dynamically from a `rows.consignment.data.tasks` array, while filtering out transit tasks with `ng-if`. Font Awesome icons (`fa-check-square-o`, `fa-truck`) provide visual labels, and the `active` class is conditionally applied based on the current task type name. No other JavaScript libraries or rendering techniques are present beyond the AngularJS bindings.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist dbe8122ef6678bc81c0628ce7b6020f9

This example tracks a job-search progress checklist in a GitHub gist, visualizing task completion across categories like personal projects and applications. The code renders each checklist item as a node in a force-directed graph, using d3.forceSimulation to position items by category and status (checked or unchecked). A custom SVG rendering layer draws links between related tasks and colors nodes by completion state, while the layout derives directly from the gist’s markdown structure. The visualization shows how a simple to-do list can be reimagined as an interactive network, with hover tooltips revealing task titles and URLs from the source data.

FFrankieFabuloso
65% match
Loading thumbnail…

Gist 7facf6eee4cdc2d78b333fb54eafc2c9

This example demonstrates a dynamic task-management interface that updates in response to simulated HTTP polling data. The visualization shows a table of devices and their associated tasks, where each periodic response adds new tasks to existing devices or introduces entirely new device rows. Users can click on individual tasks to complete them, removing them from the display to free up space for future updates. The implementation uses plain JavaScript with a custom `getResponse` function to generate random device-task assignments, and the UI is built directly via the DOM API without external libraries, featuring a clean two-column layout for professional presentation.

WWill Carter
65% match
Loading thumbnail…

Gist 68cc98468a08d322f2da

This example transforms a GitHub Gist into a visual to-do list, rendering each unchecked task as a draggable node. The code uses the D3.js library’s force-directed graph layout (`d3.forceSimulation`) to arrange the items and apply interactive physics. Each task is represented by a circle, and the list’s markdown structure is parsed directly from the Gist’s raw content. The visualization allows repositioning of nodes while preserving the original task order, offering a playful, spatial interaction with a simple text-based checklist.

EEleonore9
62% match
Loading thumbnail…

sketch

This example presents a step-by-step navigation interface where clicking a link updates the active step label. The page uses jQuery to handle the click events and a custom router function with `setInterval` to detect hash changes and synchronize the highlighted list item. The rendering approach is a simple HTML ordered list with CSS styling for the active state, and the code relies on Google's AJAX API loader to load jQuery. No data visualization or animation is shown beyond the step highlighting.

DDylanFM
62% match
Loading thumbnail…

Gist 8537515

This example shows a booking management interface where users can search inventory items, view their availability segments over a date range, and add them to a current booking. The AngularJS app uses `$http` to fetch booking data from `/api/booking/` and stock item segments from `/api/stock_item/.../get_segments_for_period/`, displaying date ranges as day/month labels and enabling toggling of child tracked items. It also supports creating new bookings via POST to `/api/create-booking/` and saving changes through PUT requests.

Aandybak
61% match
Loading thumbnail…

Gist e4ad04560d14bf59d0642b48bf3e436b

This example visualizes a job-search and interview-preparation checklist as a network diagram. It shows the relationships between job applications, interview tasks, and study resources using a force-directed layout. The visualization uses D3.js’s `d3.forceSimulation` to position nodes and links, with each node representing a task or company and edges showing dependencies. The code renders custom SVG elements, and hover interactions highlight connected nodes. Data comes from a Markdown checklist, parsed and converted into graph form. The rendering approach emphasizes task progression, with completed items visually distinct, and uses transition tweens for smooth layout updates.

FFrankieFabuloso
61% match
Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K
61% match
Loading thumbnail…

Gist 8370783

This example shows a stock management interface where users can search for stock items and view their availability segments against a booking’s date range. An AngularJS controller watches the booking ID, fetches booking data via the `$resource` API, and computes a day-by-day range list. The `StockItems` factory uses `$http.get` to query the stock item search endpoint and then retrieves per-item segments for the current booking. The view displays these segments alongside the computed date labels, using AngularJS data binding to update the table dynamically.

Aandybak
60% match