100%

ICE-06

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 20, 2024

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

Marks and Channels

Welcome to the ICE-6! Here, we'll explore encoding data with marks and channels in data visualization.

Marks

Marks are the basic elements like points, lines, and areas that form our visualizations.

Channels

Channels give marks their meaning. They include position, color, shape, and size.

Example Dataset

Use your own dataset

Let's Get Visual!

We'll use D3.js and SVG to create interactive and scalable visualizations.

Let's dive in and explore marks and channels in data visualization! 🚀

MIT Licensed

Similar vizzes

Loading thumbnail…

ice 6

This horizontal bar chart displays the global sales of the top 11 video games, using orange bars to compare their performance. The visualization is built with React and D3 v5, leveraging `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG for rendering. Data is loaded asynchronously from a CSV file via `d3.csv`, with sales values parsed and then filtered to the first 11 entries. Tick marks and labels are manually generated from the scales, while axis lines are omitted for a cleaner design.

TTejamod

85% match

Loading thumbnail…

ICE-6 Anusha Anumula

This example shows the top 20 PS4 games ranked by North American sales using a horizontal bar chart, with bars representing European sales percentages. The visualization uses React for component structure and D3 v5 for data loading and scales, specifically `csv` for parsing the dataset and `scaleBand` and `scaleLinear` for positioning. SVG rectangles render the bars, with grid lines and tick labels generated manually from the linear scale. Data comes from a CSV hosted on GitHub gists, and the visualization updates reactively once the data loads.

Aanushaanumula

84% match

Loading thumbnail…

ICE-6

This example shows a bar chart of video game sales, comparing the total sales across different game platforms. A dropdown menu lets the viewer switch the y-axis metric among customer-related attributes like name, segment, country, city, or state. Built with React and rendered as SVG, the chart uses d3.scaleBand and d3.scaleLinear for axes, with custom AxisBottom, AxisLeft, and Marks components. Data is loaded asynchronously via d3.csv from a Kaggle-hosted dataset of top game sales.

PPrasanth Damarla

82% match

Loading thumbnail…

ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating. The visualization loads CSV data via `d3.csv`, sorts by rating, and renders SVG bars, axes, and labels using React components. It uses D3 scales (`scaleBand`, `scaleLinear`), axis ticks, and text elements for annotation. The chart is styled with CSS in the HTML file, and the React app updates state after data retrieval.

RRaajithaSabbineni

81% match

Loading thumbnail…

ICE-6 DV

This visualization displays a bar chart of the top 20 anime entries from a CSV dataset, ranking them by rating on the y-axis and their anime IDs on the x-axis. The React application uses d3.csv to load the data, then constructs SVG bars with d3.scaleBand and d3.scaleLinear, including axis tick marks and labels. The bars are rendered as blue-striped rectangles, with the chart sized to a 960×500 viewport and a left margin for country names.

Ssowmyanagula@my.unt.edu

81% match

Loading thumbnail…

ICE-6 Bar Graph 11554625

This bar graph displays global video game sales across different genres, using horizontal bars to compare the total sales figures for twelve genres. Built with React and rendered as an SVG, the visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map genre names to y-axis positions and sales values to bar widths, with red gridlines and axis ticks generated via `xScale.ticks()`. Data is loaded from a remote CSV of video game sales via D3’s `csv` function, which parses the `Global_Sales` column for each row.

MManohar Kowthavarapu

81% match

Loading thumbnail…

ICE-6 Country Sales Bar Chat

This example shows a horizontal bar chart of sales figures for the top ten countries from a CSV dataset. Each green bar represents total sales per country, with axes labeled and tick marks rendered. The code uses React with hooks to manage loading data via d3.csv, and d3.scaleBand and d3.scaleLinear for positioning. It renders SVG elements directly in JSX, constructing the chart with d3’s scale functions and max helper. The dataset is fetched from a GitHub gist, and the layout includes custom margins for the left-aligned country names.

Aarchanagoli@my.unt.edu

81% match

Loading thumbnail…

ICE7

This visualization presents a pie chart of video game sales by title, breaking down revenue across North America, Europe, and Japan. The chart uses an ordinal color scale and displays each game’s total sales and percentage in a legend. Built with D3 v5 and React, it loads CSV data and renders SVG paths using `d3.pie` and `d3.arc`, with legends and text labels positioned manually.

Ssatishnarne99@gmail.com

80% match