Scatter Plot Data Viz Final

100%

Scatter Plot Data Viz Final

✓ Published0🌍 Public

Last edited May 12, 2024

Created on Apr 12, 2024

This scatter plot compares starting median salary against mid-career median salary for various colleges, with each dot colored by school type (e.g., public, private). It uses D3 v7 with SVG rendering, implementing linear scales for both axes, an ordinal color scale, and a legend mapping school types to colors. Interactive tooltips appear on hover, showing the school name, both salaries, and school type. Data comes from a CSV file loaded via `d3.csv`, and the visualization includes labeled axes and a title.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Bar Chart Data Viz Final

This bar chart visualizes the distribution of starting median salaries across different college types, with each bar representing a school and its salary value. The visualization uses D3.js v7 within an HTML page, employing `d3.csv` to load data from a GitHub gist, `scaleBand` and `scaleLinear` for axes, and SVG `rect` elements for rendering bars. Interactive tooltips appear on hover, displaying the school name, salary, and type via `mouseover` events. The chart includes rotated x-axis labels and a customized y-axis grid for readability.

SShazil Taqi

87% match

Loading thumbnail…

Multiple bar chart Data Viz Final

This visualization displays a matrix of six bar charts comparing average salary metrics across different school types, using data loaded from a CSV file of college earnings. Each chart represents a different salary variable, such as Starting Median Salary or Mid-Career 90th Percentile Salary, with bars colored steelblue that turn orange on hover. The code uses d3.csv for data loading, d3.rollup for aggregating averages by school type, and d3.scaleBand and d3.scaleLinear for axes, rendering SVG charts with interactive tooltips.

SShazil Taqi

84% match

Loading thumbnail…

Strip Plot with jittering

This visualization uses a jittered strip plot to compare starting median salaries across different school types, with each circle representing an individual school. The plot employs D3.js v7 to load CSV data, create linear and band scales for axes, and render SVG circles with randomized horizontal jitter to reduce overlap. Colors distinguish school types using `d3.scaleOrdinal` with `d3.schemeCategory10`. Interactive tooltips appear on mouseover, displaying the school name, type, and salary. The code demonstrates axis labeling, dynamic jittering, and event-driven tooltip transitions.

SShazil Taqi

84% match

Loading thumbnail…

PCP DataViz Final

This visualization uses a parallel coordinates plot to explore salary data for undergraduate majors across seven dimensions, including starting median salary, mid-career median salary, and various percentile breakpoints. Each polyline represents a major, rendered as an SVG path using d3.line, with axes scaled via d3.scalePoint and d3.scaleLinear. Hovering highlights a line in orange and displays a tooltip with the major’s name and all salary values. The data is loaded as CSV using d3.csv.

SShazil Taqi

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

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

79% match

Loading thumbnail…

Data Visualization Assignment 3

This interactive scatterplot explores relationships between attributes of college majors, such as total graduates, gender distribution, employment numbers, and median salary. Users select the X and Y axes from dropdown menus or swap them, and hovering over the categorical color legend highlights a specific major category. Built with React and D3 v6, the visualization renders SVG circles positioned by linear scales, with a color legend encoding major categories. Data is loaded from a FiveThirtyEight CSV, which is processed with D3's `csv` function.

HHowardHan99

78% match

Loading thumbnail…

prototype scatterplot

This prototype scatterplot visualizes the correlation between total graduates and median salary for 173 graduate programs, with points colored by major category using d3.scaleOrdinal. The code loads CSV data via d3.csv, applies d3.scaleLinear for both axes, and renders SVG circles with axis labels and gridlines via d3.axisLeft and d3.axisBottom. A legend enables interactive filtering by category through click events that adjust circle opacity. Data originates from FiveThirtyEight’s college majors dataset, and the chart uses d3.v5 with an SVG rendering approach.

YYF

78% match