Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-06

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

0ae797d258eb4f07b6609517ee587df2

Open

ICE-06

0 stars0🌍 Public
Ssatishnarne99@gmail.com
Last edited Mar 21, 2024
Created on Mar 20, 2024
Forked from Hello VizHub

This visualization displays the top 20 best-selling games in Japan using a horizontal bar chart, with each bar’s length encoding sales figures and game titles on the y-axis. The chart uses React for component management and D3.js scales (scaleBand, scaleLinear) to map data, while SVG rectangles render the bars with red outlines and yellow fills. Data is loaded asynchronously from a CSV file via d3.csv, sorted by sales, and truncated to the top 20 entries. The chart includes custom axes, tick marks, and grid lines drawn as SVG elements.

AI-generated description

Encoding Data with Marks and Channels

This project demonstrates encoding data with marks and channels using React and D3.

Dataset

The dataset used in this project is available at the following link: ICE05-DATA.csv

Getting Started

  1. Clone this repository.

  2. Open index.html in a web browser to view the visualization.

Technologies Used

  • React
  • D3.js

License

This project is licensed under the MIT License - see the LICENSE file for details.