Dumbbell Chart

100%

Dumbbell Chart

✓ Published2🌍 Public

Last edited Oct 23, 2020

Created on Oct 23, 2020

This interactive scatterplot depicts alcohol consumption levels for 15 patients before and after a study, using dumbbell-style connected circles to highlight individual change. Each patient’s ID is plotted along the x-axis using `d3.scalePoint`, while alcohol measurements are mapped to the y-axis with `d3.scaleLinear`. The visualization is built with React components and rendered as SVG, employing D3’s `csv` loader for data parsing and custom `Marks` and `Lines` components to draw the paired circles and connecting lines.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Dumbbell Chart

The chart compares alcohol consumption before and after an intervention for individual patients, with paired circles connected by vertical lines. It uses React components for rendering SVG marks, axes, and grid lines, while D3 v6 utilities such as `scaleLinear`, `scalePoint`, and `extent` handle scaling and domain calculation. Data is loaded asynchronously from a CSV URL via `d3.csv` and filtered to 15 patients. The visualization employs a dumbbell chart layout to highlight changes per patient, with green and orange circles representing before and after values respectively.

Bblueyjuice

90% match

Loading thumbnail…

Fork of Interactive Color Legend Scatterplot to determine Alcohol consumption Vs Life Expectancy

This interactive scatterplot visualizes the relationship between alcohol consumption and life expectancy across continents using data from a CSV file. Points are colored by continent, with an interactive color legend that highlights one continent at a time while fading others. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering, with mouse events on the `ColorLegend` component triggering the hover filtering.

Aaniosindustries

75% match

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays per-capita liters of pure alcohol consumption by country, with values shown via colored bars and a formatted x-axis. Built with React and D3 v5, it loads CSV data from a GitHub gist, uses d3.scaleBand and d3.scaleLinear for positioning, and renders SVG marks. d3.format abbreviates large numbers.

SSamir Nandardhane

75% match

Loading thumbnail…

Interactive Color Legend Scatterplot to determine Alcohol consumption Vs Life Expectancy

This interactive scatterplot visualizes the relationship between alcohol consumption and life expectancy across continents using WHO life expectancy data. The visualization employs d3.scaleLinear for both axes and d3.scaleOrdinal for the color legend, which maps continents to distinct colors. Users can hover over legend items to highlight data points from specific continents while fading others to 20% opacity. The React-based SVG rendering includes custom axis components and color legend handling, with interactive hover states managed through React state and d3 event handlers.

Aaishwarya8615

75% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows alcohol consumption by country using a horizontal bar chart, with the top 25 countries sorted by liters consumed. The visualization is built with React and D3, where the D3 scales `scaleBand` and `scaleLinear` map country names and consumption values to screen positions. SVG rectangles render the bars, while D3's `axisLeft` and `axisBottom` utilities generate tick lines and labels. Data is loaded from a CSV file fetched via D3's `csv` function, and the entire chart is rendered inside a single SVG element managed by React's declarative markup.

AAli Shah Solanki

74% match

Loading thumbnail…

Scatterplot to determine Alcohol consumption Vs Life Expectancy

This scatterplot visualizes the relationship between alcohol consumption and life expectancy across countries, with each point colored by continent. Built with React and D3 v5, the visualization renders as an SVG and includes interactive highlighting in the color legend that filters the data points. The CSV data is loaded from a GitHub gist using D3’s `csv` function. Axis tick marks, labels, and the legend are generated by custom React components using `scaleLinear` and `scaleOrdinal` scales.

SSharankumar02

73% match

Loading thumbnail…

A5 Bubble Plot (D3)

This bubble plot visualizes alcohol and tobacco usage across U.S. states, with circle size encoding population and color intensity representing alcohol use rates per 1000 people. Built with D3 v7, it uses `d3.scaleLinear` for position, radius, and color mapping, plus SVG circles with `title` elements for hover tooltips. The chart loads CSV data from a GitHub gist and displays axes with custom tick formatting, along with descriptive legends and labels.

NNoah C.

73% match

Loading thumbnail…

Global Alcohol Consumption Scatterplot

This scatterplot shows per capita alcohol consumption in liters for seven selected countries from 2010 to 2019, with each country assigned a distinct color. The visualization uses D3 v6’s `scaleTime` and `scaleLinear` to map years and consumption values to SVG circle positions, with axes rendered via `axisLeft` and `axisBottom`. Data comes from a WHO-derived CSV loaded with `d3.csv`, filtered to highlight trends in wine, beer, spirits, and total alcohol across the decade.

PPeter VanNostrand

73% match