Gist be32a2ac117700d3dbde6b0824367ba5

Graph Gist

This example shows a small graph of people and their database preferences, capturing two `Person` nodes connected by `LIKE` relationships to database nodes labeled `Database`, `NoSql`, and `Graph`. The visualization renders this graph data using D3.js, likely with a force-directed layout (`d3.forceSimulation`) to position nodes and links, and possibly `d3.geoPath` or standard SVG/CSS for shapes and labels. The source code, authored by CliffordAnderson and stored as a Gist, explicitly creates the nodes and relationships with Cypher, returning them for immediate display. The result emphasizes how graph structures and their labels can be directly mapped from query output to interactive visual elements.

CCliffordAnderson

testschema

This example visualizes the structure of a JSON Schema for a data catalogue, showing how metadata fields like table name, description, columns, and data format connect. The visualization is generated from a `testschema.json` file, which defines the schema’s properties and their types. It renders the schema’s hierarchy and relationships, using the JSON structure to map out the nested objects and enumerations. The code leverages standard JavaScript libraries to parse and display the schema, making the metadata’s organization immediately apparent through a graphical layout.

RRobinL

Gist 8a97689739c217f28474d80c89013628

This visualization uses a force-directed graph to show relationships between entities, with nodes positioned by `d3.forceSimulation` and links drawn as curved paths. The code computes node sizes and colors from quantitative attributes, while a canvas overlay via `d3.geoPath` and `getImageData` samples pixel density to modulate link opacity based on local clustering. It employs a custom `transition.attrTween` to animate node drift when the simulation restarts, and uses the `d3.hierarchy` API to flatten nested data from a JSON file. The visualization reads credentials from an `env.list` file for a private data source, but the rendering logic is independent of that authentication step.

CConorAspell

Gist a5a48620f47ddaa0208a2b226e4ca111

This example shows a deeply nested, table-like data structure where sensory attributes such as “Aparencia” and “Color” are repeatedly wrapped in layers of “No aplica” headers, ultimately ending in the accessor fields `aparencia` and `color`. The visualization presents this hierarchical arrangement as a column-oriented table, using the `columns.json` configuration to define multi-level grouping. The code relies on a generic table-rendering API, likely from a React-based library like `react-table`, which consumes the `columns` array to generate headers and cells. The rendering approach emphasizes the recursive nesting of metadata rather than a direct visual encoding, with no additional JavaScript libraries such as `d3` or animation shown.

EErnestoR

Gist 260722

This example animates the interactions between a force-directed graph's nodes and edges, using the data from a gist of MySQL terminal commands. It visualizes the network structure by simulating physical forces on the nodes and drawing connecting lines between them. The visualization relies on `d3.forceSimulation` to handle the physics and update node positions, while `d3.select` and `transition` methods are used to animate the graph elements. The code renders the nodes as circles and the edges as lines, with the simulation tick driving the continuous repositioning.

CCaged

Table

This gallery shows a table of tabular data, rendering each record as a row with cells for every column. The data is added to the page via an HTML table, with a header row containing the column names. It uses D3.js to bind the data and create the table structure. The example is connected to a dashboard through the `Table` function in `table.js`, pulling from a CSV file of periodic table elements.

JJerfaas

Use `sqlfluff` to build a lineage tree in D2

This visualization parses T-SQL view definitions from `vwMarket.sql` and renders a lineage tree showing table and column dependencies, using `sqlfluff` to generate a parse tree and `D2` to draw the diagram. The code extracts aliases from `from_clause` nodes to list source tables as SQL-table shapes, and pulls column-to-column mappings from `expression` segments where comparisons use the `=` operator, outputting edges like `alias.column -> other.column`. It relies on `sqlfluff.parse` for T-SQL grammar analysis and recursive JSON traversal via `get_json_segment` to locate `from_expression_element` and `column_reference` structures, printing D2 syntax directly to standard output. The example demonstrates how to bridge SQL parsing with declarative diagramming for dependency visualization.

HHugoberry

Gist 8bb4970e2700b40a3dce1d785654d907

This visualization uses a force-directed graph to map the relationships between identifiers extracted from a Power Query M codebase. The data originates from a gist by Hugoberry, showing dependencies among functions, modules, and error-handling patterns. The rendering relies on D3.js’s `forceSimulation` with custom link and node positioning, while each node’s label is drawn using SVG text. The code specifically highlights groupings like `TableAction.*`, `ValueAction.*`, and `Pattern.*`, revealing hierarchical clusters of related API calls. The graph’s layout is animated via D3’s tick handler, and the visible node sizes suggest a metric like degree centrality, though the exact encoding is not explicit in the snippet.

HHugoberry