Untitled

100%

✓ Published0🌍 Public

Last edited Feb 21, 2021

Created on Feb 21, 2021

A D3.js v4 scatter plot maps student SAT math scores to the x-axis and SAT verbal scores to the y-axis, with circle size encoding ACT scores and fill color representing GPA via a custom color scale interpolating between white and dark teal. The SVG visualization uses d3.scaleLinear for positioning and sizing, d3.axisLeft and d3.axisBottom for tick marks, and binds data from a static JavaScript array of student records, applying semi-transparent fill colors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A4 Scatterplot D3

This scatterplot displays student math and verbal SAT score averages across all US states in 2015, with each circle representing a state and positioned by its paired test scores. Built with D3 v7, the visualization uses `d3.scaleLinear` to map data values to pixel coordinates within an SVG canvas and draws circles via `d3.selectAll().join()`. The chart includes labeled axes, a title, and hover interactions that change point colors. Data is loaded asynchronously from a CSV file using `d3.csv`.

EEric Yao

80% match

Loading thumbnail…

Untitled

This bar chart displays the number of students for various grades and locations, with bars colored blue and axes labeled "Grades" and "Num_students." The visualization uses D3.js v6 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Data is hardcoded in an array of objects, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart includes a pink background rectangle and console logs for debugging scale behavior.

Hhanulik.ondrej@gmail.com

77% match

Loading thumbnail…

Untitled

This scatterplot visualizes the relationship between mean ELA scores and the proportion of white students in schools, using data from a D3_School.csv file. The chart displays 100 data points as circles, with tooltips showing the mean ELA score on hover. Built with D3 v4, it uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements, with mouseover, mousemove, and mouseleave events controlling tooltip opacity and positioning.

Ddillonsparks

77% match

Loading thumbnail…

Untitled

This bar chart shows the average math SAT scores of California students across multiple years, with each bar representing a yearly score. The visualization uses a band scale for the x-axis and a linear scale for the y-axis, both defined via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the SVG rectangles are rendered with D3’s data join. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while a custom margin and translation position the chart within the SVG canvas.

Eeranyoung

77% match

Loading thumbnail…

Assignment 2 Task 3 Scatter Plot

This scatter plot visualizes the relationship between high school ranking, high school strength, student involvement, and student activity levels, with point color encoding student grades (A, B, or other). The SVG visualization loads CSV data via d3.csv, scales the x and y axes with d3.scaleLinear, and renders circle marks using d3 selection joins. Axes are drawn with d3.axisLeft, d3.axisBottom, and styled with custom labels.

Lleftymadi

77% match

Loading thumbnail…

D3 Test Fork

This visualization plots student grades against video views in a 2013 HarvardX/MITx course dataset. The scatterplot uses a log scale for the x-axis to accommodate data spread, with D3 v5’s `scaleLog` and `scaleLinear`. Built with React and rendered as SVG, the code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components. Dots are initially colored a fixed red, though the author notes an intention to color by institution, as seen in the `colorValue` variable and `schemeCategory10` import.

RRoquelaur77

76% match

Loading thumbnail…

A5 Scatterplot Matrix D3

This interactive D3.js scatterplot matrix visualizes relationships among three SAT score variables—TotalMath, TotalVerbal, and MathematicsAverageGPA—using U.S. state-level data from satscores.csv. Each cell shows a paired comparison of two variables, with points representing individual states. A hover effect changes point color to orange for enhanced readability. Built with d3.v7, the example uses d3.csv for data loading, d3.scaleLinear for axes, d3.cross to generate the grid of cell pairs, and d3.axisBottom/axisLeft with tick lines to render gridlines. The SVG rendering employs a coordinated [i,j] indexing system for placing points as circles.

EEric Yao

76% match

Loading thumbnail…

Untitled

This example shows the distribution of student counts across letter grades, with horizontal bars colored in a solid blue tone. The chart uses D3.js v6 to construct an SVG visualization, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. It renders rectangles whose widths are proportional to `num_students` values, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The data is hardcoded in the script rather than loaded from the available CSV file.

Hhanulik.ondrej@gmail.com

76% match