Skip to main content
SimilarExport ZIP
100%

Food Tree

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 13, 2024
Created on Aug 12, 2024
Forked from Circles with D3

A radial tree visualization displays estimated macronutrient percentages (fats, protein, carbs) for various foods, with each leaf node showing a small pie chart. The hierarchical layout groups foods into categories like grains, fruits, and proteins, using `d3.tree` with a radial size. Pie slices are rendered via `d3.pie` and `d3.arc`, while `d3.scaleOrdinal` maps the three nutrients to distinct colors. Data is embedded in the source as generated content. A color legend clarifies the nutrient color coding.

AI-generated description

Estimated macronutrients for various foods, arranged in a radial tree, with pie charts at the leaf nodes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree

This radial tree visualization presents a four-level food hierarchy, from the root "Food" down to categories like Fruits and Vegetables, then subcategories, and finally individual items like Orange and Spinach. The D3.js v7 code uses `d3.select`, `svg.append`, and partition/treemap-style layout functions to position colored nodes and link strokes. The hierarchical JSON data is rendered as a dynamic tree, with node fill colors indicating depth level, from pink at the root to blue at the leaves.

Ssravya7136@gmail.com
77% match
Loading thumbnail…

Tree

A vertical tree diagram displays three levels of food categories, from the root "Food" down to fruits, vegetables, dairy, and their individual items. The SVG visualization uses D3 v7's `d3.stratify` and `d3.tree` layouts, reading hierarchical data from a local `food_tree.json` file. Node circles are colored by depth using a `d3.scaleOrdinal` with blue, orange, and green, while `d3.linkVertical` draws the connecting paths between parent and child nodes.

AArun Kumar M
77% match
Loading thumbnail…

two

This visualization shows a hierarchical tree of food categories, breaking down foods from broad categories like Fruits and Vegetables into specific types and items. The tree uses colored nodes by depth—root, category, type, and item—with a legend explaining the color coding. Built with d3.v7, the code uses D3’s hierarchical layout to position nodes and links, rendered as SVG elements. Each node displays its label, and hovering reveals a tooltip with the item’s calorie count. The accompanying legend highlights the depth-based color scheme, while the chart container is styled with rounded borders and a clean, minimal design.

Mmuchakurthisahithipatel@gmail.com
73% match
Loading thumbnail…

tree

This example shows a hierarchical tree diagram of food categories, from the root “Food” down to leaf items like Spinach, Carrot, Orange, and Apple. The visualization uses D3 v3’s `d3.layout.tree` to position nodes and links, with SVG rendering and animated transitions when the tree updates. Each node is color-coded by its type (e.g., type1 through type4), and links are drawn as stepped paths using `d3.line` with `curveStepAfter`. The code includes interactive zoom via `d3.behavior.zoom` and tooltips, with data pulled from an external JSON file.

BBhavyaMammai
73% match
Loading thumbnail…

two

A hierarchical tree visualization maps food categories such as Fruits, Vegetables, and Grains through types to individual items, with each node colored by depth and displaying nutritional calorie data via hover tooltips. The chart uses D3.js v7 with the `d3.hierarchy` and `d3.tree` layout functions to position nodes and links, rendered as an SVG with a custom tooltip div. Data is embedded inline from a food dataset, with link and node styling defined through CSS classes.

Mmuchakurthisahithipatel@gmail.com
73% match
Loading thumbnail…

Pie Chart

This pie chart visualizes the percentage breakdown of nutritional components, such as carbohydrates, proteins, and fats, using interactive slices with hover effects that display exact values via tooltips. A legend on the right side highlights corresponding slices when hovered, dimming non-related arcs. Built with D3 v7, the chart uses the `pie` and `arc` functions to generate the layout and `scaleOrdinal` with `schemeTableau10` for colors. Transitions and opacity changes create a smooth, interactive experience for exploring the data.

Ttejasviteegala@my.unt.edu
73% match
Loading thumbnail…

Fork of Radar Analysis Test

This visualization displays nutritional data for two groups, "Before" and "After," using a multi-axis radar chart with 20 nutrient categories. The chart uses D3 v4 APIs such as `d3.lineRadial()`, `d3.curveLinearClosed`, and `d3.scaleLinear()` to draw concentric level lines, radial axes, and percentage labels. Each group is rendered as a semi-transparent, colored polygon with circles at data points, accompanied by an SVG legend. The hard-coded values, identical across both groups, suggest a template for comparing dietary intake profiles.

Bblueyjuice
73% match
Loading thumbnail…

Fork of Tree Graph

This tree visualization displays a hierarchical food categorization system, starting with a root "Food" node that branches into categories, subcategories, and individual items. The chart uses distinct geometric shapes for each depth level: circles for categories, rectangles for subcategories, and polygons for items, with a red root node. Built with d3.v7, the code constructs a hierarchical structure using `d3.stratify()` and `d3.tree()` functions, then renders the tree with `d3.linkVertical()` for connections. Labels appear above or below nodes depending on whether they have children, with the entire SVG output styled to fill the viewport.

Ssravya7136@gmail.com
73% match