Creating Scatter plot using D3.js

100%

Creating Scatter plot using D3.js

✓ Published0🌍 Public

Last edited Mar 20, 2024

Created on Mar 20, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot using d3.js

This scatter plot visualizes the relationship between years of experience and salary, with each circle representing a data point from a CSV file loaded via d3.csv. The example uses d3.scaleLinear to map the data to x and y axes, with axis labels for both variables. Circles are appended to an SVG container with a fixed radius of 5 pixels and a teal fill, positioned using the scales. Axes are rendered with d3.axisBottom and d3.axisLeft, and the visualization uses d3.v6 in a simple HTML page.

Yyvarshachowdary@gmail.com

88% 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

83% match

Loading thumbnail…

Making Scatter Plot with D3

This example shows a scatter plot of date-value pairs from a CSV file, with points animating from radius 0 to 5 over one second. It uses D3 v5’s `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom`, and applies an SVG `transition` to grow the circles. The y-axis scales values, while the x-axis maps dates as categorical points. Data is loaded via `d3.csv`, and the plot includes labeled axes and a title.

JJuan David Bolaños Rojas

80% match

Loading thumbnail…

scatterplot using d3

A scatterplot displays name-number pairs from a local CSV file, mapping names to the y-axis and numeric values (scaled by 1000) to the x-axis using d3.scalePoint and d3.scaleLinear. Circles are rendered via SVG with fixed radius and semi-transparent steelblue fill. The code imports d3 functions like select, csv, and axisBottom, and includes a formatted x-axis with tick size and a custom text label, demonstrating basic D3 v6 data binding and margin-based layout.

RRITUZZ

80% match

Loading thumbnail…

reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes the relationship between age and price, with points colored by gender. It automatically alternates between two subsets of the data every five seconds, using a timer to refresh the visualization. The implementation leverages D3 v6’s modular functions, including `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom`, within a custom chart factory function. Data is loaded from a remote CSV file and parsed, while SVG rendering and animation are handled through D3’s selection and join methods, ensuring a clean, declarative approach to updating the plot.

Vvishnupriya eupuri

80% match

Loading thumbnail…

A6 Scatterplot

This scatterplot visualizes the relationship between age and income, with each circle colored by gender using a categorical color scale. The chart uses D3.js v7 to load CSV data from a GitHub gist, scales the x-axis starting at age 15 and the y-axis from 5000 income, and renders SVG circles with axes labeled "Age" and "Income." A d3-legend color legend titled "Gender" identifies the categories, while the styling sets black axis lines and text. The rendering approach is SVG, with scales defined via `d3.scaleLinear` and `d3.scaleOrdinal`.

SShazil Taqi

80% match

Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between Age and Fare from a CSV dataset, with points colored by Sex. The visualization alternates between two subsets of the data every five seconds, dynamically resizing the SVG to fit the browser window. Built with D3.js, it uses the scatterPlot module and responsive-axes library to generate linear scales, axis labels, and semi-transparent circles. The code loads data via d3.csv, parses numeric fields, and employs setInterval to toggle between the two plot views, demonstrating a simple animated data exploration technique.

Vvishnupriya eupuri

80% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot uses a responsive React component and D3 scales to map age against income from a CSV dataset. The visualization employs D3’s `scaleLinear` and `extent` functions to compute domains, with custom `AxisBottom` and `AxisLeft` components rendering SVG tick marks and labels. Each data point is an SVG circle with a `title` tooltip showing formatted values via D3’s `format`. The chart features rotated axis labels, a Poppins font, and a clean color palette, with styling applied through CSS classes.

SSamir Nandardhane

80% match