Fork of Responsive Scatter Plot

100%

Fork of Responsive Scatter Plot

✓ Published0🌍 Public

Last edited Mar 20, 2024

Created on Mar 20, 2024

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.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

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

83% 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…

Fork of Q2 Area chart

This example displays a responsive scatter plot of employee salaries using an SVG-based area chart. It loads salary data from a CSV file and maps employee IDs along the x-axis using d3.scaleBand, with salary values on a linear y-scale via d3.scaleLinear. The chart utilizes d3.area to render a filled steelblue region beneath the salary points, and interactive circles with pointer-events enable tooltips that display employee names on mouseover. Axis labels are rotated for readability, and the visualization updates dynamically with d3 transitions.

Rramsrinivaskatragadda@my.unt.edu

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

79% match

Loading thumbnail…

Fork of Responsive Line Chart

This fork of a responsive line chart displays the relationship between age and weight using an SVG line plot. The code loads data from a remote text file, parses it with `d3.csvParse`, and sorts it by age before rendering the line with `d3.line` and scales via `d3.scaleLinear`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with labels added for both dimensions. The visualization uses D3 v7 and fixed SVG dimensions of 600 by 400 pixels.

RRakesh Kumar Chekuri

79% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Bbhargavinalamothu@gmail.com

78% match

Loading thumbnail…

Fork of HTML Starter

This example presents a reusable D3 v7 scatter plot that visualizes a small CSV dataset of individuals, plotting their age against their ID number. The chart uses the `d3.scaleLinear` API for both axes, with points rendered as circles using the D3 `.join()` pattern for efficient SVG creation. The code defines a chart factory function, following Mike Bostock’s reusable chart design, allowing customization of the x and y columns and point radius. The data is loaded via `d3.csv` with `d3.autoType` for automatic type inference.

RRithvik

78% match

Loading thumbnail…

Fork of D3 scatterplot

This fork of the D3 scatterplot visualizes the relationship between age and income for individual data points. The chart displays circular marks positioned along linear scales for both axes, with gridlines and labeled axis titles. The code uses D3’s `scaleLinear`, `max`, `axisBottom`, and `axisLeft` APIs to construct the scales and axes, while `select` and `append` manage the SVG elements. Data is bound through `selectAll('circle').data(...)`, with each circle’s position set via the `cx` and `cy` attributes. No external data source is shown, as the render function expects an array of objects containing `Age` and `Income` fields.

78% match