Skip to main content
SimilarExport ZIP
100%

load-csv

✓ Published0🌍 Public
SShad Frigui
Last edited Feb 11, 2024
Created on Feb 11, 2024

This example demonstrates how a CSV file can be loaded, parsed, and prepared for visualization by displaying the first row of the Palmer Penguins dataset as formatted JSON. The code uses Observable’s data loading convention to import the CSV, then converts quantitative attributes like bill length, bill depth, flipper length, and body mass from strings to numbers using unary plus operators in a forEach loop. The rendered output shows the parsed object structure with all fields, including species, island, measurements, sex, and year, making the data transformation step explicit.

AI-generated description

The Penguins Dataset, loaded and parsed as CSV.

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…

Fork of CSV Dataset Template - Penguins

This example demonstrates how to load and parse the Palmer Penguins dataset, converting quantitative attributes like bill length and body mass into numeric values. The code displays the first data row as a JSON object in a preformatted text block, using the parsed CSV data imported directly from `data.csv`. The parsing logic iterates through each data entry, applying the unary plus operator to convert measurement columns from strings to numbers. The visualization relies on the imported dataset and the `main` export function to render the structured output to the container.

Vvaishnavi6gan@gmail.com
83% match
Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example demonstrates how to load and parse the Palmer Penguins dataset, converting quantitative attributes like bill length and body mass into numeric values. The code displays the first data row as a JSON object in a preformatted text block, using the parsed CSV data imported directly from `data.csv`. The parsing logic iterates through each data entry, applying the unary plus operator to convert measurement columns from strings to numbers. The visualization relies on the imported dataset and the `main` export function to render the structured output to the container.

Vvaishnavi6gan@gmail.com
83% match
Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example demonstrates how to display a parsed CSV dataset by rendering the first row of the Palmer Penguins data as formatted JSON. It shows the raw structure of a single data record, including both quantitative and categorical attributes, before any further analysis. The visualization uses the `data.csv` import and parses numeric fields like `bill_length_mm`, `bill_depth_mm`, `flipper_length_mm`, and `body_mass_g` with unary plus operators. The code then inserts a `<pre>` element with the JSON string into the container, leveraging the `main` export function and the `data` export for reuse.

Hharichandanamone21@gmail.com
81% match
Loading thumbnail…

Fork of CSV Dataset Template

This example displays the first row of the Palmer Penguins dataset as a JSON object in a large preformatted text block. It loads the CSV data, parses the quantitative attributes into numbers, and then renders the parsed first entry. The code imports data from `data.csv` and uses a stringified JSON representation to display the object within the container's inner HTML. The data originates from the palmerpenguins GitHub repository.

QQuinn Sebso
80% match
Loading thumbnail…

assign

This example displays the raw first row of the Palmer Penguins dataset as formatted JSON. The code imports the CSV file, converts quantitative fields like bill length and body mass to numbers, and renders the parsed object in a styled `<pre>` element. It demonstrates a minimal data-loading and parsing workflow for VizHub, using the built-in CSV import and template literal syntax to display the structured data.

Vvaishnavi6gan@gmail.com
79% match
Loading thumbnail…

CSV Dataset Template - Penguins

This visualization displays the first record from the Palmer Penguins dataset, a CSV file containing measurements of bill length, bill depth, flipper length, and body mass for three penguin species across multiple Antarctic islands. The code imports the data using VizHub’s built-in CSV loader, then coerces the quantitative attributes from strings to numbers with the unary plus operator. The parsed JSON output is rendered inside an HTML `<pre>` element, demonstrating the data structure for verification before further visualization. The example serves as a template for importing and parsing custom datasets in VizHub.

CCurran Kelleher
79% match
Loading thumbnail…

CSV Dataset Template - Penguins

This example displays the first row of the Palmer Penguins dataset in a preformatted text block. It imports the data using a rollup plugin, parses the quantitative fields (bill length, bill depth, flipper length, body mass) into numbers, and exports both a formatted display and the parsed data for external use. The code uses JavaScript’s `JSON.stringify` and a template literal to render the output.

Mmelissastrong89@gmail.com
79% match
Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example displays the first row of a penguin dataset as formatted JSON, demonstrating how CSV data is parsed and prepared for visualization. The code loads the data from `data.csv`, converts measurement columns like `bill_length_mm` and `body_mass_g` from strings to numbers, and then uses the `main` function to render the JSON string into the container. The dataset originates from the palmerpenguins GitHub repository, and the example uses D3.js conventions for data import and processing.

LLuca Liverani
78% match