Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published0🌍 Public
Qqhfzwyx
Last edited Apr 26, 2020
Created on Apr 26, 2020

This stylized scatter plot visualizes the relationship between JobLevel and MonthlyIncome from a human resources dataset, drawing all data points as teal circles with native SVG tooltips. The visualization uses React for component composition and D3 v5 for data loading and scaling, with axis components generating tick marks and labels through D3's scale methods. The chart includes custom formatting that abbreviates large numbers using D3's format function, and axes are styled with tick lines and text elements. The data is fetched as CSV and parsed into numeric values before being mapped to x and y positions.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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…

Interactive plot

An interactive scatter plot of the salaries dataset explores relationships among academic salary, years since PhD, and years of service using React and D3. Users select X and Y axes and filter data by rank, discipline, or sex through dropdowns. Hovering over the color legend highlights points matching that category, while other points fade. The visualization uses d3.scaleLinear scales, d3.scaleOrdinal color encoding, and crossfilter for data manipulation, rendering circles via SVG.

BBizmundo
76% match
Loading thumbnail…

Interactive plot

This interactive scatter plot explores the relationship between academic salaries and career attributes. Users can select X and Y axes from among salary, years since PhD, and years of service, while a filter dropdown controls the categorical color encoding by rank, discipline, or sex. Hovering over the color legend highlights points of that category and fades others. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and SVG circles rendered from the salaries dataset.

BBizmundo
75% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the relationship between the share of women in a college major and median earnings, using data from the FiveThirtyEight recent-grads dataset. The React component renders an SVG with D3 scale functions (`scaleLinear`) to map data values to pixel coordinates, while reusable `AxisBottom` and `AxisLeft` components generate ticks and gridlines. Circles are positioned using `xScale` and `yScale`, with the `Marks` component assigning a `<title>` element to each point, enabling a native browser tooltip on hover. The visualization uses the d3.csv loader to fetch and parse the remote dataset.

TTran Quang Anh Ha
75% match
Loading thumbnail…

Increment Bar Chart

This bar chart displays the average monthly income across different job roles, using horizontal bars sorted by income value. The visualization relies on D3 v5’s `scaleLinear` and `scaleBand` to map income and job titles, with `axisLeft` and `axisBottom` generating the axes. Data is loaded from a remote CSV file via `d3.csv`, and the chart is rendered as SVG within a React framework. The bars are styled with a light blue fill, and axis labels and a title are added using D3’s selection and text methods.

Ddivyageethanjali
75% 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
74% match
Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot presents data from a heatmap dataset loaded via D3's `csv` function, displaying points on an SVG canvas where each circle's position maps to X and Y coordinates. The visualization uses D3 v5's `scaleLinear` and `extent` functions to compute the axes scales, while React components (`AxisBottom`, `AxisLeft`, `Marks`) render the chart structure and data points. The marks feature a semi-transparent red fill (`#cc008833`) and a native SVG `<title>` tooltip, with axis labels and ticks styled via CSS using the Poppins font.

Llarsville
72% match
Loading thumbnail…

Jbt Scatter Plottic

A scatter plot maps employee roles to their salaries using circular marks. The visualization loads data from a local CSV file and renders with SVG through D3 v5, employing `scaleLinear` for the x-axis and `scalePoint` for categorical y-axis positions. Axis ticks extend across the plot area, and the x-axis label displays text in a foreign language. The code uses `csv`, `axisBottom`, `axisLeft`, and `format` to construct the chart, though the data transformation attempts to reference a nonexistent `population` field.

NNemastoja
72% match