Jaswanth_Assignment7_re-usable Scatter Plot

Last edited Oct 23, 2025

Created on Oct 23, 2025

Forked from Reusable Scatter plot Activity 7

This reusable D3.js v7 scatter plot visualizes work hours against productivity scores from a personal productivity tracker CSV, using square symbols sized by exercise minutes and colored by screen-time buckets. The chart renders as SVG and demonstrates the factory-pattern component design, with configurable accessors for x, y, radius, and color encoding, plus an optional legend. Interactive tooltips appear on mouseenter to reveal month, work hours, productivity, and screen-time details, while axes, labels, and scales are built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol.

AI-generated description

MIT Licensed

Similar vizzes

Jaswanth_Assignment7_Reusable Scatter Plot

A reusable scatter plot displays the relationship between year and revenue using music trends data loaded from a CSV file. The chart uses D3.v7’s selection joining API (`d3.select().join()`) to build SVG axes and circles. It implements a chainable factory function with setters for width, margins, scales, labels, and dot color. Hovering a circle triggers an absolute-positioned HTML tooltip showing the data point’s label and coordinates. The axes use linear scales with integer year ticks and rotated y-axis titles.

81% match

Vvijaysaichigullapally1@gmail.com

Fork of Reusable D3 Scatter Plot - vijq1

This example presents a reusable scatter plot that visualizes the relationship between study hours and exam scores, with points colored by four categories (A through D). Built with D3 v7, the chart uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeSet2` for categorical coloring, and `axisLeft`/`axisBottom` for labeling. A legend is rendered manually, while the `scatterPlot` module follows the “Towards Reusable Charts” pattern with chainable setters. The data comes from an external CSV file, parsed with numeric conversion before rendering as SVG circles.

Ssaisowjanyaedupuganti.24f@gmail.com

Assignment7_ReusableScatterPlot_sowjanya

This example displays a scatter plot of daily steps against calories burned, with points sized by water intake and colored by month. Built with D3 v7 and SVG, it uses a reusable `scatterPlot()` component configured through a chaining API. The plot renders circles via `d3.symbol()` with `d3.scaleLinear` axes, a Tableau10 ordinal color scale, and a custom tooltip that appears on mouseenter, sourcing data from a linked wellness tracker CSV file.

Assignment6_Jaswanth_SP

A scatter plot visualizes the relationship between steps taken and calories burned for individual user-week records, with each point colored by user. The visualization uses D3.js v7 to load CSV data from a GitHub repository, render circles, and construct axes. It employs d3.scaleLinear for x and y positions, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.extent and d3.axisBottom/axisLeft to calculate domains and draw the chart components.

Vvijaysaichigullapally1@gmail.com

Fork of Reusable D3 Scatter Plot - q1

A reusable scatter plot shows the relationship between study hours and exam scores across four categories (A–D), with points colored by category and a legend identifying each group. The chart uses D3.js v6 with the reusable chart pattern, implementing scales via `scaleLinear` and `scaleOrdinal`, axes through `axisLeft` and `axisBottom`, and `schemeSet2` for colors. Data is loaded from a CSV file using `d3.csv`, and the plot is rendered as SVG with circles positioned using the configured x and y accessor functions.

Assignment6_Jaswanth_SP

This scatter plot visualizes the relationship between calories burned and steps taken, with each circle representing an individual user/week record and colored according to the user. The D3.js v7 code loads a fitness dataset from a raw GitHub CSV file, using `d3.csv` with `d3.autoType` to parse values. It applies `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical colors, and renders the chart as SVG with `d3.axisBottom` and `d3.axisLeft` for axes.

Yaswanth_duddu_ICE7

This reusable scatter plot shows the relationship between hours studied and exam scores for 50 students, with attendance percentage encoded as color and assignment completion as point radius. The visualization is built with D3 v7, using a queryable ScatterPlot function that accepts custom accessors for x, y, radius, and color. The code implements scales for positioning and sizing, axis generators for the plot frame, and SVG circle elements with tooltips via the append('title') API. The dataset is loaded from a CSV file containing student records with eight variables.

YYaswanth

77% match