Skip to main content
SimilarExport ZIP
100%

Lego Colors Dataset

✓ Published1🌍 Public
AAri Schechter
Last edited Sep 11, 2024
Created on Sep 5, 2024

This example visualizes the Lego Colors Dataset, displaying the first CSV record’s properties—ID, name, RGB value, and transparency—as formatted JSON in a large, readable pre block. It uses plain JavaScript to import and parse the CSV via a bundled data loader, then renders the parsed object with `JSON.stringify`. The code demonstrates a minimal setup for inspecting raw dataset entries, though it does not yet implement the color wheel, similarity comparisons, or hover interactions described in the project’s goals.

AI-generated description

The Lego Colors Dataset, loaded and parsed as CSV.

This dataset contains the LEGO Parts/Sets/Colors and Inventories of every official LEGO set in the Rebrickable database. These files are current as of July 2017. If you need it to be more recent data, you can use Rebrickable’s API which provides up to date data, and additional features.

The plan is to create some sort of visualization using all the hex codes in the datset

TASKS

  1. I want to be able to visualize the colors in the dataset
  2. I want to compare color values and be able to state whether two colors are similar
  3. I want to be able to see the names of the colors in the viz
  4. I want to organize the data in a color wheel
  5. I want to create hover actions to get a better look at a color
MIT Licensed

Similar vizzes

Loading thumbnail…

Lego Dataset

This example displays the raw JSON of a single Lego set record, converted from the CSV data. It shows the dataset's structure, including fields like item number, theme, piece count, and regional prices. The code uses a `container.innerHTML` assignment to render a `<pre>` element, presenting the first data row formatted with `JSON.stringify`. The source is the Lego Sets Dataset, and the visualization is a simple, static data inspection rather than a chart.

IIan Wright
82% match
Loading thumbnail…

Color wheel

This example visualizes the loading and parsing of a CSV file containing CSS named colors. It displays the file size in kilobytes, the number of data rows, and the number of columns in a large text format. The code uses the JavaScript `fetch` API with `async`/`await` to retrieve the remote CSV, then applies `d3.csvParse` to convert the text into a structured data array. The rendered output updates a `<pre>` element with the summary statistics.

LLaura Brown
69% match
Loading thumbnail…

color visualization

This example displays metadata about a CSS color dataset fetched from a remote CSV file. It reports the file size in kilobytes, the number of data rows, and the number of columns, rendered inside an HTML `<pre>` element. The code uses `d3.csvParse` to parse the raw text and JavaScript’s `fetch` API to retrieve the data from a GitHub gist, with D3 loaded via a CDN. The visualization is minimal, focusing solely on textual summary statistics rather than graphical representation.

PPUUDI
69% match
Loading thumbnail…

Color visualization

This example displays metadata about a CSS named colors dataset loaded from a GitHub gist, showing the file size in kilobytes, row count, and column count in large monospaced text. It uses D3 v7's `d3.csv` to fetch and parse the remote CSV file, then formats the data with `d3.csvFormat` to calculate its byte length. The page also includes commented-out alternative code using the Fetch API, `async`/`await`, and `d3.csvParse` to achieve the same result.

CChaz
68% match
Loading thumbnail…

getDataTest

This example demonstrates loading a CSS named colors CSV file and displaying basic metadata about the dataset. It reports the file size in kilobytes, the number of data rows, and the number of columns as large text on the page. The visualization uses D3 v5 APIs, specifically `d3.csv` to fetch and parse the remote CSV, and `d3.csvFormat` to calculate the dataset’s size, with the results rendered inside a pre-formatted HTML element. The data originates from a GitHub gist containing named color values.

NNoPlay1
68% match
Loading thumbnail…

CSV Color Visualizer

This example loads a CSV file of CSS named colors from a GitHub gist and prints its contents to the browser console. It uses the Fetch API to request the remote CSV text asynchronously, then logs the raw string output. The visualization itself is not yet rendered; the code currently only demonstrates data retrieval and parsing preparation, without any chart, canvas, or DOM manipulation. The page includes no external libraries, relying solely on native JavaScript promises and `fetch` for the network request.

Ddan815
68% match
Loading thumbnail…

All the colours

This example demonstrates how to load and inspect a CSV file containing CSS named colors using D3.js v7. It fetches the data from a GitHub gist and logs the file size in kilobytes, the number of rows, and the number of columns to the browser console. The code uses `d3.csv` for parsing, with an alternative commented-out approach using `fetch` and `d3.csvParse`. The visualization itself is minimal, focusing on data loading and preliminary analysis rather than rendering a visual output.

VVictor Masson
67% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Loading and Parsing CSV Data

This example visualizes the CSS Named Colors dataset, which maps college sports teams to their official colors and the order in which each color appears. The visualization renders as a scatter plot using the Chart.js library on an HTML canvas, with each point representing a color entry positioned by its index in the dataset. Points are colored using the actual hex values from the data, while the SVG file provides a simple film-strip graphic. The code demonstrates loading and parsing CSV data to drive the chart, with a React-based approach for structuring the application.

Cchamarthisreenivasvarma@gmail.com
67% match