Skip to main content
SimilarExport ZIP
100%

ICE-7 Resusable Scatter Plot

✓ Published2🌍 Public
Mmynedisanjana@gmail.com
Last edited Mar 28, 2026
Created on Mar 28, 2026

This scatter plot visualizes song performance by comparing streams against popularity, with each point colored by singer and displayed on a reusable scatter plot component built with D3 v7. The visualization uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` for axis rendering. Data loads from an external CSV file containing song attributes, and the reusable `scatterPlot` function manages SVG rendering, including axis labels and a categorical legend. The chart is designed with margins to accommodate labels and legend placement.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Resusable Pie Chart

This reusable scatter plot, titled "Song Performance Analysis," visualizes the relationship between a song's number of streams and its popularity score. Each circle represents a song, positioned by the linear scales from `d3.scaleLinear()`, with color assigned to the singer using the ordinal color scheme from `d3.scaleOrdinal`. The code loads a songs.csv dataset from a GitHub gist, converts numeric fields, and renders the chart in SVG. It constructs the visualization by merging axes, labels, and a categorical legend, all within a reusable `scatterPlot` function that accepts data and dimension parameters.

Mmynedisanjana@gmail.com
94% match
Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the distribution of song streams across the top six singers from a CSV dataset, showing each singer’s share as a labeled slice with percentages for segments larger than 10%. The visualization is built with D3.js v7, using `d3.pie` and `d3.arc` to generate the slices, `d3.rollups` to aggregate stream counts by singer, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. A legend on the right lists all singers with their exact percentage shares, while the SVG renders in a white rounded container.

Mmynedisanjana@gmail.com
83% match
Loading thumbnail…

ICE-7 Resusable Charts

This example demonstrates a reusable D3 chart library applied to a Spotify song dataset, showing four distinct visualizations: a scatter plot of energy versus danceability, a pie chart of popularity groups, and line and area charts displaying average song popularity by release year. The code constructs each chart as a configurable function with getter/setter methods, using D3 v6 APIs such as `scaleLinear`, `axisBottom`, `axisLeft`, `rollup`, `mean`, `pie`, `arc`, and `area` to compute scales, aggregate data, and generate SVG paths. Charts are rendered into separate SVG elements with custom margins, titles, and axis labels.

KKeith Miller
82% match
Loading thumbnail…

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.

Yyvarshachowdary@gmail.com
82% match
Loading thumbnail…

ICE-7 Reusable D3 Scatter Plot

A reusable scatter plot visualizes the Iris Dataset, with each point colored by species. The chart cycles through four different x-axis variables every two seconds, animating the axis transitions. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The implementation follows a reusable chart pattern, allowing the `scatterPlot` function to accept configurable accessors for data, dimensions, margins, and fill, with CSS styling for typography.

DDan Waters
80% match
Loading thumbnail…

ice7_task1

A dark-themed scatter plot visualizes Spotify’s top artists, comparing monthly listeners against total streams, with bubble size encoding career length and color distinguishing musical genres. Built with D3 v7, the visualization uses d3.csv to load remote data, d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeTableau10 for genre colors, and d3.scaleSqrt for bubble radii. SVG rendering includes gridlines, axis labels, and a title. An HTML tooltip appears on hover, displaying artist details such as country and debut year, with data sourced from a public GitHub CSV.

BBalaji Dasari
80% match
Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com
80% match
Loading thumbnail…

ICE-7: Reusable D3 Scatter Plot

This visualization presents the Iris Dataset in a reusable D3 scatter plot, cycling through four variable pairings every three seconds. Implemented as a custom `scatterPlot` function, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `symbols` (cross, diamond, square) to distinguish species, and SVG paths for marks. The plot updates dynamically by changing the `xValue` accessor and re-invoking the chart, with axes redrawn via `d3.axisLeft` and `d3.axisBottom`. Animated transitions are absent; the interval simply triggers fresh renders.

Ggunasindhuja
79% match