SCATTER PLOT 2

Last edited Mar 26, 2024

Created on Mar 25, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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.

86% match

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.

85% match

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.

85% match

MMeghanaChowdaryVelaga@my.unt.edu

SCATTER PLOT 11703795

This scatter plot displays the relationship between age and weight using a reusable function pattern. The visualization renders steelblue circles with 70% opacity on an SVG canvas, with axes labeled "Age" and "Weight." Built with D3 v7, the code defines a `scatterPlot` factory function that supports configurable width, height, data, and accessor methods. It uses `d3.scaleLinear` for both x and y scales, `d3.axisBottom` and `d3.axisLeft` for the axes, and loads data from a CSV file hosted on GitHub Gist via `d3.csv`.

85% match

Question3

This scatter plot visualizes the relationship between height and weight, with data points colored by category (A, B, or other). The visualization uses a D3.js (v7) SVG rendering pipeline, reading a CSV dataset of weights and heights. The code leverages several D3 APIs, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and `d3.select` to build the chart, with axis labels styled via CSS and rendered as SVG text elements.

Gganesh.hns48@gmail.com

D3 Scatter Plot H/W finalised

This scatter plot visualizes the relationship between height and weight for individuals ranging from newborns to over 20 years old, using a self-generated dataset stored as a CSV on GitHub. The SVG rendering uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to map the data points, with each circle representing a single observation. Hovering over a point transitions its fill to orange, while the axes include labeled weight and height scales. The chart is styled with the Share Tech font and positioned using absolute CSS elements.

CChawin Sungwalngern

Vvishnupriyapalagiri@gmail.com

Activity8_Question3

This scatter plot visualizes the relationship between height and weight, with points colored by category to reveal grouping patterns. The visualization renders as an SVG generated with D3.js v7, using `d3.csv` to load data from a remote GitHub repository and `d3.scaleLinear` for axis scaling. Points are drawn as SVG circles and colored via `d3.scaleOrdinal`, with interactive tooltips appearing on mouseover. The chart includes axes and a legend created through custom drawing functions, all styled through a separate CSS file.

Ssudheervnarasimha1@gmail.com

activity6task3q1

This scatter plot visualizes the relationships between height and weight in a small dataset, with points colored blue for males and pink for females. The visualization uses D3 v6 and renders as an SVG, loading data from a CSV file. It uses `scaleLinear` for both axes, `extent` to calculate domains, and `axisLeft` and `axisBottom` to draw the axes. The plot is displayed full-screen, with circles positioned according to the scaled data values.