ICE5

100%

✓ Published0🌍 Public

Last edited Mar 3, 2023

Created on Mar 3, 2023

Forked from Fork of Let's make a face with D3.js!

This example displays metadata for the Bike Share Demand dataset, showing the file size, row count, and column count after fetching the CSV with `d3.csv`. The page then renders a yellow smiley face using D3 selections, where the eyebrows animate up and down via chained `transition().duration()` calls. The visualization relies on D3 v7’s `select`, `arc`, and transition methods, while the background image and dataset are sourced from GitHub gists.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE5

This page displays the bike information of customers, presenting the dataset's metadata through a simple textual readout. The visualization shows the data file's size in kilobytes, its row count, and column count within a preformatted text container. The example loads a CSV file from a GitHub gist using D3.js version 7.3.0, specifically leveraging the `d3.csv` and `d3.csvFormat` APIs to fetch and analyze the data. A Honda SVG background image is applied via CSS, with the page featuring clickable links to view the underlying bike details dataset.

MMounishSeeni

82% match

Loading thumbnail…

ICE-5 DV

This example uses D3.js to render a smiley face and animate its eyebrows through a sequence of `transition().duration()` calls. The face is drawn with SVG shapes—circles for the eyes and head, rectangles for eyebrows, and an arc path for the mouth—all positioned via a central `g` element. It also fetches a CSV file of laptop purchase data and displays dataset metadata, including size, row count, and column count, in a pre element.

Ssiddu7147

80% match

Loading thumbnail…

ICE 5

This example loads the Disney movies dataset from a remote CSV file using D3 v5’s `d3.csv` and `d3.csvFormat` APIs, then displays basic metadata about the file on the page. The visualization shows a static SVG line drawing of a geometric shape with colored ellipses and grid-like lines, while the text area below reports the dataset’s size in kilobytes, row count, and column count. The SVG is hand-coded in HTML, and the data summary is rendered into a `<pre>` element. No interactive or data-driven visual encoding is present; the graphic is independent of the loaded dataset.

Bbrindapotluri

79% match

Loading thumbnail…

ICE5

A D3.js animation renders a red smiley face with horns, mustache, beard, and teeth on a light blue background. The face’s eyebrows rotate and shift downward over two seconds using `transition.attr` and `transform` operations. The example demonstrates DOM manipulation and SVG shape generation with `d3.arc`, `d3.line`, and `d3.curveBasis`. It also loads COVID case metadata from a CSV file via `d3.csv`, displaying file size, row count, and column count as text.

Ssrividyabachina22

79% match

Loading thumbnail…

ICE5

This example displays metadata about a car evolution dataset covering 1945–2020, presented as text over a background image of a car. It shows the file size in kilobytes, row count, and column count of the loaded CSV data. The visualization uses D3 v7’s `d3.csv` to fetch and parse the external dataset, then `d3.csvFormat` to calculate its size. Styling is handled with CSS, including background positioning and text alignment. The page is built with plain HTML and JavaScript, without a React framework despite the metadata listing one.

Rrajkumarboddapati2

78% match

Loading thumbnail…

ICE5

This example demonstrates loading and parsing a remote CSV dataset using D3 v7. The page displays a summary of the loaded data, including its size in kilobytes and the number of rows and columns, within a styled HTML page. It uses the `d3.csv` and `d3.csvFormat` APIs to fetch and process the data from a GitHub gist. The visualization also includes an embedded static SVG city illustration.

AAmar09nath

78% match

Loading thumbnail…

ICE5

This example displays the metadata of a university dataset loaded from a CSV file. Using D3 v7, the code fetches the data with `d3.csv` and computes the file size in kilobytes via `d3.csvFormat`, along with the number of rows and columns. The resulting information is rendered as plain text in a `<pre>` element, while a CSS background image of a credit card and a green accent color style the page. The visualization shows a minimal, text-based summary rather than a graphical chart.

Rradhadevarapu

78% match

Loading thumbnail…

ICE5

This example displays metadata about an electronic store dataset, including its size in kilobytes, row count, and column count. The page loads a CSV file from a remote URL using D3 v7’s `d3.csv` method, then calculates and displays the dataset’s statistics inside a `<pre>` element. The background features a custom SVG image, and text styling is applied via CSS. The interface includes a hyperlink to the original dataset and uses plain JavaScript with D3’s `csvFormat` to compute the byte length of the data.

HHarshavardhan

78% match