ember-data hasMany

Mirage 0.3 Dev Boilerplate

This example demonstrates a Mirage 0.3 development boilerplate for an Ember.js application, using Ember Data models and routes to display authors, books, and their associated tags. It shows how Mirage's factories, models, and serializers simulate polymorphic relationships, such as an author belonging to a taggable book. The application route queries a single author with `findRecord` and an `include: 'books.tags'` request to render related data. The code relies on Ember CLI Mirage 0.3.2, Ember Data 2.10, and JSON:API serializers to define and serve mock API data.

60% match

This example demonstrates a simple social-follow interaction using Ember Data relationships. It shows a list of users, each with follower and following counts, alongside the current user’s own counts. The interface provides two actions per user: one to subscribe to that user, and another to make that user subscribe to the current user. The code defines `subscribe` as a join model with `belongsTo` relationships to `user` for both follower and following, using inverse relationships on the `user` model to track `followers` and `followings`. Actions guard against duplicate subscriptions by checking existing follow records before creating new ones via `store.createRecord`.

57% match

Ember rest spread

This example demonstrates how Ember’s component lifecycle manages the asynchronous spread of REST API data into a live-updating visualization. It shows data flowing from a server through Ember Data models, then being transformed and rendered as dynamic visual elements. The code uses `babel-plugin-transform-object-rest-spread` to enable modern object spread syntax within Ember CLI’s build pipeline, while the `.eslintrc` config enforces ES2017 parsing with experimental support for rest/spread properties. The rendering relies on Ember’s template and component system to bind incoming attributes to visual marks, though no specific charting library is visible. The approach focuses on state management and prop drilling rather than direct DOM manipulation, with data sourced from an unspecified Ember adapter.

52% match

ember-gist test

This example demonstrates a minimal scatterplot where each point represents a word from a README file, positioned by a force-directed layout. The visualization uses D3’s `d3.forceSimulation` with `d3.forceX` and `d3.forceY` to cluster words, while `d3.select` and `selection.attr` update circle positions on each tick. The data is embedded directly as an array of strings from the gist’s README, with no external file. Rendering relies on SVG circles and text elements, with opacity and fill applied via CSS classes. The result shows a simple, animated word-position plot rather than a traditional chart.

44% match

Simple Backbone WordPress Example

This example demonstrates a simple Backbone.js application that fetches and displays WordPress blog posts as a list. It shows how a collection retrieves data from the WordPress REST API endpoint and renders each post’s title, date, and content into a templated view. The code uses Backbone.Model, Backbone.Collection, and Backbone.View, along with Underscore.js templating and jQuery for DOM manipulation. The collection’s `parse` method extracts post fields from the API response, and the view’s `render` method appends each post as a list item.

FFasani

test record

This example displays a network of musical artists and their associations as an interactive force-directed graph. It fetches artist data from the Wasabi API, collects associated artists and record labels, then renders nodes and links using SVG circles and lines. The layout is computed with d3.forceSimulation, applying forceLink, forceManyBody, and forceCenter. Hovering over a node triggers mouseover and mousemove events to show a tooltip with the artist’s name and label count.

JJuliette

data binding

This example demonstrates data binding in D3 v5 by loading a JSON file with character details and rendering each entry as a paragraph. It shows how `d3.json()` returns a promise, using `.then()` to handle the data, then applies the data join pattern with `selectAll`, `.data()`, `.enter()`, and `.append()`. The code binds each object from `cars.json`—containing name, age, and location fields—to a `<p>` element, displaying the character’s name and location via the `.text()` callback. The example relies on D3’s core selection and data-binding APIs.

Ssgzzhinde

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM