Skip to main content
SimilarExport ZIP
100%

SCATTER PLOT by chaturya

✓ Published0🌍 Public
CChaturyaAkhilaPallem@my.unt.edu
Last edited Mar 17, 2024
Created on Mar 17, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

SCATTER PLOT by chaturya

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.

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
85% 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
83% 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
82% 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.

MM
81% match
Loading thumbnail…

Bar Chart-BMI

This example visualizes the Body Mass Index (BMI) of ten individuals from a CSV dataset, using a bar chart to compare each person’s BMI value. The chart shows the BMI for each name, with bars representing the numeric BMI values. The visualization is built with D3.js v7, rendering SVG elements. It uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` to display the axes. The data is loaded from the provided CSV file, and each bar’s height reflects the BMI, colored in steel blue.

CChaturyaAkhilaPallem@my.unt.edu
80% match
Loading thumbnail…

3D Scatter Plot

This example shows a 3D scatter plot comparing anthropometric measurements—height, weight, age, and body fat—from a CSV dataset. Two overlapping sets of markers display different variable combinations, with semi-transparent circles highlighting the relationships among these dimensions. The visualization uses Plotly's `scatter3d` type through the `Plotly.newPlot` API, while D3's `d3.csv` loads and parses the external data file. A custom layout removes the chart margins to maximize the plotting area.

Ssaijahnaviappineni
79% match