Skip to main content
SimilarExport ZIP
100%

Games

✓ Published0🌍 Public
Ssamozarif@gmail.com
Last edited Sep 11, 2024
Created on Sep 11, 2024

This example displays a JSON representation of the first video game entry from a CSV dataset, including attributes like title, platform, year, and sales figures. It parses numeric values from the CSV using JavaScript’s unary plus operator within a React component. The visualization is a simple, text-based output that shows the raw data structure, intended as a template for loading and examining external datasets.

AI-generated description

The Penguins Dataset, loaded and parsed as CSV.

Fork and modify this template to import your data to VizHub and export it for use in other vizzes! To do that:

  • Fork this viz
  • Clear out the README
  • Update the README with details about your dataset (including original source)
  • Replace data.csv with your own data
  • Replace the parsing logic in index.js with your own
  • Set the custom URL so you can import from it easily

Challenge

  • Find 3 datasets on a topic you are interested in
  • For each of those, fork this viz and replace the data
  • Parse the quantitative attributes into numbers
  • Update README.md to indicate the original data source
MIT Licensed

Similar vizzes

Loading thumbnail…

Video Game Sales

This example presents a React-based visualization of video game sales data from Kaggle, loaded and parsed from CSV. It shows the raw structure of the dataset by displaying the first record as a JSON object in a formatted `<pre>` element. The code converts numeric fields such as sales figures and scores from strings to numbers during initialization, preparing the data for analysis. Using basic DOM manipulation via `innerHTML`, the visualization outputs the parsed data at a large font size for easy inspection, demonstrating a simple data-loading and display workflow rather than a complex graphical chart.

Ssamozarif@gmail.com
85% match
Loading thumbnail…

Video Game Sales

The example displays the first record of the Video Game Sales dataset as a formatted JSON object, revealing its structure for tasks like discovering top-selling genres or comparing regional sales. It imports data from a local CSV file and converts seven specified numeric attributes from strings to numbers before serializing the first element. The visualization renders this data using a simple HTML `<pre>` tag with a configurable font size, demonstrating a minimal approach to data inspection without relying on a charting library. This setup provides a transparent view of the dataset’s fields, enabling users to understand the available variables for subsequent analysis.

SSamuel Karkache
80% match
Loading thumbnail…

video game sales

This example displays the raw contents of the video game sales dataset as a JSON-formatted text dump, showing sales figures across regions and user scores for each title. The visualization initially loads data from a remote CSV file hosted on GitHub using `fetch()` and parses it with D3 v7’s `csvParse`. It uses a simple `pre` element bound to the parsed data array through a data join, with the `select`, `join`, and `text` APIs to render the dataset exactly as structured. The state management via `setState` handles the asynchronous loading sequence from `undefined` to `'LOADING'` to the final parsed array.

QQingyang Wang Profolio
78% match
Loading thumbnail…

Video Game Sales

This visualization displays the first record from the Video Game Sales dataset, showing detailed sales figures across regions and global totals. The code loads the CSV data, converts numeric fields, and renders a formatted JSON object in a styled HTML container. The example demonstrates basic data loading and preprocessing with a simple text-based output, using vanilla JavaScript to parse and display the dataset.

Wwkj0713@gmail.com
78% match
Loading thumbnail…

Video Game Sales

This example visualizes video game sales data from Kaggle, showing all games with over 100,000 sales. It uses d3.csvParse to load and parse the dataset, converting sales figures and release years to numbers for analysis. The visualization renders the current state as a JSON string in a pre element using d3’s data join, allowing users to inspect the raw data structure. The code demonstrates a state management pattern with setState, triggering re-renders through d3.select and text updates.

Hhmkyriacou
74% match
Loading thumbnail…

Video Game sales

This example displays basic metadata about a video game sales dataset, showing its size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using the D3.js v5 `d3.csv` method, then formats the content with `d3.csvFormat` to calculate the data’s byte size. The code also includes commented alternatives using the Fetch API and async/await with `d3.csvParse`. The dataset originates from Kaggle’s video game sales collection, with the visualization serving primarily to demonstrate CSV loading and summary statistics.

RRochelle
74% match
Loading thumbnail…

Video Game Sales

This example reads a CSV file of video game sales data from a public GitHub gist, originally sourced from Kaggle, and displays a plain-text summary of its size and structure. It shows the file’s approximate size in kilobytes, the row count, and the number of columns. The code uses D3.js v5’s `d3.csv` to parse the remote data and `d3.csvFormat` to measure its length, then writes the summary into a large `<pre>` element. Alternate commented approaches demonstrate `fetch` with `async/await` and `d3.csvParse`.

Ggeorgeeeee
73% match
Loading thumbnail…

Video Game Data Summary

This example displays a summary of a video game dataset, showing the total row count, column count, and data size in kilobytes, followed by a JSON-formatted preview of the first ten rows. The visualization reads a CSV file from a remote URL using d3.csv and presents the information as plain text elements on the page, with the summary rendered in a large preformatted block. The code relies on D3 v5 functions like select, csv, csvFormat, and scaleLinear, though no chart is drawn; it purely prints textual data summaries.

EEmma Schaale
73% match