Skip to main content
SimilarExport ZIP
100%

Fork of reusable scatter plot

✓ Published0🌍 Public
Bbharathavulapati@gmail.com
Last edited Mar 31, 2025
Created on Mar 31, 2025

This scatter plot visualizes the relationship between math and science marks, with each point colored by performance category: green for 'Excellent', orange for 'Average', and red for 'Needs Improvement'. Built using D3 v6, it uses a reusable chart function with setter methods for customization, d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.symbolCircle for point shapes. SVG renders axes, labels, a title, and a legend showing the categories.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of scatter plot

This fork of a scatter plot displays the relationship between Math and Science marks for a group of students, with each green circle representing one student. The visualization loads data from a CSV file and uses D3 v6’s `csv` parser to process the marks, mapping them to pixel coordinates via `scaleLinear` and `extent`. Axes are rendered with `axisLeft` and `axisBottom`, while the plot includes labeled X and Y axes and a bold title. The SVG rendering fills the browser window, with circular marks positioned using `attr` bindings for cx and cy.

Bbharathavulapati@gmail.com
88% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes student scores across subject pairs, cycling through Math-Science, Math-English, and Science-English comparisons. Built with d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft, the chart renders SVG circles on axes with labels. The plot supports configurable dimensions, value mappings, and labels through setter methods, and it redraws dynamically when the metric combination changes. Data loads from a CSV file containing raw marks, which are converted to numeric values for plotting with animation updates.

Bbharathavulapati@gmail.com
88% match
Loading thumbnail…

Fork of Fork of scatter plot

This scatter plot visualizes the relationship between math and science scores for 50+ students, with each dot colored by academic department. It uses d3.csv to load the dataset, d3.scaleLinear for x and y axes, and d3.scaleOrdinal with d3.schemeSet2 for color encoding. Interactive tooltips appear on hover via appended title elements, while a manually constructed SVG legend identifies department categories. The visualization employs d3.axisBottom and d3.axisLeft to render axes, with SVG circles serving as the primary glyphs.

Ssainishanthreddyk@gmail.com
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays individual student math scores against science scores from a CSV dataset, with each circle representing one student. The code builds the chart using D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, rendered as SVG within a full-window container. A custom `scatterPlot` generator function uses getter-setter methods to configure width, height, data, margins, and circle radius, while the axes and labels are added inside the chart’s rendering loop.

Bbharathavulapati@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Fork of scatter plot

A forked D3.js v7 scatter plot visualizes the relationship between Math and Science scores for students in a CSV dataset, with points colored by academic department. It uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for categorical coloring. Points are rendered as SVG circles with hover tooltips, alongside a legend identifying departments.

Ssainishanthreddyk@gmail.com
86% match
Loading thumbnail…

Fork of scatter plot

This scatter plot visualizes the relationship between math and science scores for 93 students, with each dot colored by department. It uses D3.js v7 to load data from a CSV file, map scores to x/y coordinates with `d3.scaleLinear()`, and color-code points using `d3.scaleOrdinal()` with the `d3.schemeSet2` palette. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, plus a legend identifying the seven academic departments. Hovering reveals a tooltip with the student's name, department, and scores.

Ssainishanthreddyk@gmail.com
86% match
Loading thumbnail…

Fork of Fitness Data Scatter Plot

This scatter plot visualizes the relationship between students’ math and science marks, with each green circle representing one student’s paired scores. The x-axis maps math marks and the y-axis maps science marks, with axes labeled and a bold title. Built with D3 v6, the code loads a remote CSV, parses numeric values, and uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG chart. The data originates from a GitHub-hosted CSV file, and the plot auto-sizes to the browser window.

Ssanthoshdachepally333@gmail.com
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between students' math and reading scores, with each circle representing a student's performance on both subjects. The plot uses a procedural, reusable D3 module that defines a configurable `scatterPlot` function, which encodes data coordinates into circle positions using `scaleLinear` and `extent` for axis domains. The visualization renders as an SVG graphic, drawing steel-blue circles and adding left and bottom axes via `axisLeft` and `axisBottom`. It loads CSV data from a GitHub gist containing student test scores, and the code demonstrates a modular approach to building a scatter plot with D3 v6.

445.saiful@gmail.com
85% match