Skip to main content
SimilarExport ZIP
100%

Activity 6

✓ Published0🌍 Public
Rrikhitakoganti12
Last edited Jun 29, 2023
Created on Jun 14, 2023
Forked from Hello VizHub

This example displays the first 10 rows of a CSV crop dataset as JSON text on a black background, using D3 v5 to load and format the data. The code imports `select`, `csv`, and `csvFormat` from D3, fetches the CSV via a gist URL, and appends a styled `<pre>` element to the body, with the file size computed in kilobytes.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

activity6

This example displays the first ten rows of a CSV dataset in a formatted JSON structure on a black page. It uses D3 v5’s `csv` and `csvFormat` functions to fetch and measure the dataset, while `select` appends the data to the body as HTML `<pre>` elements. The page also embeds a large background SVG image rendered as an inline base64-encoded JPEG pattern.

Ppjdhungana@gmail.com
93% match
Loading thumbnail…

Activity 6

This example loads a CSV dataset from a GitHub gist and displays the first ten rows as a JSON-formatted string in a black `<pre>` block. It uses D3 v5’s `csv` method to fetch and parse the data, then `json.stringify` to format the records for display. The SVG element in the HTML contains a base64-encoded JPEG image rendered as a pattern fill, while the Vue-based page styles the output with custom font and background colors. The total file size is calculated using `csvFormat` and `Math.ceil`.

Vvineelaramulapalli32
93% match
Loading thumbnail…

Activity 6

This example displays the first ten rows of a remote CSV dataset as JSON text within an HTML page. It loads data from a GitHub-hosted CSV file and presents it in a black, styled preformatted block. The code imports only the `select`, `csv`, and `csvFormat` functions from D3 v5, and it renders output as SVG elements in the body. The visualization is minimal, focusing on raw data inspection rather than graphical representation.

Vvineelaramulapalli32
92% match
Loading thumbnail…

Activity 6

This example fetches tabular data from a remote CSV file and displays the first ten rows as JSON in a black, aqua-colored `<pre>` block. It uses D3 v5’s `csv` method to load the dataset and `csvFormat` to calculate file size, though the size calculation is not rendered. The page renders as static SVG and WebGL elements, with a background image embedded in the HTML, but the primary interaction is the simple text preview of the loaded data.

VVinay Vemuri
91% match
Loading thumbnail…

Activity 6

This example demonstrates how to load and inspect a CSV dataset using D3 version 5, displaying the first ten rows as formatted JSON in the browser. The code uses the `csv` function from D3 to fetch data from a GitHub gist, then appends `<pre>` elements to the page body via `d3.select` and `selection.append` to show the raw data and a JSON representation. The page also includes a static SVG background image and a YouTube tutorial link.

Bbogasamudramvamsikrishnareddy
90% match
Loading thumbnail…

Activity 6

This example displays the first 10 rows of a CSV dataset as formatted JSON text on a page. The code uses D3 v5’s `csv` method to fetch data from a remote GitHub gist, then appends the sliced rows to the body with `select` and `append`. The visualization itself is minimal, showing raw data rather than a chart, with a black background and aqua text styled via an HTML `<pre>` element. The page also embeds a YouTube video in an iframe.

Rrushithareddyy
90% match
Loading thumbnail…

Activity6

This example loads a CSV from a GitHub gist using `d3.csv` and renders the first ten rows as JSON inside a `<pre>` element appended to the body via `d3.select`. It imports `select`, `csv`, and `csvFormat` from D3 v5, and computes the dataset size in kilobytes with `csvFormat`. The page also demonstrates local ES6 module imports with an exported message variable, though that message is not displayed in the visible output. The static SVG background image is embedded directly in the HTML.

Hharipriyaa07
90% match
Loading thumbnail…

Activity 6

This example loads a CSV file from a GitHub gist and displays the first ten rows as formatted JSON in a black, aqua-colored `<pre>` block. The code uses `d3.csv` to fetch and parse the data, `csvFormat` to calculate its size, and D3 selections to append elements to the body. The page also includes an embedded SVG image and a separate ES6 module exporting a greeting message. It runs in a Vue project with D3 v5 loaded via UNPKG, demonstrating local module imports and SVG rendering.

KKeerthiAnnem
90% match