Untitled

100%

✓ Published0🌍 Public

Last edited Jun 22, 2023

Created on Jun 22, 2023

This example shows a scatter plot of the relationship between weight and height for a small dataset of twelve individuals, with each point rendered as a steelblue circle. A linear regression line is not drawn, but axes are customized with tick formats that append units. The visualization uses D3 v6 to create an SVG, with linear scales mapping data to pixel coordinates, and d3.axisBottom and d3.axisLeft for the axes. Data is hardcoded in the script, and gridlines are styled via tick line selection.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

81% match

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar

79% match

Loading thumbnail…

Height vs. Weight Scatterplot

This scatterplot visualizes the relationship between height (in centimeters) and weight (in kilograms) for six individuals. It uses D3.js v6 to render an SVG chart with a linear scale for each axis, including axis labels. The data is embedded as a CSV string and parsed with `d3.csvParse`. Circles are positioned using `d3.scaleLinear` and appended via `selectAll().data().enter().append()`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

VVenkat-Sumith-Thota

79% match

Loading thumbnail…

Untitled

A line chart visualizes a dataset of 13 coordinate pairs, plotting dependent values against independent variables across a 500x400 SVG canvas. The example uses D3 v4 within a React framework to construct a linear chart with labeled axes, a title, and red circular markers. The code specifically employs `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for ticks, and a custom line generator via `d3.line` with monotone curve smoothing to connect the data points. The visualization is rendered entirely as SVG elements, with fixed margins and translated groups for positioning.

Nnamansinghal1420

78% match

Loading thumbnail…

ice 7 a

This interactive scatter plot visualizes the relationship between height and weight for individuals, with each dot colored by name and tooltips revealing age and gender on hover. It uses D3.js v7 (d3.scaleOrdinal, d3.axisBottom, d3.axisLeft) to render an SVG chart with a separate legend and animated tooltip transitions, pulling data from a CSV file loaded via d3.csv. The visualization includes labeled axes and a categorical color scheme to distinguish data points.

RRakesh Kumar Chekuri

78% match

Loading thumbnail…

my scatter plot

This scatter plot visualizes the relationship between weight and height for 500 individuals, with points colored by gender (orange for female, teal for male) based on data from a Kaggle CSV file. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to map the quantitative axes, rendering SVG circles with a radius of 5 pixels. Axis grid lines and text labels are styled via CSS, while the chart displays “PESO (g)” on the x-axis and “ALTURA (cm)” on the y-axis.

JJefferson Abreu

78% match

Loading thumbnail…

Untitled

A scatter plot displays 100 randomly generated points within a fixed coordinate space. Each point is rendered as a red circle on an SVG canvas, with axes labeled from 0 to 500. The visualization uses D3 v4’s `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` to draw the axes, and appends circles via `selectAll` and `enter`. The data is synthetic, created with `Math.random` in a loop.

Ssaipaidipalli

78% match

Loading thumbnail…

My Own Scatter Plot

A scatter plot displays the relationship between item weight and item rate from a CSV file, with each circle representing a data point. The SVG visualization uses d3.scaleLinear for both axes, d3.extent to set domains, and d3.axisBottom and d3.axisLeft to render ticks with grid lines. Circles are appended to a group element with fixed radius and steelblue fill, while axis labels and a title are added via d3.append. The d3.csv function loads the data and parses values as numbers for rendering.

BBaraneedharan N M

78% match