Animal Ecosystem Network (food web)

100%

Animal Ecosystem Network (food web)

✓ Published0🌍 Public

Last edited Apr 13, 2026

Created on Apr 13, 2026

Forked from Tree

This interactive food web depicts the feeding relationships among seven animals in a simple ecosystem, with nodes colored by trophic level (producer, herbivore, omnivore, carnivore, apex predator) and directed arrows showing energy flow. The visualization uses D3.js v7 with an SVG renderer, placing nodes initially in a static layout while allowing users to drag and reposition each animal. Edges are drawn as lines with arrowhead markers, and the legend clarifies the color coding for each ecological role.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Network Graph

This network graph visualizes a hierarchical animal classification tree, grouping species into Herbivores, Omnivores, and Carnivores. Nodes are color-coded by dietary type, such as lightgreen for Pandas and lightcoral for Asiatic Lions. The code uses D3 v7’s `d3.forceSimulation` with charge, link, and center forces to position the nodes and links dynamically. SVG circles and text labels render each node, while links are styled as blue lines whose thickness scales with the `value` field. Drag behavior allows interactive repositioning of nodes during simulation ticks.

NNandini Maddula

73% match

Loading thumbnail…

Ecosystem Simulation

This animated ecosystem simulation visualizes predator-prey dynamics among three interacting species: plants, herbivores, and carnivores. Using the HTML5 Canvas API with `getContext('2d')` and `requestAnimationFrame`, the simulation renders colored circles representing each organism as they move, consume, reproduce, and die. Population statistics update in real-time, demonstrating natural population oscillations as each species' survival depends on the abundance of others.

NNita

70% 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

70% match

Loading thumbnail…

ICE 8

This interactive visualization presents a classification tree of animals, grouping species into herbivores, omnivores, and carnivores with further subcategories. Built with D3.js version 3.5.17, the tree layout uses SVG rendering with animated transitions. Nodes are represented by teal circles with bold labels, connected by blue curved links. Clicking any node toggles its children, collapsing or expanding branches with smooth 750-millisecond transitions. The data structure is hardcoded in JavaScript, and the tree positions child nodes at fixed 180-pixel depth intervals.

Mmadanvemulapally

68% match

Loading thumbnail…

Assignment 8 Node-link diagram

This example shows a circular node-link diagram of food-related entities, with edges between connected nodes bundled together to reduce visual clutter. It uses d3.csv to load food_nodes.csv and food_edges.csv, then renders the structure with d3.hierarchy and d3.cluster to position nodes radially. The visualization uses d3.lineRadial with a curveBundle beta curve, where the tension is adjustable via a slider that updates the bundled paths dynamically. Hovering over a node highlights all links connected to that node, and the SVG is interactive with d3.zoom.

Hhxu51@usfca.edu

67% match

Loading thumbnail…

third

This interactive D3.js network graph maps an ecosystem hierarchy, showing continents connected to their resident species, with node size encoding average weight and color distinguishing root, continent, and species levels. Built with d3.v7, the visualization uses d3.forceSimulation with link, charge, center, and collide forces for physics-based layout, while d3.scaleSqrt and d3.scaleOrdinal manage proportional sizing and color coding. Users can drag nodes to reposition them and hover over elements to inspect species details like lifespan, habitat, and diet, with data parsed from CSV via d3.csvParse.

119h61a05c9@cvsr.ac.in

67% match

Loading thumbnail…

Fork of Animal Kingdom — Taxonomy Tree

This visualization presents the Animal Kingdom as an interactive taxonomic tree, branching from a root through kingdom, class, and order layers down to individual species. Nodes are colored by depth, and hovering reveals tooltips. Built with D3 version 7, it uses `d3.stratify()` to convert a flat parent-child data array into a hierarchy, then `d3.tree()` to compute positions for the SVG rendering. Links and node circles are styled with CSS classes based on depth, and a color legend explains the layer mapping.

Mmeangreen0067@gmail.com

67% match

Loading thumbnail…

ICE8 Animal Tree Network

This interactive tree diagram visualizes a hierarchical animal classification network, starting from the root category "Animals" and branching into Vertebrates and Invertebrates, then further subcategories like Mammals, Birds, and Arthropods. Each node is labeled and color-coded by depth level, with collapsible child nodes toggled on click. The visualization uses d3.layout.tree and d3.svg.diagonal to position nodes and draw curved links, while CSS classes style circles and text within an SVG canvas. The embedded JSON data structure defines parent-child relationships for the taxonomy.

SSrujana390

67% match