Ming LIU

@MingL0L·4 public vizzes

Fork of HTML Starter

This example demonstrates a directed graph rendered as SVG using the dagreD3 library, with nodes labeled A through E and styled edges that vary in color, thickness, dash pattern, and arrowhead appearance. The graph layout is computed by dagreD3’s renderer, which is invoked with a `Graph` object built via the `graphlib` API. Node and edge styles are applied through inline attributes such as `style` and `labelStyle`, while custom CSS classes like `arrowhead` override default arrow colors. The final SVG is centered horizontally within a fixed-height container using D3’s `select` and `attr` methods, with the graph’s dimensions dictating the canvas height.

Mar 31, 2022

Loading thumbnail…

test

This visualization displays the text "Hello D3 version 7" in enormous type, centered on a plain white page. It serves as a minimal demonstration of D3 version 7’s basic DOM manipulation. The page loads the D3 library from a CDN and executes a script that uses the `select` API to target the document’s `body` element and set its text content. The example highlights the simplicity of starting with D3’s core selection and modification methods.

Mar 28, 2022

Loading thumbnail…

etl

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.

Mar 18, 2022

Loading thumbnail…

Fork of Fork of Mind Map

This interactive mind map visualizes a hierarchical tree of Leonardo da Vinci-related topics, using a branching layout with labeled boxes and links that can be expanded or collapsed on click. Built with D3.js (v3) and jQuery, it loads JSON data and renders the structure as an SVG with smooth animations. The visualization supports zooming and dragging via d3.behavior.zoom, and includes a custom right-click context menu for additional actions. Node colors and tooltips are styled through CSS, while the tree layout is computed with d3.layout.tree.

Mar 18, 2022