Body with Organs

100%

Body with Organs

✓ Published1🌍 Public

Last edited Apr 21, 2024

Created on Feb 28, 2024

This interactive visualization displays a human body silhouette with clickable and hoverable internal organs. Using D3.js, the body outline and individual organs are drawn as SVG paths from the provided bodyData, with organ opacity responding to user selection and hovering. A custom legend component supports toggling organs on and off, while clicked organs remain highlighted and non-selected organs fade to 20% opacity. The data paths are sourced from SVG Viewer, and the chart is implemented in a reusable JavaScript module under the MIT license.

AI-generated description

Body with organs.

Paths retrieved from [https://www.svgviewer.dev].

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter with Body Selector

This scatterplot-style interactive body map uses D3.js to render SVG paths of human organs loaded from an external path dataset. Users can select two organs via a custom legend, triggering a dimming effect that highlights only the selected body parts while fading the rest, with hover interactions providing additional focus. The body outline and organs are drawn as SVG paths, with transformations for positioning and rotation, and the legend enables multi-select comparison across anatomical regions.

Sssmadha@hotmail.com

85% match

Loading thumbnail…

datandata

An SVG line drawing of a human body uses colored strokes to outline organs: a red brain and heart, blue lungs, a green stomach, and purple intestines. The static vector shapes are rendered directly in the HTML, with CSS animation rules (`stroke-dasharray`, `stroke-dashoffset`, and `@keyframes`) defined but not applied to any elements in the markup. The example demonstrates basic SVG path and shape composition without JavaScript or external libraries.

Ccolbygogan

72% match

Loading thumbnail…

Fork of HTML Starter

This interactive D3.js visualization displays a labeled diagram of the human brain, with nine major regions color-coded and rendered as SVG paths. Hovering over any region triggers an information panel that describes its function, while a legend at the bottom maps colors to structure names. The visualization uses D3 v7 to draw the anatomical paths and manage the interactive hover behaviors, with the brain region data defined in the JavaScript file `brain.js`.

NNita

69% match

Loading thumbnail…

Medical Data Tree CURRENT FINAL

This interactive visualization presents a hierarchical tree of medical data, allowing users to click on nodes to expand and collapse branches or navigate to a new root. The tree is rendered using SVG with smooth animated transitions, utilizing d3.v6's layout and transition APIs. Node positions and link paths are updated dynamically, with circle sizes reflecting the number of children. Data originates from a JSON file, and node descriptions are categorized into medical topics like diseases and treatments, with a clickable info panel displaying node names and keys.

QQuinn Sebso

68% match

Loading thumbnail…

org chart

This org chart visualizes a small hierarchical team structure using D3.js v4. It shows a collapsible tree where clicking a node toggles its children in and out of view, with smooth transitions on expand and collapse. The chart renders nodes as rectangles connected by vertical curved links, using `d3.tree()` with custom node spacing and `d3.linkVertical()` for the paths. The data originates from a hardcoded JavaScript object representing staff relationships. A zoom transform is applied via `d3.zoom()`, allowing pan and scale gestures on the SVG container.

DDlanka

67% match

Loading thumbnail…

Data Visualization

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

Hharika-1929

67% match

Loading thumbnail…

D3 Org Chart Example

This D3.js org chart visualizes a small organizational hierarchy as an animated tree. Built with D3 v3 and rendered as SVG, it loads a JSON dataset describing a manager and direct reports. Nodes are initially collapsed to their first level and expand on click with a 750ms transition. The layout uses a standard tree with curved diagonal links, fixed node depth, and distinct styling: white circles with steelblue strokes for leaf nodes, lightsteelblue for expanded parents, and left-aligned or right-aligned text based on whether a node has children. The interaction supports progressive disclosure, expanding and collapsing branches on demand.

DDesaiNikul

66% match

Loading thumbnail…

Final Circle Packing

This interactive circle packing visualization renders a hierarchical medical dataset using D3.js v4, fetching JSON data from external URLs. The visualization displays nested circles colored along a linear hue scale, where users can search for specific nodes via an autocomplete search bar. The code uses `d3.hierarchy` and `d3.pack` for layout computation, with SVG circles representing hierarchy levels. Clicking a node displays its ancestor path, while hover states highlight nodes. The implementation includes a tooltip system for additional node information, all rendered through D3's selection and rendering API within an SVG container.

QQuinn Sebso

65% match