Fork of Muscles

100%

Fork of Muscles

✓ Published0🌍 Public

Last edited Dec 31, 2020

Created on Dec 31, 2020

Forked from Muscles

This visualization adapts an SVG muscle diagram from the Army Combat Fitness Test to track which muscle groups have been recently exercised. It shows a front-view body with highlighted regions representing activity, designed for a fitness app where workouts target specific muscles and visualizations fade over time. The code loads existing SVG paths from the original diagram, recolors them to black, and appends them to the page. All rendering uses raw SVG elements and inline path data, with no external libraries or JavaScript APIs beyond standard HTML document manipulation.

AI-generated description

Initial explorations of a muscle diagram SVG found at https://www.army.mil/acft/ .

The idea is to build a fitness app that lets you "hit" certain muscle groups, then visualize what muscle groups you "hit" recently. They will fade over time, so you can check what muscles you're best off "hitting" next!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Muscles

This interactive fitness visualization presents a human muscle diagram derived from an SVG found on the Army Combat Fitness Test website, with the goal of tracking recently worked muscle groups. Users can select muscles to "hit" them, and those selections fade over time to reveal which areas are best targeted next. The example renders its static SVG paths directly using the `d3.select` API, while the fading effect would rely on `transition.attrTween` to manipulate opacity. The original SVG paths are embedded in the HTML, providing the anatomical base for the application.

AAdan Rodriguez

92% match

Loading thumbnail…

Fork of Muscles

A humanlike muscle diagram rendered as layered SVG paths visualizes a fitness tracker concept. Black silhouettes contrast with grey-filled regions to distinguish muscle groups, sourced from an Army Combat Fitness Test figure. The paths define precise anatomical shapes, while the project's intention is to show recently "hit" muscles that fade over time, guiding future workouts. The raw SVG path data and README outline this interactive training visualization idea.

CComplicated Phenomenon

91% match

Loading thumbnail…

Muscles

This visualization displays a human anatomy diagram with muscle groups highlighted, showing a fitness tracking interface concept. The SVG rendering uses vector paths from an Army Combat Fitness Test resource to delineate individual muscles on the body. Filled black shapes delineate the primary muscle groups, while a lighter gray fill indicates secondary areas. The code contains raw SVG path data with embedded coordinate commands, suggesting an exploration into how different muscle regions might be visually selected and tracked for workout intensity over time, though no interactive functionality is yet implemented.

CCurran Kelleher

86% match

Loading thumbnail…

Fork test

This example displays a set of static geometric shapes composed of paths and rectangles rendered as SVG. The visualization uses plain HTML, CSS, and JavaScript, with CSS transitions applied to rectangles that change color and stroke width on hover. The layout shows a large outlined container with smaller filled blocks in orange, green, gray, and blue, using SVG elements like `<path>` and `<rect>` directly in the markup. It demonstrates basic SVG styling and interactivity without any external data or charting libraries.

Zzaioris

70% match

Loading thumbnail…

Lifting Log v6

This visualization plots personal exercise activities over time as a dot matrix, showing which muscles were worked on each day for the past 24 days. Black circles represent executed workouts, while white circles with black outlines indicate planned exercises. The horizontal axis shows dates, and the vertical axis groups activities by muscle category, with dashed lines highlighting gaps since each muscle was last exercised. Built with D3 v6, it uses scalePoint and scaleTime for axes, group for data aggregation, and SVG circles and lines for rendering.

CCurran Kelleher

70% match

Loading thumbnail…

Lifting Log v7

This interactive exercise log visualizes the user's gym activity over the past 24 days, plotting each workout as a circle on a grid of dates and muscle groups. Planned workouts appear as hollow circles, while executed ones are filled, with black lines connecting each muscle's last session to the present to highlight recovery gaps. The chart uses D3 v6 scales and axes for the timeline and a hierarchical tree layout to group muscles into activity categories. The data comes from `data.csv`, and the view updates automatically based on the latest entry.

CCurran Kelleher

69% match

Loading thumbnail…

Fork of MuscleCars tree

This fork displays a hierarchical tree of muscle cars organized by manufacturer, using D3 v3’s `d3.layout.tree` with SVG rendering and animated node transitions. The visualization reads hierarchical JSON data and encodes each node’s type with a distinct fill color (grey, blue, red, orange). Interactive zooming and dragging are enabled via `d3.behavior.zoom`, and node clicks collapse or expand subtrees. The code also defines custom link paths with arrow markers and tooltips, while collision detection and breadth-first traversal position nodes without overlap.

BBhavanaGIrni

69% match

Loading thumbnail…

Fork of Fork test 2

This visualization displays a set of geometric shapes, including paths and rectangles, arranged in a static composition. The SVG elements use a defined color palette and some rectangles have hover effects, while a JavaScript script dynamically generates and appends an additional 100 horizontal rectangles, which overlay the existing shapes to create a striped pattern. The page is built with raw HTML, CSS, and JavaScript, using the React framework for the project structure, and renders entirely as SVG.

Zzaioris

68% match