Skip to main content
SimilarExport ZIP
100%

Scatter with Body Selector

✓ Published0🌍 Public
Sssmadha@hotmail.com
Last edited Apr 23, 2024
Created on Mar 11, 2024
Forked from Body with Organs

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.

AI-generated description

Body with organs.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Body with Organs

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.

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
69% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot cycles through three blood-related measurements from a medical dataset, displaying a different x-axis variable every two seconds. The visualization uses D3 v6 with a reusable chart module that maps data points to circles, scaling positions with linear axes. It animates by calling a custom `scatterPlot` function with different accessor functions, updating the chart in place. The plot reads CSV data from a remote gist, and the axes are rendered with `axisLeft` and `axisBottom`. The circular markers transition smoothly between states, demonstrating a flexible, data-driven approach to multi-variable exploration.

Hharichandanamone21@gmail.com
69% match
Loading thumbnail…

ScatterPlot

This scatterplot uses D3 to display a set of points on an SVG canvas, with axes drawn via a linear scale. The code defines explicit margins and dimensions, then appends an SVG group to position the plot area. Each data point is rendered as a circle, though the dataset itself is not included in the visible code. The visualization focuses on showing the distribution of values across the x and y coordinates, with no additional encoding beyond position. The implementation relies on D3’s selection and scale APIs, following a standard margin-based layout pattern.

BBerengerCunillera
68% match
Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes heart disease data from the UCI Machine Learning Repository, allowing users to explore correlations between numeric attributes like age, cholesterol, and blood pressure. Dropdown menus let viewers select which columns map to the X and Y axes. The visualization is built using D3 v5, with `scaleLinear` for scaling axes, `axisLeft` and `axisBottom` for gridlines, and animated circle transitions via `transition().duration(2000)` with staggered delays. SVG rendering displays semi-transparent red circles, while axis labels and tick marks are styled through CSS.

AAshtone Onyango
68% match
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes cancer mortality trends in the USA, cycling through liver, breast, and prostate cancer datasets. Built with D3 v6 as a reusable chart, it animates between cancer types every 3 seconds, updating the y-axis and point symbols (star, square, circle) accordingly. The chart leverages SVG rendering and custom symbol mappings to distinguish cancer types, with axes and margins configured for readability.

Bbhavana.bayyapu@gmail.com
68% match
Loading thumbnail…

Scatterplot Transplant Data

A scatterplot displays the relationship between the number of deceased and living organ donors across US hospitals, with each circle representing a hospital and hovering reveals its name. The visualization uses React with D3 v6 for data loading and scales, specifically `d3.csv` to fetch the kidney transplant dataset and `scaleLinear` for both axes. SVG rendering handles the marks and axes, with gridlines drawn from `d3.ticks()` through custom `AxisBottom` and `AxisLeft` components. The chart encodes the two donor categories on separate linear scales, with axes labeled accordingly.

GGary Ditsch
68% match
Loading thumbnail…

scatter

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

EEranM6
67% match