Fork of Dumbbell Chart

100%

Fork of Dumbbell Chart

✓ Published0🌍 Public

Last edited Nov 27, 2021

Created on Nov 27, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Dumbbell Chart

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.

WWaseem Medhat

90% match

Loading thumbnail…

Fork of Fork of ICE5 - chaturya d3.js parsing

This example shows a dual-panel bar chart comparing BMI values against height and weight measurements for individuals in a BMI dataset. The left panel displays BMI as a single green bar per person, while the right panel splits each category into orange (height) and blue (weight) bars using a grouped bar layout. The visualization uses React with hooks to manage data loading via `d3.csv`, and D3 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render the SVG marks. Data is parsed from a remote CSV file, with margins and rounded bar corners adding polish to the chart.

75% match

Loading thumbnail…

Fork of Fork of ICE5 - chaturya d3.js parsing

This example shows a BMI bar chart with two side-by-side graphs: one displaying BMI values per person, and another comparing Height and Weight as grouped bars. The visualization uses React for component structure and D3 v5 for data parsing via `d3.csv` and scales (`scaleBand`, `scaleLinear`). A CSV from GitHub Gist provides the dataset, which is loaded asynchronously and rendered as SVG with rounded rects, rotated axis labels, and custom axis text.

Rrobertotienonyaranga@gmail.com

74% match

Loading thumbnail…

Fork of Fork of Bar graph-task1

This visualization presents a bar chart of heart disease data, with bars depicting physical health scores for various categories. The chart uses a red grid and axis ticks, and the data is loaded from a CSV file using d3.csv. Built with React, the App component renders an SVG using d3.scaleBand and d3.scaleLinear to map data to positions. Additionally, the code includes a 3D scatter plot created with Plotly, plotting heart disease against smoking and diabetic status, though this chart is not displayed in the main view.

Cchandanagandla

74% match

Loading thumbnail…

Fork of Radar Analysis Test

This visualization displays nutritional data for two groups, "Before" and "After," using a multi-axis radar chart with 20 nutrient categories. The chart uses D3 v4 APIs such as `d3.lineRadial()`, `d3.curveLinearClosed`, and `d3.scaleLinear()` to draw concentric level lines, radial axes, and percentage labels. Each group is rendered as a semi-transparent, colored polygon with circles at data points, accompanied by an SVG legend. The hard-coded values, identical across both groups, suggest a template for comparing dietary intake profiles.

Bblueyjuice

73% 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

73% match

Loading thumbnail…

Fork of Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

This interactive bar chart visualizes the relationship between alcohol consumption and life expectancy across continents, colored by year using an interactive color legend. Hovering a legend entry highlights the corresponding year’s data while dimming others; a tooltip summarizes the correlation for that year. Built with D3 v3, it uses `d3.nest`, `d3.layout.stack`, `d3.scale.ordinal`, `d3.legend.color`, and `d3-tip` for tooltips. Data comes from a CSV file, rendered as SVG with animated transitions.

Aall-over-yet

73% match

Loading thumbnail…

Fork of ICE5 - chaturya d3.js parsing

This example presents a dual-panel bar chart comparing BMI and height-weight data for individuals. The left panel shows a single bar per person representing BMI, while the right panel displays paired bars for height and weight. Data is loaded from a remote CSV file using `d3.csv`. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axes, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The React component manages state with `useState` and `useEffect`, and output is rendered as SVG.

CChaturyaAkhilaPallem@my.unt.edu

72% match