Skip to main content
SimilarExport ZIP
100%

etl

✓ Published0🌍 Public
MMing LIU
Last edited Mar 18, 2022
Created on Mar 18, 2022
Forked from HTML Starter

This example visualizes an ETL workflow as an animated, interactive graph. It shows the dependencies between tasks in an Apache Airflow DAG, with colored nodes representing different task types (e.g., BashOperator, DummyOperator) and edges indicating execution order. The visualization uses the D3.js library to construct the node-link diagram within an SVG, with CSS transitions that highlight and fade elements to emphasize the flow. The underlying data, including task states like “success” and “skipped,” is sourced from a simulated Airflow run, and the graph is rendered using a force-directed layout.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Gist b27e8f1f58de8f2cbf7d29ea12ec66a1

This example presents a diagram of the data science workflow, outlining the stages of ETL (extract, transform, load) alongside referenced tools such as Dataquest, Google Colab, and Spotify’s Luigi library. The visualization uses a plain HTML page with static text and hyperlinks, rendered directly in the browser without any JavaScript libraries like D3 or Canvas. It displays the pipeline as a simple list, with the ETL acronym broken out into its three component steps, and does not include interactive elements or dynamic data rendering. The source is a raw Gist file, and the content is purely textual, relying on standard HTML formatting for layout.

MMistyBlunch
68% match
Loading thumbnail…

Untitled

An interactive React-based Sankey diagram visualizes flow data from a remote JSON file, displaying nodes and links with color gradients between source and target. The chart uses D3.js's sankey layout algorithm for node positioning and link calculation, rendered as SVG paths and rectangles. A drag-and-drop interaction lets users reposition nodes in edit mode, while react-spring is available for potential animations. The visualization includes node labels and values, with a color scheme differentiating flow pathways.

CCaparino
65% match
Loading thumbnail…

Task Graph With Force Simulation

This example visualizes a task graph as a node-link diagram with a force-directed layout. It shows how parent-child relationships among tasks (such as “albert” and “betty”) are inferred from a data structure that records each node’s parent, then rendered as an SVG with circles and connecting paths. The code uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes dynamically, while tick events update the paths and node positions. Drag behavior is enabled via d3.drag, and links are styled with dashed strokes or colors based on link values.

Aantoniojl@gmail.com
65% match
Loading thumbnail…

Data Flow Diagram

This visualization renders a reactive data flow diagram for a ModelJS application, using a force-directed graph layout to display the dependencies between reactive properties and lambda functions. The graph is constructed from runtime-generated JSON describing the flow, with SVG rendering driven by D3's force layout. Nodes are positioned by the layout, with `property` nodes colored coral and `lambda` nodes white, while links trace the flow of data between them. The diagram includes zoom and pan interactions, and visually encodes the structure of reactive dependencies in a dynamic, graph-based form.

CCurran Kelleher
64% match
Loading thumbnail…

Untitled

This interactive network visualization uses D3 v4's force-directed simulation to display the structure of Softtek's DevOps toolchain. The graph, loaded from `miserables.json`, depicts hierarchical relationships between technologies and practices, from monitoring tools like Nagios and Prometheus to cloud services and configuration management systems. Nodes are rendered as small circles on a Canvas element, with links drawn as gray lines. Users can drag individual nodes to explore the network, which responds dynamically through the `d3.forceSimulation` API. The `d3.drag` function enables node repositioning, restarting the simulation to maintain layout stability.

Aarg04
64% match
Loading thumbnail…

Fork of Fork of S3 bucket

This interactive D3.js v7 and React visualization guides users through hosting a static website on AWS S3, displaying six implementation steps as an animated, hoverable flow diagram. Users navigate between three tabs—Benefits, Requirements, and Implementation Steps—which render as a bar chart, a data table, and the step connector diagram, respectively. Data is loaded from CSV files, and D3's scales, axes, and selection transitions animate elements like bar growth, tooltips, and arrow drawing to illustrate each phase of the process.

NNita
63% match
Loading thumbnail…

Untitled

This interactive graph visualizes a hierarchical dataset, starting with a root "flare" node and expanding through categories like "analytics," with the force-directed layout used to position nodes. Built with D3 v3, it uses `d3.layout.force()` to simulate physical forces, with node size proportional to the `size` property from the `graph.json` file. The visualization demonstrates how clicking on a parent node toggles the display of its children, allowing users to explore the tree structure. Nodes are rendered as SVG circles with labels, and links are drawn as lines, with color coding distinguishing collapsed, expanded, and leaf nodes.

JJediquu
63% match
Loading thumbnail…

Force Directed Graph For TaskGraph #2

This example displays a force-directed graph of a small task hierarchy, using nodes named albert, bettie, carly, donna, echo, and father, with links that are either solid blue or dashed black. The visualization is rendered as an SVG with D3 v5, using `d3.forceSimulation` to compute node positions with link, charge, collision, and centering forces. The code builds nodes dynamically from the link data and supports interactive dragging of nodes, with links styled according to a binary value attribute that dictates their color and dash pattern.

Aantoniojl@gmail.com
63% match