Skip to main content
SimilarExport ZIP
100%

D3 of Scatter Plot

✓ Published0🌍 Public
Sshabanasyed2266@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from D3 Starter

This scatter plot shows the relationship between pet age and weight, with each circle representing an individual pet. The visualization uses a D3.js v7 SVG rendering pipeline to map data points, with `d3.scaleLinear` for both axes and `d3.extent` for domain calculation. The chart includes axis labels and applies a teal fill with 0.6 opacity to the circles. Data is loaded asynchronously via `d3.csv` from a remote gist source, and the axes are generated using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusability_Scatter_Plot

This interactive scatter plot visualizes the relationship between pet age and adoption fee, with point size encoding weight. Using D3 v7 with an SVG rendering, the `scatterPlot()` function configures linear scales for both axes via `d3.scaleLinear` and a square-root scale for bubble radius. It employs `d3.scaleOrdinal` with `d3.schemeSet2` to color-code points by pet type. The chart reads a CSV from a GitHub gist, and a CSS-styled tooltip appears on mouse movement via `.on('mousemove')`, displaying pet details. Grid lines and axis labels enhance readability.

Sshabanasyed2266@gmail.com
85% match
Loading thumbnail…

D3 of Bar Chart

This bar chart displays the average weight of different pet types using a simple SVG rendering. The visualization loads CSV data with `d3.csv`, groups records by pet type with `d3.rollup`, and computes means with `d3.mean`. It builds a band scale for categories and a linear scale for values, then renders steel-blue rectangles and adds rotated axis labels. The chart includes a bold title and uses D3 v7’s selection methods to append axes and interactive hover styling.

Sshabanasyed2266@gmail.com
81% match
Loading thumbnail…

Line Chart

This line chart visualizes the relationship between pet age in months and adoption fees, using a dataset loaded from a CSV file. A blue line connects data points sorted by age, with orange circular dots marking each observation. Built with D3 v7, the chart uses SVG rendering and d3.csv for data loading, with d3.line generating the path and d3.scaleLinear mapping both axes. Interactive tooltips appear on mouseover via event listeners, displaying the precise age and fee for each dot. Axis labels clarify the variables, and the visualization includes a light gray background grid through SVG styling.

Sshabanasyed2266@gmail.com
80% match
Loading thumbnail…

D3 Bar+Line Chart

This multi-series line chart visualizes pet adoption data, plotting age against weight, adoption fee, and shelter time to show relative trends. The code uses D3.js v7 with an SVG canvas, scaling data via `d3.scaleLinear` and rendering lines with the `d3.line` generator. Data is fetched from a GitHub raw text file, with each series color-coded and labeled through a legend. The chart includes bottom and left axes with `d3.axisBottom` and `d3.axisLeft`, scaled for comparability.

Sshabanasyed2266@gmail.com
80% match
Loading thumbnail…

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`.

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

Area Chart

This area chart visualizes the relationship between pet age in months and adoption fees in dollars, using a blue-filled area with orange hover dots. The dataset is loaded from a CSV file via `d3.csv`, and both quantitative scales are linear. The chart is rendered as SVG using D3 v7, with the `d3.area()` generator defining the region between the baseline and the data points. Interactive tooltips appear on mouse movement using D3 event handlers and the `d3.select` API, while axes are appended via `d3.axisBottom` and `d3.axisLeft`.

Sshabanasyed2266@gmail.com
78% match
Loading thumbnail…

Activity6_task3_3

This scatter plot visualizes the relationship between age and weight from a synthetic health dataset. The visualization encodes each data point as a circle, with position determined by age on the x-axis and weight on the y-axis. The chart uses d3.scaleLinear for both axes and d3.axisBottom/axisLeft to render tick marks. The code colors points based on gender using d3.scaleOrdinal and includes a shapeLegend function that displays the color mapping. The data is loaded via d3.csv from a GitHub-hosted CSV file and rendered as SVG elements.

Vvemurisuchitha@gmail.com
78% match
Loading thumbnail…

Scatterplot of CDC Dataset describing Age (in Years) vs. Weight (in Pounds)

This D3.js scatterplot visualizes the relationship between age (in years) and weight (in pounds) using CDC health data. The plot encodes each individual as a circle, with x-coordinates representing age and y-coordinates representing weight, using linear scales for both axes. The visualization employs D3's `csv` loader to parse the remote dataset, `select` to manage the SVG container, and `scaleLinear` to map data values to screen coordinates. The code constructs the chart with `axisLeft` and `axisBottom`, and renders all data points as SVG circles.

RRidhima Saxena
78% match