Creating Tree With Fitness Data Set

100%

Creating Tree With Fitness Data Set

✓ Published1🌍 Public

Last edited Apr 7, 2025

Created on Apr 7, 2025

This visualization presents a fitness journey as a branching tree, with categories like Nutrition, Workouts, and Progress stemming from a central root. The SVG illustration includes a scenic background with animated clouds, a golden Buddha figure, and a recursively drawn tree. The tree structure is built using the `d3.stratify()` and `d3.tree()` APIs from d3.v7, while React components manage the scene. Rendering uses SVG elements with animation for the drifting clouds, and the fitness data is hardcoded within the script.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

tree latha bemanadham

This visualization depicts a serene landscape with a golden Buddha statue seated beneath a recursively branching tree, set against an animated sky with drifting clouds. The scene is rendered as an SVG using React components, with the tree’s fractal structure built through a recursive `drawBranch` function that adjusts branch length and angle with each depth level. A separate D3.js tree diagram using `d3.stratify` and `d3.tree()` lays out a fitness journey hierarchy with colored nodes and labels. Cloud movement is driven by a React `useState` and `useEffect` timer that updates horizontal offsets, creating continuous motion across the gradient background.

Llathabemanadham@my.unt.edu

78% match

Loading thumbnail…

q1

This visualization combines two distinct scenes: a serene landscape with a golden Buddha statue, a recursive tree, and animated clouds, alongside a hierarchical tree diagram of diabetes data. The landscape uses React components to render SVG elements, with clouds animating across the sky via `setInterval` and offset states. The tree employs recursive branch drawing, while the data tree uses D3's `d3.hierarchy` and `d3.tree` APIs to display the dataset, with nodes colored by outcome and glucose levels.

Nnagalakshmibadineedi2@gmail.com

77% match

Loading thumbnail…

Family Tree

This visualization displays a family tree using D3.js v5 within a React framework, rendering nodes and links as SVG elements. The tree structure is built from a flat data list via `d3.stratify()` and laid out with `d3.tree()`, with each family member represented as a colored circle and labeled with their name. Node colors vary by hierarchical depth, using a `marker()` function that assigns a distinct color to each level. Curved connecting paths are drawn using cubic Bezier commands in the `d` attribute, while `text` elements label each descendant.

Ssudhamshu24

75% match

Loading thumbnail…

Fork of React & D3 Starter

This visualization combines bars and lines to compare daily fitness metrics—calories burned, steps walked, and active minutes—across 150 days. It shows all three trends on a single SVG chart, with steps scaled down to fit the axis. The code uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `d3.line` to render the chart, while React handles the page setup. Data comes from a CSV file loaded via `d3.csv`, and the rendering uses SVG elements like `rect` and `path`.

Kkarthikpavan1198@gmail.com

75% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

75% match

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This visualization displays a static tree diagram of vehicle categories, showing the hierarchical relationships between land, air, and water vehicles. The layout uses D3’s `d3.hierarchy` and `d3.tree` APIs to position nodes in a branching structure (svg.attr-encoded). Nodes are rendered as circles (`circle`), colored by depth (red for root, green for categories, blue for leaves), with connecting lines and text labels. The code is embedded in an HTML file using D3 v7’s `.select()`, `.enter()`, and `.append()` methods, while the accompanying `index.jsx` uses React to render a simple text message, though the diagram itself relies on the SVG API.

SSanjayRamaSwamyAdla@my.unt.edu

75% match

Loading thumbnail…

Fork of Tree

This example presents a branching tree visualization built with D3.js v6. The code uses `d3.stratify()` to structure a dataset of named parent-child relationships into a hierarchy, then `d3.tree().size()` to compute the node positions. The animation, rendered as SVG, reveals the tree structure by initially drawing each connection as a zero-length path from the source node, then transitioning it over one second to its full line. Node labels appear sequentially using `transition().duration(d => 100 + d.depth*1000)`, creating a cascading effect where labels near the root appear before those at deeper levels. The circular nodes use a red stroke with white fill.

Bbindhureddy98

75% match

Loading thumbnail…

Fork of HTML Starter

This interactive tree chart visualizes a hierarchy of physical activity levels across demographic categories. The radial layout displays branches for gender, age, and activity rating, with distinct colors and shapes distinguishing each level. Built with D3.js version 3, the visualization uses the `d3.layout.tree` API to position nodes and `d3.svg.diagonal` for connecting links. The SVG rendering includes clickable nodes and a color-coded legend, with data structured as nested JSON objects within the HTML page.

Mmounishnaidu96@gmail.com

75% match