ICE-7 Sanjana Area Chart

100%

ICE-7 Sanjana Area Chart

✓ Published2🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

This stacked area chart visualizes the cumulative popularity of the top four music artists across years, using data from a songs CSV file. Built with D3.js, it employs `d3.stack()` to layer cumulative values and `d3.area()` with a step-after curve to render each singer’s contribution. The chart includes axes, labels, and an HTML legend, with colors mapping to artists via `d3.scaleOrdinal`. Data is aggregated in `index.js` before rendering through an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Sanjana Line Chart

This line chart tracks cumulative song popularity for the top four singers over time, revealing how each artist’s total popularity grows across released years. The code filters a CSV dataset using `d3.rollups` and `d3.groups`, then sorts by singer and computes running sums of popularity. It renders with D3 v7’s `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`, applying `curveMonotoneX` for smooth paths and a color legend via `d3.scaleOrdinal`. The SVG is drawn inside a fixed 800×500 canvas.

Mmynedisanjana@gmail.com

89% 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

81% match

Loading thumbnail…

ICE-7 Resusable Scatter Plot

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.

Mmynedisanjana@gmail.com

78% match

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

78% match

Loading thumbnail…

ICE-7 Area chart

This stacked area chart visualizes the year-over-year counts of engineering, business, and food management programs from 2010 to 2018, with data loaded from a CSV file. Three distinct colored areas, labeled in white, are layered using d3.stack with ascending order and a basis curve. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeDark2 for colors. The d3-area-label plugin positions text labels within each area, while custom legend circles are appended directly to the SVG.

Rrallabandisushen@gmail.com

77% match

Loading thumbnail…

ICE-7 AREA CHART

This area chart visualizes revenue trends over time, with the x-axis representing years (based on customer counts) and the y-axis showing revenue in millions. The chart uses a skyblue filled area beneath the line to emphasize the magnitude of revenue values. Built with D3.js v7, the visualization fetches CSV data from a GitHub gist, processes it with `.csv()`, and renders the graphic using SVG. The code configures axes, labels, and margins, and uses `d3.area()` to generate the filled area path.

Ppeddubalaji@gmail.com

75% match

Loading thumbnail…

ICE 7 - Area Chart

This area chart visualizes the daily total streams of the song “Shape of You” from Spotify in 2017, using data loaded from a CSV file. The chart displays the stream counts in millions over time, with a filled area beneath the curve in MediumSlateBlue, purple stroke, and gridlines on both axes. The code uses D3 v7 APIs including `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` to render the SVG visualization.

DDaniel Mata

75% match

Loading thumbnail…

ICE-7 AREA CHART

This area chart visualizes population trends across years, combining a blue line path with a yellow filled area beneath it, all rendered as SVG elements. The chart uses D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with axes generated via `axisBottom` and `axisLeft`. Both line and area generators apply `curveBasis` smoothing, while data is loaded from a CSV file and parsed with `d3.timeParse`. Axis ticks are customized with red text and gridlines, and the y-axis label is rotated using an SVG transform.

IIndhuKrishnaraj

75% match