Skip to main content
100%

Gist abb23fbc4206b807459d7711ee808a11

✓ Published0🌍 Public
Aandyreagan
Last edited Sep 26, 2018
Created on Sep 26, 2018

This example visualizes a personal food diary from a CSV file, showing each meal as a node in a force-directed graph. The chart uses d3.forceSimulation to position nodes by meal type and date, with node size reflecting the portion size recorded in the data. It renders the network using D3’s SVG capabilities, drawing links between consecutive meals to reveal temporal patterns. The code reads the `food.csv` data with d3.csv, parses the Date and Meal fields, and applies a custom color scale to distinguish breakfast, snacks, and other meal categories.

AI-generated description

Similar vizzes

Loading thumbnail…

Force-Directed Graph & Adjacency Matrix- D3.js

This example pairs a force-directed graph with an adjacency matrix to visualize relationships from a food-themed CSV dataset. The graph uses `d3.forceSimulation` with link and charge forces to position nodes, while draggable circles represent entities. The adjacency matrix uses SVG rectangles, with fill opacity scaled by edge weight, and includes interactive tooltips on mouseover. Both views share the same node-link data, rendered in SVG with animation. The code relies on D3.js v6 APIs including `d3.csv`, `d3.forceLink`, `d3.drag`, and `.join()`.

Pprateekvasi
74% match
Loading thumbnail…

Gist 11145951

This visualization uses a force-directed simulation with D3’s `d3.forceSimulation` to arrange a network of linked nodes. The code loads external data (likely from a JSON or CSV file) and renders the graph as an interactive SVG, with node positions updated continuously through the simulation’s tick events. Links are drawn as simple lines, while nodes appear as colored circles, and the layout responds to mouse interactions for dragging. The example also includes a footer with social media icons, but the core graphic focuses on the dynamic network structure.

Aandybak
72% match
Loading thumbnail…

Gist ea92be31b5382266079042e50d4f7de6

This example visualizes a dataset of comedians stored in a CSV file, plotting each person as a node in a force-directed graph. It shows the relationship between name, city, and email by positioning nodes using `d3.forceSimulation`, with the city serving as a categorical grouping. The rendering relies on D3’s selection and data-binding methods to draw circles and text labels, while the CSV is loaded via `d3.csv`. The code does not include interactive features or additional layout constraints; it simply maps the three fields into a basic spatial arrangement, emphasizing the distribution of comedians across cities.

WWill Carter
72% match
Loading thumbnail…

Assignment 8 node-link diagram (force-directed)

A circular node-link diagram arranged by a hierarchy, with edges bundled using D3's `d3.lineRadial` and `d3.curveBundle` to show connections between food-related entities. The chart, rendered as an SVG, draws food nodes from `food_nodes.csv` and edges from `food_edges.csv`, coloring links orange on hover to highlight a selected node's relationships. A slider adjusts the tension of the bundled curve, interactively reshaping the edge paths. The data, attributed to “Xhy51”, likely represents a network of food brands and chefs.

Hhxu51@usfca.edu
72% match
Loading thumbnail…

Fork of Force-Directed Graph & Adjacency Matrix- D3.js

This visualization combines a force-directed graph with an adjacency matrix to explore restaurant connections from a CSV file. The node-link diagram uses d3.forceSimulation with drag interactions and animated ticks, while the matrix displays weighted links through cell opacity and tooltips. Both views render as SVG, with the matrix mapping food-related entities and their relationships using data from food.csv.

Rrajugautam
72% match
Loading thumbnail…

Assignment 8 node-link diagram (force-directed)

This interactive adjacency matrix visualizes connections within a food-related network dataset. Hovering over a cell highlights its entire row and column, revealing the source and target node names in a tooltip. Built with D3.js v7, it uses an SVG rendering approach with `d3.csv` to load data files and matrix mapping from `food_edges.csv` to display the graph structure. The visualization animates tooltip opacity transitions on mouse events, providing an intuitive way to explore the bipartite relationships between food entities.

Hhxu51@usfca.edu
72% match
Loading thumbnail…

Gist 56aa55c446bd6068e25ac573bd790feb

This example shows a network graph of nodes and links, with each node rendered as a circle positioned by a force-directed layout. It displays a social or relational dataset where connections between points are visually mapped, and the graph responds to simulation forces over time. The code uses D3.js’s `d3.forceSimulation` to compute node positions and `d3.drag` for interactive movement. It draws the nodes and links on an SVG canvas, using standard D3 selections and update patterns, with the simulation updating positions continuously. The data source is a hardcoded array of node and link objects within the gist file.

Aamazingandyyy
71% match
Loading thumbnail…

Gist e899f735aa7a47c42f7b2604c713bfef

This example visualizes a force-directed graph using D3’s `d3.forceSimulation` to position nodes, with links drawn as SVG lines. The rendering approach uses Canvas `getImageData` to sample pixel data for a custom background effect, while Three.js handles 3D-like sphere rendering for node highlights. The code reads node and edge data from an embedded JavaScript object, and the simulation runs continuously with a `tick` handler updating node positions. A dropdown menu lets users filter the graph by cluster, though the filtering logic only updates node visibility without altering the underlying simulation forces.

AAlexDaGr8
71% match