Jaswanth_Assignment7_Reusable Scatter Plot

Last edited Oct 26, 2025

Created on Oct 23, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Jaswanth_Assignment7_re-usable Scatter Plot

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.

81% match

Assignment_7_Line chart_Jaswanth

A line chart displays music revenue in million USD per year from 2015 to 2022. Data comes from a remote CSV file loaded with `d3.csv` and `d3.autoType`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, a `d3.line` generator with `d3.curveMonotoneX` for smoothing, and `d3.axisBottom`/`d3.axisLeft` for ticks. Interactive circles show tooltips on `mouseenter`, `mousemove`, and `mouseleave` events. The chart renders as SVG with gridlines and axis labels in a fixed 750×420 viewport.

81% match

Assignment_7_Area Chart_jaswanth

This area chart shows music industry revenue in million USD per year from 2015 to 2022, highlighting a general upward trend. The visualization uses D3 v7’s `d3.area`, `d3.line`, and `d3.curveMonotoneX` generators to render a gradient-filled area and a stroked line over a time-series axis built with `d3.scaleTime`. Data is loaded asynchronously from a raw GitHub CSV via `d3.csv`, with hover tooltips on the circular marks triggered through SVG mouse events.

80% match

Mmaddulanagasanjana@gmail.com

Scatter Plot

This example shows a reusable scatter plot of daily business metrics from a CSV file, plotting signups on the x-axis and revenue on the y-axis with a point for each date. The visualization is built with D3 v7 using the `d3.csv` loader and `d3.scaleLinear` for both axes, while `d3.axisBottom` and `d3.axisLeft` render the tick marks. Each circle is appended via `selection.selectAll().data().join()` with opacity and a fixed color, and the chart includes a title and axis labels. The code defines a reusable `scatterPlot` function to allow flexible customization of data columns and styling.

77% match

Assignment_7_piechart

This pie chart displays the share of music revenue (in millions USD) across top years, with each slice labeled by its percentage of the total. The SVG rendering combines a pie on the left and a legend on the right, both drawn inside a single responsive viewBox. Using d3.pie and d3.arc for slice generation, the code loads data from a remote CSV, applies a d3.scaleOrdinal with schemeSet2 for colors, and adds interactive tooltips via appended title elements. The legend lists each year with its value and percentage, built through D3 data joins.

Yyvarshachowdary@gmail.com

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Assignment_7_Q1

A reusable scatter plot compares monthly Sales against Profit, with points colored and shaped by region (North, South, East, West) using D3 v7 scales (d3.scaleOrdinal, d3.symbol). A tooltip appears on mouseover showing month, region, sales, and profit. The chart is built as a factory function (scatterPlot) with configurable margins and transition animations for point updates. Data comes from an inline CSV string parsed by d3.csvParse.

SSai Charan

Reusable Scatter Plot

This scatter plot from the D3.js gallery visualizes the relationship between math and reading scores for individual students, with each point positioned by d3.scaleLinear scales and rendered as an SVG circle. The reusable ScatterPlot function, exported from scatterPlot.js, accepts data, accessor functions, and margin/width/height parameters to generate axes via d3.axisLeft and d3.axisBottom. It loads student performance data from a GitHub-hosted CSV file, parsing numeric fields before plotting steelblue circles, with axis labels added using SVG text elements.

PP Manisha