D3 Scatter Plot - Earnings and Education

100%

D3 Scatter Plot - Earnings and Education

✓ Published0🌍 Public

Last edited Sep 27, 2021

Created on Sep 13, 2021

This scatter plot visualizes the relationship between years of education and hourly earnings, with blue points for males and red points for females. The data comes from a CSV file loaded asynchronously via `d3.csv`. The code uses D3 v6 scales (`d3.scaleLinear`), axes (`d3.axisLeft`, `d3.axisBottom`), and SVG circles to render the points with opacity for overlap. The chart fills the browser window, with margins defining the plotting area.

AI-generated description

A D3 scatter plot shows the relationship of years of education and earning for males and females.

Data: Earnings and Education Dataset.

y-axis:

Earnings (dollars per hour)

x-axis:

Years of education

Color:

Blue points: male

Red points: female

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

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

76% match

Loading thumbnail…

Working Hours Scatter Plot

A scatter plot displays the relationship between age and hours worked per week for individuals from the 1994 Census Income Data Set, with each point colored by gender. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes and gridlines, while `select` and `csv` load and bind the data. The SVG rendering applies a semi-transparent fill to each circle, and a legend distinguishes male and female data points. Hovering over a circle changes its fill to whitesmoke.

AAmar Nath Yogi

76% match

Loading thumbnail…

Scatterplot

A scatterplot of professors' salaries versus years since PhD, rendering each professor as a semi-transparent blue circle in an SVG. It shows the relationship between academic seniority and compensation using data from a CSV file. The visualization uses d3.scaleLinear for both axes, with d3.axisLeft and d3.axisBottom to add labeled axes, and includes a title and axis labels. Data is parsed from CSV, with numeric fields converted to numbers before plotting.

Tthomaslarkin7

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…

D3 Scatter Plot Socioeconomic

This scatter plot visualizes socioeconomic data from the US Census 2019-2010 American Community Survey, displaying employment counts by state and NAICS sector for 2019. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load the data and `d3.scaleLinear` and `d3.scalePoint` for positioning. Points are plotted using the `Estimate` values for employed civilians, with `d3.axisLeft` and `d3.axisBottom` providing labeled axes. User interactions are not apparent, as the code focuses on static scatter plot generation.

PPeter Cordone

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

74% match

Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes health expenditure data from a CSV file, showing expenditure by year and colored by gender. The visualization uses a D3.js v7 scatter plot with a shape legend to distinguish between male and female data points. The code leverages `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.symbolsFill` for shapes, and `d3.symbol` to generate the point markers. A custom `axes` module handles axis rendering with labels, while the `shapeLegend` module displays the gender categories. The plot loads data asynchronously via the `fetch` API and `d3.csvParse`.

KKhatera Alizada

74% match