Skip to main content
SimilarExport ZIP
100%

My - Tree 2

✓ Published0🌍 Public
TTMorgan99
Last edited Jan 21, 2020
Created on Jan 21, 2020
Forked from My - Tree

This visualization displays a hierarchical network of production relationships from a farming game’s building.csv dataset. Nodes represent ingredients and products, while links connect each product to its required resources. Using d3.forceSimulation with SVG rendering, the code constructs a directed graph where paths show dependency chains from basic ingredients like wheat and eggs up to finished goods. The layout leverages force-directed physics to organically position interconnected nodes, with curved links and labeled text styled by Playfair Display. D3 v5’s csv parsing and lodash support the data transformation into node-link structures.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

My - Tree

This visualization shows recipes from a farm-building game as a network of connections between ingredients, products, and buildings. The code reads a CSV file with d3.csv and uses d3.forceSimulation with forceLink, forceManyBody, forceX, and forceY to position nodes, while d3.select and .attr render SVG circles and lines. Although the current script is incomplete and partially commented out, it lays out the foundation for a force-directed graph where each ingredient links to the products it is used in, as shown in the building.csv data file.

TTMorgan99
89% match
Loading thumbnail…

Assignment 8 Force-Directed Node-Link Diagram

This force-directed node-link diagram visualizes a food network, with nodes representing individual food items and links showing relationships between them. The graph uses a physical simulation to position nodes, which are drawn as small green circles connected by black lines, and includes tooltips for interaction. The visualization is rendered with D3 v6, using `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, and `d3.forceLink` to drive the layout. Data is loaded from two external CSV files containing node and edge definitions, with the SVG output sized at 2500 by 2000 pixels.

Aahuynh8@dons.usfca.edu
73% match
Loading thumbnail…

Decision Tree III

This visualization displays a decision tree of farmers market data, branching through product categories like baked goods, cheese, and vegetables to reveal patterns in market offerings. The tree uses an organic, gooey aesthetic with SVG filters for blur and color matrix effects, while animated nodes and edges grow outward using d3’s tree layout and the `.ancestors()` function to position descendants at ancestor depths. Built with d3.v4 and Vue, it renders in SVG with smooth transitions, sourcing real market attributes from a JSON dataset.

FFrissAnalytics
73% match
Loading thumbnail…

Force Directed Graph - Simple

A force-directed graph displays hierarchical data through a network of linked nodes. The example loads a flat CSV file, converts it into a tree hierarchy using `d3.stratify`, and renders it with SVG paths and circles. The layout is computed by `d3.tree`, with curved links drawn between parent and child nodes. The visualization uses `d3.csv`, `d3.hierarchy`, and `d3.select` to structure and display the data from `data.csv`, showing relationships from "Top Level" down to individual leaf nodes.

JJimMaltby
72% match
Loading thumbnail…

Tree Example

This interactive tree diagram displays the hierarchical structure of a dataset, with nodes and links rendered using SVG and animated transitions. The visualization uses D3.js version 3, with the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Clicking nodes expands or collapses their children, with smooth transitions achieved through `transition.attr`. The static data is embedded in the code, and the example also includes a separate CSV file for population data, though it is not referenced in the visualization.

1123ATFake
72% match
Loading thumbnail…

Force-Directed Tree II

A force-directed tree visualization displays the hierarchical file structure of the D3.js library, with nodes representing individual modules and paths. The layout is computed using `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and positional forces, rendering to a Canvas 2D context via `context.arc` and `context.lineTo`. Nodes are draggable, with drag behavior implemented through `d3.drag` and a simulation `find` query. Data originates from a CSV file parsed by `d3.csv` and structured with `d3.stratify`.

Mmbostock
72% match
Loading thumbnail…

Force Directed Graph - Simple

This example displays a simple force-directed graph built from a CSV file containing hierarchical data, showing parent-child relationships as an interactive tree layout with curved links and labeled circular nodes. The code uses d3.v5’s `d3.csv`, `d3.stratify`, and `d3.hierarchy` to transform the flat tabular data into a tree structure, which is then rendered as an SVG via the `d3.tree()` layout. Nodes are drawn as circles with text labels, connected by cubic Bézier paths, with styling applied through CSS classes.

JJimMaltby
72% match
Loading thumbnail…

Untitled

This example shows a force-directed network graph of board game relationships, with nodes connected by curved links. The visualization uses d3.forceSimulation with link, charge, and centering forces to position the nodes, which are rendered as SVG circles and can be dragged by the user. Data is loaded from a CSV file using d3.dsv, and the curved paths are drawn with SVG path elements. The simulation updates positions on each tick, applying drag behavior via d3.drag to allow interactive exploration.

SSupplyScience
71% match