chart 1

100%

✓ Published1🌍 Public

Last edited Apr 6, 2025

Created on Apr 6, 2025

An interactive scatter plot maps workers' ages against their wages for a small dataset. Each point, rendered as a circle with a color scale based on wage, is drawn using `d3.scaleLinear` for axes and `d3.scaleSequential` with `d3.interpolateCool` for color. The visualization, built with D3 v7, includes SVG axes and tooltips; hovering enlarges a dot and displays its values, while clicking triggers an alert. The animation uses D3's `.transition()` for size changes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of chart 2

This interactive scatter plot visualizes the relationship between wage and potential ratings, with each circle representing a data point colored by wage value. The visualization includes hover tooltips displaying exact values, click interactions that enlarge points and show details, and buttons to reset the zoom or filter for potential values above 70. The chart uses D3 v7 with d3.scaleLinear for axes, d3.scaleSequential with the Viridis interpolator for colors, and d3.select transitions for smooth animations. Data loads from a CSV file into SVG circles rendered on a white background.

Ssriharshithaanugu5@gmail.com

82% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between age and monthly income for employees in a dataset loaded from a CSV file. Each circle represents an employee, with position determined by the `d3.scaleLinear` scales for age and income. Hovering reveals a tooltip with exact values. The visualization uses D3 v7 to append SVG circles, axes, and labels, with data parsed from a remote CSV source.

TTejasriKari@my.unt.edu

79% match

Loading thumbnail…

Activity-6_Question-3

This interactive scatter plot visualizes relationships between age and salary from a gender-based occupations dataset. Points are color-coded by gender (blue for male, pink for female, orange for other), and hovering reveals tooltips with the exact age, gender, and salary values. Built with D3 v6, the visualization uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and appends circles to the SVG with `selectAll('circle').data(data).enter()`. The plot includes labeled axes for "Age" and "Salary" with green, bold formatting.

Aabdul.khader2899@gmail.com

78% match

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes average wages across different countries for the year 2021, with each dot representing a nation’s wage value. The visualization uses D3.js v7 to render SVG elements, employing a linear x-scale for wage amounts and a point y-scale for country names. Data is loaded from a CSV file via `d3.csv`, then mapped to circle positions using the scales. The chart includes labeled axes for country and average wage, with hover effects changing dot color to orange.

Nnagasai.mandalapu@gmail.com

78% match

Loading thumbnail…

Task-7 Q3

A scatter plot maps income against age for a jobs and salary dataset, with points colored by gender using D3's `scaleOrdinal` and `schemeCategory10`. The visualization loads CSV data via `d3.csv`, applies linear scales (`scaleLinear`) for both axes, and renders circles in an SVG container. Axes are generated with `axisLeft` and `axisBottom`, while labels for "Income" and "Age" are added as rotated and positioned text elements. The chart uses D3 v6 loaded from UNPKG and fills the browser window.

JJames Cruz

78% match

Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes employee age against salary in a responsive scatter plot, using D3 v7’s `d3.csv` to load data from a remote CSV file and `d3.scaleLinear` to map the values. The chart draws SVG circles for each employee, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and includes labeled axes for Age and Salary. The code also incorporates the `@curran/responsive-axes` library for flexible axis handling and a custom `viz` function, which applies margins, an inner rectangle background, and adjustable circle radius and opacity. The plot is rendered entirely in SVG, with a fixed initial size but structured to support responsive resizing.

Ssaideep1612@gmail.com

77% match

Loading thumbnail…

Creating Scatter plot using D3.js

This example shows a scatter plot of age against salary, where each dot represents an individual data point from a CSV file. The code uses D3.js v6 to load and parse the data, then applies `d3.scaleLinear` to map the values. Axes are generated with `d3.axisBottom` and `d3.axisLeft` for the x- and y-axes, respectively, and circles are appended to an SVG container. The data comes from a remote CSV hosted on GitHub, and the plot is styled with a green fill and labeled axes.

Yyvarshachowdary@gmail.com

77% match

Loading thumbnail…

Activity_6_Question 3

This interactive scatter plot visualizes the relationship between age and salary across genders in an income dataset. Each circle represents a person, colored by gender (green for male, yellow for female, red for other), with hover tooltips showing detailed records. The visualization uses d3.csv to load external data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for ticks. SVG circles and event listeners handle mouseover interactions, while the tooltip div transitions opacity to display information. The plot includes labeled axes for salary and age, rendered with custom axis label styling.

HHarsha vardhan reddy Yarmareddy

77% match