C

Connor Trump

@ConnTruu·16 public vizzes

Loading thumbnail…

3-27-2022 rework

This visualization reworks a JSON knowledge graph of analyzed sentence events, using d3.v4 to display nodes and links in an SVG canvas. It renders the example sentence "the shark bit the surfer savagely at the beach yesterday because it was hungry" as a structured network, with nodes sized by text length and organized into labeled groups. The layout relies on force-directed simulation from the WebCola library, while canvas-derived text measurement via `ctx.measureText` tunes node dimensions. The graph distinguishes predicates, referents, and phrases, with edges showing logical dependencies.

Loading thumbnail…

2-19-2022 rework

This visualization reworks semantic JSON knowledge structures into an interactive graph of nodes, links, and groups. It displays the logical relationships within sentences, such as "the shark bit the surfer savagely," by parsing hierarchical data from files like `example.json` and `happycat.json`. The code uses D3 v4’s `d3.json` to load data, creates nodes with varying widths based on text measurement via Canvas `measureText`, and employs WebCola for force-directed layout. SVG and Canvas contexts render the graph, with node types distinguishing referents, predicates, and groupings.

Loading thumbnail…

Cola

This example visualizes the syntactic structure of a sentence as a network of nodes and links grouped into semantic layers, including the core predicate, referents, and peripheral elements. It uses WebCola for constraint-based layout and D3 v4 for rendering, with both SVG and canvas. The graph is built from a JSON file containing screen model data, and the layout organizes nodes into colored groups representing core and clause-level periphery.

Loading thumbnail…

Fork of 2-13-22 Clean Sheet

This visualization renders a hierarchical knowledge graph from JSON-encoded semantic parses of sentences, showing predicates, arguments, and nested propositional structures. It uses d3.v4 with forceSimulation for layout, rendering nodes and links as SVG elements, while Canvas is used to measure text dimensions for label sizing. Nodes represent nucleus predicates, referents, and modifiers, with links connecting arguments to their cores. The example loads data via d3.json and constructs the graph by iterating through the ContextTrackingData array, handling nested clauses and referent phrases.

Loading thumbnail…

2-13-22 Clean Sheet

This visualization renders a semantic knowledge graph from linguistic JSON data, showing propositional relationships such as predicates, referents, and nested clauses. It builds nodes and links recursively from the `ContextTrackingData` structure, using D3 v4’s force simulation to layout the graph. The rendering combines SVG for nodes and links with Canvas 2D text measurement to size labels. WebCola is also loaded, though the primary layout is driven by `d3.forceSimulation`. The example demonstrates hierarchical clause decomposition, including recursive structures for reported speech and causation.

Loading thumbnail…

PAT Refactored Data

This visualization shows the hierarchical structure of PAT-refactored linguistic data, displaying propositions, their logical structures, and the relationships between core arguments like the nucleus, predicator, and referents. It uses d3.forceSimulation with WebCola for layout, rendering nodes and links in a knowledge graph style. The code processes JSON input containing context tracking data, extracting clause operators, core periphery details, and argument relationships to construct the graph. Nodes are styled as groups and labels, with links indicating argument types, while SVG and canvas are used for rendering the final output.

Loading thumbnail…

Pat working file

This example demonstrates a force-directed graph of linguistic role annotations, where nodes representing words are grouped into colored, rounded rectangles based on syntactic relations. Users can drag nodes to reposition them, with double-clicking releasing a node from its fixed position. The visualization uses WebCola’s constraint-based layout through its D3 adapter, combining SVG for rendering nodes, links, and group bounds. The code relies on `d3.json` to load the graph data and `d3.zoom` for panning, with node sizes defined in the JSON input.

Loading thumbnail…

Visualization

This visualization shows the bipartite clause structure of an English sentence, using a force-directed graph to lay out words grouped by their grammatical roles (effector, theme, predicate, periphery). The graph displays nodes for each word or phrase, with links connecting core arguments to the predicate, and colored rectangles grouping related units like the core and clause. It uses D3’s `forceSimulation` with a many-body strength, and for layout it relies on the WebCola library via `d3adaptor` to handle grouping and overlap avoidance. The data is structured JSON from the meaning matcher, and the canvas is used to measure text width for node sizing.

Loading thumbnail…

Fork of WebCola Small Groups!

This fork of WebCola's Small Groups example visualizes sentence structure as a force-directed graph of clauses, predicates, and referents. Nodes are grouped by syntactic role, with colors distinguishing predicates, referents, and peripheries. The implementation uses the WebCola layout engine through its `d3adaptor`, with drag-and-drop interaction for repositioning nodes and double-clicking to release them. Data originates from a static JSON file containing the sentence "The shark bit the surfer savagely at the beach yesterday because it was hungry."

Loading thumbnail…

Graph Test

This graph diagram visualizes the network of connections within the Kenneth Rainin Foundation, representing predicates, referents, and groups as colored rectangular nodes. The visualization uses D3.js v6 with `forceSimulation` to position nodes, `forceManyBody` for repulsion, `forceLink` for edge constraints, and `forceCenter` for layout anchoring. Nodes are rendered as SVG rectangles with drag interactions, while links appear as lines between connected elements. The data is defined programmatically in data.js, with a custom color palette generated via Paletton.

Loading thumbnail…

Face

This example shows a simple smiling face built from basic SVG shapes: a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc for the mouth. The animation moves the eyebrows upward and back down over two two-second transitions. The code uses D3 v7’s `select`, `arc`, and `transition` APIs within a plain HTML page, rendering everything in SVG with `d3.min.js` loaded from a CDN.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower for a dataset of cars, with each point representing an individual model. The visualization uses D3.js v7 with a React framework and SVG rendering to draw semi-transparent blue circles on a Cartesian grid. Axis labels and tick marks are rendered using D3’s `axisLeft` and `axisBottom` functions, with gridlines extending across the plot. Data is loaded from a CSV file via `d3.csv` and parsed into numeric values before scaling with `scaleLinear`.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with each circle positioned along a horizontal population axis and a vertical categorical country axis. The visualization uses d3.csv to load the data, d3.scaleLinear for the population scale, and d3.scalePoint for the country positions. Axes are rendered with d3.axisLeft and d3.axisBottom, while d3.format applies compact tick labels. The SVG output styles circles with a steelblue fill and includes labeled axes and a title.

Loading thumbnail…

Customizing Axes

A bar chart displays the top 10 most populous countries from a CSV file, with population on the x-axis and country names on the y-axis. Custom axes hide domain lines and use a tick size that extends gridlines across the chart, while formatting tick labels with D3's `format` to abbreviate values and replace 'G' with 'B'. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendered in a React setup.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, ordered alphabetically and scaled so the bar lengths are proportional to population values. Built with D3 v7 in React, it uses `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, map population to pixel widths and countries to vertical bands, then render SVG rectangles. The dark green bars are drawn inside a translated group with a margin-based layout. Population values from the CSV are multiplied by 1000 before scaling, and axes are placed with D3’s positioning transforms.

Loading thumbnail…

Shapes with SVG and CSS

This example displays a static collection of SVG shapes—circles, rectangles, lines, and a path—arranged in groups and scaled to fill the viewport. It demonstrates how Cascading Style Sheets (CSS) can style SVG elements, setting stroke colors, widths, and line joins via class selectors. The markup uses raw SVG elements like `<circle>`, `<rect>`, and `<path>`, with inline attributes for fill and translation. No JavaScript libraries are used; the page relies on plain HTML, CSS, and SVG rendering in the browser.