Smiley face Part I

100%

Smiley face Part I

✓ Published0🌍 Public

Last edited Mar 9, 2021

Created on Mar 9, 2021

This example displays a blank page intended to become a smiley face visualization. The code fetches a CSV file from a GitHub gist using JavaScript’s `fetch` API and logs its contents to the console. It uses vanilla HTML, CSS, and JavaScript without any external visualization libraries. The data source is a remote `.scv` file (likely a typo for `.csv`) containing the shape’s coordinates. The visualization itself is not yet rendered, only the data retrieval step is demonstrated.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This visualization displays a large, emoji-style smiley face as a playful backdrop, while the foreground presents a text summary of a CSV dataset loaded live from a GitHub gist. The summary reports the data’s size in kilobytes, row count, and column count. Built with React hooks `useState` and `useEffect`, it fetches the data using D3’s `csv` function and renders the message via JSX. The smiling face is initially drawn as commented SVG circles in the HTML, though the active view replaces it with the data brief.

JJohanna Magdalena

80% match

Loading thumbnail…

Smiley Face Part 1

This example displays a yellow smiley face rendered with SVG circles and an arc, while also displaying metadata about a CSS named colors CSV dataset. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth created using `d3.arc()` with specified inner and outer radii and start and end angles. The React app uses `d3.csv` to fetch the dataset and displays the file size and row count using `d3.csvFormat`. The face’s position is hardcoded, while the mouse move handler updates state but does not visibly affect the rendered output.

SSaurabh Jaswal

80% match

Loading thumbnail…

loading csv data

This example demonstrates the process of loading CSV data from a remote URL using JavaScript’s `fetch` API, with the fetched response logged to the console. The actual visualization, rendered as SVG, depicts a smiley face constructed with circles and an arc, built using the React framework and D3’s `arc` module for the mouth path. The code uses ReactDOM to render the SVG into the page, while the data source is a GitHub-hosted CSV file. The sample primarily focuses on the data-loading mechanism rather than the graphic’s interactivity.

Hhachen999

80% match

Loading thumbnail…

Smiley Part 1

A page displays a static yellow smiley face in an SVG canvas, composed of three black circles for eyes and a large yellow circle with a black outline for the face. The example uses the React library, loaded via a UMD script, alongside a raw SVG circle element rendered directly in the HTML. The code also includes a separate `index.js` file that imports React and logs it to the console, though no interactive behavior is present. The simple sketch demonstrates basic React setup and SVG drawing without any data processing or dynamic updates.

Llai-james

80% match

Loading thumbnail…

Fork of Smiley Face Part II

This example builds an interactive smiley face using React and D3 v5. The page loads a CSS named color dataset from a GitHub gist and displays its file size, row count, and column count in a text overlay. A single circle follows the mouse position across the full window, rendering via SVG elements managed through React state and event handlers. The visualization demonstrates React’s `useState` and `useCallback` hooks for responsive, real-time updates, with D3’s `csv` method fetching and parsing the external data.

JJYK

80% match

Loading thumbnail…

Smiley Face Part 1

This example renders a simple smiley face using SVG primitives. The code directly creates three circle shapes, a large yellow face with a black stroke, and two smaller black circles for eyes, all positioned on a static 960 by 500 canvas. The implementation relies on raw SVG elements embedded in an HTML document, with the overall styling controlled by a small CSS block that removes margin and hides overflow. There is no interactivity or data source; the visualization is solely composed of hard-coded coordinates and attributes. This demonstrates the fundamental use of SVG shapes and basic styling without any JavaScript or charting libraries.

DDylan Doucet

79% match

Loading thumbnail…

Smiley Part I

This example creates a smiley face using two static eye circles and a larger yellow face circle, rendered as SVG elements. The HTML page relies on vanilla JavaScript and CSS to suppress margins and create a clean viewport, with no interactive behavior. The SVG’s `cx`, `cy`, `r`, `fill`, and `stroke` attributes define the geometry and styling, while the 960×500 canvas is drawn directly in the markup.

JJeni Hoyt

79% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a webpage that asynchronously fetches a CSV file of CSS named colors and displays a summary of the loaded data, including its size in kilobytes, row count, and column count. The implementation uses React with hooks like `useState` and `useEffect` to manage the data loading state, and the D3 `csv` function to parse the remote CSV file. Rendered as HTML text within a div, the page initially displays “Loading” until the data arrives, after which it prints the derived statistics to both the console and the screen.

SSampras Dsouza

79% match