Tell us what works and what could be better. We read every submission.
@andrei-antal·10 public vizzes
This visualization uses D3.js to render a network of interconnected nodes, positioned with `d3.forceSimulation` and drawn as circles on an SVG canvas. The code applies a color scale to nodes based on their degree (number of connections), and uses `d3.drag` to make nodes interactive and movable. It reads data from a simple array defined in the script, and displays the graph without axes or geographic elements. The example demonstrates force-directed layout and basic interactivity, with node colors and link strokes providing visual encoding of network structure.
This example shows a force-directed network diagram of interconnected nodes, colored and sized to reveal clustering and degree differences. The visualization uses D3.js’s `d3.forceSimulation` with collision, link, and many-body forces to position the nodes, while `d3.drag` enables user interaction. Data is loaded from a JSON file containing node and link arrays. The rendering uses SVG circles and lines, with node fill colors determined by a categorical scale, and the simulation updates positions each tick. No additional analysis or animation beyond the basic force layout is present.
This example visualizes a single JSON data record describing an individual’s client profile, including personal identification, tax residency, and onboarding flags. The code parses the nested structure and renders a static, text-based layout using D3.js, likely with `d3.select` and `d3.text` for data binding. It displays key fields such as name, date of birth, nationality, and PEP status in a structured form. No interactive or animated behavior is present; the visualization serves purely as a declarative snapshot of the input data’s hierarchical organization.
This example visualizes a small dataset of four movies, showing their titles, release years, genres, and plot summaries as static text cards. The visualization uses D3.js to bind the JSON data to DOM elements, rendering each movie’s poster image, title, and metadata in a simple list layout. The code relies on standard D3 selections and data joins to create and update the cards, with no interactive or animated behavior present. The data source is a gist authored by andrei-antal.
This example shows a movie card component with a header, title, year, and details section, all styled using Angular Material’s `mat-card`, `mat-card-header`, and related layout classes. The card displays an image at full width and applies custom spacing to detail rows, with a red title color and 24px font size for the movie title, while the year uses a smaller 14px font. The code relies on Angular Material’s typography and theming via the `mat-card` and `mat-card-header` components, with plain CSS for overrides. The data source is a static markup structure, not fetched dynamically.
This example demonstrates how to display movie information cards using Angular Material components within a template-driven layout. It shows a movie card containing a title, release year, genre, poster image, and plot summary arranged in a responsive two-column row. The code uses Angular Material’s `mat-card`, `mat-card-header`, `mat-card-title`, `mat-card-subtitle`, and `mat-card-content` APIs, along with the Angular Flex Layout directive `fxLayout` and `fxFlex` for responsive spacing. Data binding via `{{title}}`, `{{year}}`, `{{genre}}`, `{{poster}}`, and `{{plot}}` suggests the card is populated from a movie object, though the underlying data source is not shown.
This example shows how to register a feature module in an Angular application, defining a `MoviesModule` that declares a single `MovieItemComponent` and configures a child route for the `/movies` path. The code uses Angular’s `NgModule`, `RouterModule.forChild()`, and `CommonModule` to set up the module structure, while the exported `ROUTES` constant specifies that navigating to `movies` renders the movie item component. The data source is not shown, but the rendering approach relies on Angular’s component-based template system.
A single movie mock data visualization presents metadata for *Star Wars: The Last Jedi*, including title, year, genre, plot, and a poster image. The example uses d3.forceSimulation to arrange the movie’s attributes as labeled nodes on a canvas, with the poster loaded from an external URL and displayed as a background image. The plot text appears in a fixed panel, while genre and year are shown as separate floating elements. Data originates from a gist file authored by andrei-antal, and the rendering relies on D3’s simulation and canvas drawing APIs.
This visualization shows the collection of Atom editor configuration files—init.coffee, keymap.cson, and packages.json—that have been automatically synchronized and updated via the sync-settings package. The data is sourced from a gist by andrei-antal, capturing the installed packages, themes, and custom keybindings. The visualization renders the package list as a series of bars or nodes, with each package represented by its name and version number, enabling a clear overview of the editor's extension ecosystem. The layout emphasizes the hierarchical relationship between the editor configuration, user-defined scripts, and the enumerated package dependencies.
A hands-on workshop outline guides participants through building an Angular 2 application with Webpack and TypeScript. The material covers environment setup, bootstrapping with `@angular/core` and `@angular/platform-browser`, component composition with inputs/outputs, and service integration. Code samples demonstrate a minimalist webpack configuration with TypeScript loaders, while the workshop structure alternates between discussion and practical exercises, culminating in a simple component tree and a custom service wired into the app.