Untitled

Assignment 4 D3 BarChart

This bar chart displays the average math SAT scores of California students across multiple years, with each bar’s height mapping the score for a given year. It is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and SVG `rect` elements for the bars. Data is loaded asynchronously from a CSV file via `d3.csv`. Axis labels and a title are added as SVG text, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Eeranyoung

92% match

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`.

Untitled

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.

MMinaSSaleh

Fork of Bar chart with a Sequential color scale

This bar chart displays average SAT verbal scores across nine years, from 1999 to 2015, using a sequential color scale to encode score magnitude. The data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. Bars are sorted by score and colored using `d3.scaleQuantize` with ColorBrewer’s Reds palette, accompanied by a legend from `d3.legendColor`. Interactive features include a yellow tooltip on mouseover, with axes and labels formatted using D3’s standard scale and axis APIs.

Iiom2105

A4 Histogram D3

This histogram shows the distribution of average math SAT scores across US states from 2005 to 2015, with the x-axis spanning score values from 380 to 620 and the y-axis counting the number of state averages per bin. Data is loaded from a CSV file via `d3.csv`, then processed with `d3.histogram()` to create ten bins based on `x.ticks(10)`. The SVG rendering uses `d3.axisBottom` and `d3.axisLeft` for axes, and rectangular bars that highlight orange on hover via CSS. The chart is built with D3 v7.

Hhanulik.ondrej@gmail.com

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.

76% match

A6 Scatterplot D3

This scatterplot visualizes the relationship between average math and verbal SAT scores across US states in 2015, with each state represented as a circle. The color of each point encodes the state’s average math GPA using a d3.scaleThreshold with discrete color ranges, and a d3.legendColor legend clarifies the mapping. The chart is built with D3 v7, rendering SVG elements with d3.axisBottom and d3.axisLeft for the axes. Hovering reveals a tooltip with state details, while the data comes from the satscores.csv file.

76% match

A5 Bubblechart D3

This visualization displays the relationship between math and verbal SAT scores across U.S. states in 2015, with each circle representing a state positioned by its two average scores. Circle size encodes the number of test takers, while red and blue fill colors indicate whether the state’s average math GPA falls below or above 3.5. Hovering highlights points in orange. The chart is built with D3 v7 using `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` for color, and SVG elements for rendering, with data loaded from a CSV file.