Skip to main content
SimilarExport ZIP
100%

ICE-6 by Sujit, Q2

✓ Published0🌍 Public
Ssujitrayudu01@gmail.com
Last edited Mar 21, 2024
Created on Mar 20, 2024
Forked from HTML Starter

This scatter plot visualizes manga sales volumes across release years, with each circle representing a title’s sales figure. The chart uses D3 v6 APIs including `scaleLinear`, `axisBottom`, and `axisLeft` to map years on the x-axis and millions sold on the y-axis. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to both dimensions. The SVG rendering includes labeled axes and uses `extent` to set domains automatically, while circles are positioned with `cx` and `cy` attributes based on the scaled values.

AI-generated description

ICE 6, Question2: Created a Scatter plot chart on my Manga sales csv file.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 by Sujit, Q1

This example visualizes manga sales volumes using a bar chart, with each bar representing a series and its height encoding millions of copies sold. It loads CSV data via D3’s `csv` method, then uses `scaleBand` and `scaleLinear` to map series names and sales values to positions. React manages the component state and rendering, while D3 handles the axes and scales. The chart includes gridlines, tick labels, and rotated or angled series names, with all elements drawn as SVG rectangles and text. The data comes from an external gist-hosted CSV file, and the visualization updates after the data asynchronously loads.

Ssujitrayudu01@gmail.com
89% match
Loading thumbnail…

ICE_6_bhavya

This example visualizes top manga sales data with a bar chart rendered as SVG, displaying each series name along the x-axis and millions of volumes sold along the y-axis. The chart uses React to manage state and render components, while D3’s `scaleBand` and `scaleLinear` handle positional scales, and the `csv` function loads data from a remote URL. Each bar is a `<rect>` element with Crimson fill, accompanied by axis tick lines and labels generated from the scales. The code explicitly maps over the domain to produce marks and text, with data transformation converting string values to numeric format during CSV parsing.

Bbhavyapokuri123@gmail.com
82% match
Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu
81% match
Loading thumbnail…

ICE-6

This bar chart displays total sales values by year, with each year’s revenue encoded as a bar’s height and a dollar-formatted y-axis for reference. Built with D3 v4, it loads CSV data from a GitHub gist via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles. Axis labels for “Year” and “Total Sales Value” are appended directly to the generated axes.

Kkartik900
78% match
Loading thumbnail…

ICE-6

This scatter plot visualizes the relationship between sales in North America and product ratings, using a dataset loaded from a CSV file via `d3.csv`. The visualization shows individual data points as navy blue circles, with sales figures mapped to the x-axis and ratings constrained to a fixed domain of 7 to 10 on the y-axis. The chart is rendered as an SVG using D3 v6, with linear scales (`scaleLinear`), axes generated via `axisLeft` and `axisBottom`, and data points positioned using the `extent` function to determine the x-domain. The plot is titled and styled directly in the HTML document.

Ssatishnarne99@gmail.com
78% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes store sales data, showing the relationship between sales and the number of orders for products across multiple categories, with each category assigned a distinct color. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear` and `extent` to map the axes, with `axisLeft`, `axisBottom`, and SVG circles rendering the points. Axis labels are styled via CSS and SVG text elements.

Llibramanju
78% match
Loading thumbnail…

ICE-6 Scatter Plot 11554625

This scatter plot visualizes video game sales data from a CSV file, plotting North American sales on the x-axis against release year on the y-axis. Each circle represents a game, colored by genre using a custom `marker` function that maps genre names to specific colors (blue, yellow, or red). The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for rendering scales. The SVG rendering fills the full browser window with a heading and styled tick labels.

MManohar Kowthavarapu
77% match
Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
77% match