Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ddillonsparks
Last edited Dec 17, 2022
Created on Dec 17, 2022
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

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
77% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between math and reading scores for individual students, with each point's color indicating whether the writing score exceeds 70. Built with D3 v7, the SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` with `d3.autoType` to parse the student performance data. Points are rendered as circles with a fixed radius and 70% fill opacity.

RRohith Reddy
75% match
Loading thumbnail…

Basic Scatter Plot

This basic scatter plot visualizes the relationship between two variables from the MA_Public_Schools_2017.csv dataset, with each point representing a school. Using D3 v4 with SVG rendering, the plot maps one metric to the x-axis and another to the y-axis, with axes automatically scaled from the data. The chart is intentionally minimal, focusing on showing the distribution and correlation of the selected variables across schools. The code from HawkinsJM loads the CSV and uses D3 scales to position circles, providing a straightforward example of how to construct a basic scatter plot with D3.

HHawkinsJM
74% match
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
73% 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
73% match
Loading thumbnail…

ICE - 6 Scatter Plot

This D3.js scatter plot visualizes student grades from a CSV file, plotting English scores on the x-axis and physics scores on the y-axis, with points colored by class (First class, Second class, or other). It uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. The SVG rendering includes circles sized by a fixed radius, with axis labels for English and science. The code also reads additional metrics (science and maths) into each data point, though these are not directly used for the visual encoding.

Cchilukuritagore1427@gmail.com
72% 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
71% match
Loading thumbnail…

ICE 6 scatter plot

This scatter plot displays student grades, plotting English scores on the x-axis against Physics on the y-axis, with each point colored by class category (First, Second, or other). The code loads CSV data via `d3.csv`, applies `d3.scaleLinear` for both axes, and renders circles using SVG. It also encodes additional dimensions through the `rx` and `ry` attributes, mapping Science and Math scores to each circle’s horizontal and vertical radii, while using `d3.axisLeft` and `d3.axisBottom` for labeled axes.

Cchilukuritagore1427@gmail.com
71% match