Skip to main content
SimilarExport ZIP
100%

Fork of Force Grid

✓ Published0🌍 Public
MMaxene Graze
Last edited Feb 3, 2021
Created on Jan 20, 2021
Forked from Force Grid

A force-directed grid arranges fermented food projects by month, with circles colored by ingredient type and sized by fermentation length. The visualization uses d3.forceSimulation with forceX, forceY, forceManyBody, and forceCollide to position nodes based on month coordinates. SVG circles render the data, and a tooltip appears on mouseover to display the project name. The dataset comes from a JSON file cataloging fermented foods across months, using D3 v6.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Force Grid

This visualization displays a dataset of fermented food projects, using a force-directed layout to organize items by month and type. Each circle represents a fermentation project, with its size indicating the fermentation length and its color corresponding to the food category, such as grain, vegetable, or protein. The chart separates projects into monthly vertical bands using a band scale for the x-axis while a physics simulation distributes the circles. The animation uses d3.forceSimulation with forceManyBody, forceCollide, and forceX to position the nodes, rendering the result as an animated SVG.

DDenise Mauldin
92% match
Loading thumbnail…

Fork of Force Directed Graph Starter

A fork of the D3 force-directed graph starter visualizes a season of fermented foods, showing each fermentation batch as a circle with color indicating food type (grain, vegetable, protein, fruit, or other). The animation uses `d3.forceSimulation` with `forceManyBody`, `forceCollide`, and `forceCenter` to position the circles, while data is grouped by month but not used for positioning in this rendering. The SVG circles are drawn in black and animate via `transition()`, loading JSON data from `data.json` with `d3.json`.

MMaxene Graze
87% match
Loading thumbnail…

Fork of Force Grid

This example shows a force-directed scatterplot of food-item data, grouped by month along the x-axis and colored by type. The visualization uses a static simulation that runs 140 ticks before rendering, with circles positioned by `d3.forceSimulation` and forces including `d3.forceX`, `d3.forceManyBody`, and `d3.forceCollide`. Circle radius reflects length, while fill colors map to categories like Grain or Fruit. The data loads from `data.json` and renders as animated SVG elements using D3 v6, with a color scheme defined per food type.

Ssofia-martinovich
87% match
Loading thumbnail…

Force Grid Practice 2

A force-directed grid arranges circles by fermentation month and duration, with color denoting ingredient type. The simulation uses `d3.forceSimulation` with `forceX` and `forceY` to position nodes along scaled axes, plus `forceManyBody` and `forceCollide` to prevent overlap. SVG circles are rendered with transitions, and the dataset is grouped by month to define the x-scale.

MMaxene Graze
86% match
Loading thumbnail…

Fork of Force Directed Graph

This example displays a force-directed graph of 410 nodes with 5 color-coded groups, alongside an adjacency matrix visualization rendered as a separate SVG. The force layout uses `d3.forceSimulation` with link, charge, and center forces, while nodes are draggable and the view supports zooming. The adjacency matrix is built with `d3.scaleBand` axes and colored rects reflecting node groups. Both visualizations update together, with node IDs matching between the graph and matrix.

ZZhou180
72% match
Loading thumbnail…

Grid Multi Foci Force Layout

This example shows a grid multi-foci force layout that clusters circles representing project statuses and owners. Each node is colored by a categorical scale and positioned near one of several fixed focal points arranged in a grid, with node radius encoding a numeric value. The visualization uses D3 v3’s force layout to simulate attraction toward these foci, with an ordinal x-scale mapping statuses to columns. Data is drawn from an inline JavaScript array, and rendering is done via SVG circles with jQuery used for window sizing.

FFrissAnalytics
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…

Fork of Circles with D3

This example visualizes a hierarchical restaurant dataset, showing menu items grouped by cuisine type through a force-directed network of labeled nodes and links. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position elements, while drag interactions let users rearrange the layout. Each node is rendered as a circle with text labels, and the code loads data from a JSON file via d3.json. The visualization highlights the relationships between a central restaurant node, three cuisine categories, and their respective dishes.

RRohithNaiduDevareddy@my.unt.edu
72% match