SCATTER PLOT by chaturya

100%

SCATTER PLOT by chaturya

✓ Published0🌍 Public

CChaturyaAkhilaPallem@my.unt.edu

Last edited Mar 17, 2024

Created on Mar 17, 2024

Forked from Fork of ICE5 - chaturya d3.js parsing

This dual-panel chart compares BMI against height and weight across individuals using a bar chart layout. The left panel displays BMI values as green bars, while the right panel shows height and weight as paired orange and blue bars, respectively. Built with React and D3, the visualization uses `scaleBand` and `scaleLinear` for axes, with `csv` loading data from a GitHub-hosted BMI dataset. Custom axis groups rotate x-axis labels for readability, and rounded bar corners add polish. The SVG rendering clearly contrasts the three metrics, though the title in the provided code does not match the requested scatter plot description.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SCATTER PLOT by chaturya

The visualization displays a dual-panel bar chart comparing BMI alongside height and weight measurements for individuals loaded from a CSV dataset. The left panel renders BMI values as a single set of rounded bars, while the right panel shows grouped bars for height and weight side by side. Built with React and D3 v5, it uses `d3.csv` to parse the data, `scaleBand` and `scaleLinear` to map categorical names and continuous values, and `axisBottom`/`axisLeft` to generate axes. The chart encodes the quantitative channels through bar lengths, with distinct colors differentiating height and weight in the second panel.

CChaturyaAkhilaPallem@my.unt.edu

96% match

Loading thumbnail…

SCATTER PLOT 2

This scatter plot visualizes the relationship between height and weight, with each point colored steelblue and displaying BMI details on hover via a tooltip. Built with D3.js v7, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to map the quantitative axes, with circles representing data points. The SVG rendering includes axis titles and a 24px plot title, while interactive mouseover events update a positioned tooltip div. The reusable `createScatterPlot` function demonstrates a modular approach to chart construction.

CChaturyaAkhilaPallem@my.unt.edu

86% match

Loading thumbnail…

SCATTER PLOT

A scatter plot displays the relationship between height and weight, with each point colored by BMI using the Viridis color scale and a colorbar legend. The code fetches a CSV dataset from a GitHub gist and parses it with PapaParse, then maps the Height (cm), Weight (kg), and BMI columns to create a Plotly.js trace. The plot is rendered in a div with the ID “scatter-plot” using `Plotly.newPlot`, specifying axis titles and a chart title. This example demonstrates how to load external data and create an interactive, color-encoded scatter plot with minimal configuration.

CChaturyaAkhilaPallem@my.unt.edu

84% match

Loading thumbnail…

my p1

This visualization presents a dual-panel bar chart comparing BMI, height, and weight for individuals from a BMI dataset. The left panel displays BMI values as rounded teal bars, while the right panel shows paired orange and blue bars for height and weight, respectively, using a grouped layout. The chart uses React state to load and parse CSV data with D3’s `csv` function, converting string fields to numbers. Axes are rendered via `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, with rotated labels and descriptive titles, all drawn as SVG elements within a React component.

Ssaideep1612@gmail.com

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

81% 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.

81% match

Loading thumbnail…

People BMI 3D Scatter Plot

This example displays a 3D scatter plot of people’s Body Mass Index (BMI) using height, weight, and index values loaded from a CSV file. The plot renders pink elliptical markers in three-dimensional space, with axis titles for Height, Weight, and Index styled in brown. It uses the Plotly `scatter3d` trace type via `Plotly.newPlot` to draw the visualization, while D3’s `csv` function handles data loading and parsing. The layout configuration sets margins and custom axis title fonts.

RRupeshGandham

80% match

Loading thumbnail…

Physical Health vs BMI Scatter Plot

This scatter plot visualizes the relationship between physical health and body mass index (BMI) using a dataset from Heart2020Cleaned.csv. Each blue circle with a black stroke represents an individual data point, with BMI mapped to the x-axis and PhysicalHealth to the y-axis. The visualization uses d3.v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while circles are appended to an SVG via `selectAll` and `enter`. The code, written in plain JavaScript, also makes use of D3’s `csv` function for asynchronous data loading.

Cchandanagandla

80% match