Gist 206925505eea2e42a4bb63cd12861807

100%

Gist 206925505eea2e42a4bb63cd12861807

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This example displays a portrait of a character named Frodo, presenting a user image and title within a simple HTML structure. The visualization uses plain HTML and CSS, with the character’s name placed in a `user-title` div and the portrait in a `user-img` element that loads an external PNG file. The code does not employ any charting or interaction libraries; instead, it renders static content directly in the browser, relying on standard DOM elements and attributes for layout and display.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 362622e653494c155e16a41bd222e099

This example shows a single user card for a character named Sam, displaying a portrait image from the file frodo.png. The HTML structure consists of a div containing a user title and an image, with the code referencing a force simulation for potential layout calculations. It uses basic HTML and CSS class assignments, though no JavaScript libraries are imported in the visible markup, and the rendering relies on static image embedding rather than dynamic data visualization.

115Dkatz

83% match

Loading thumbnail…

0702

This example displays a large static message reading “Hello HTML!” centered on the page, styled with a 13em font size. It fetches JSON data from a GitHub repository using the Fetch API, but the retrieved records—showing first and last names—are appended as plain text divs into a container, with no visual mapping or charting. The visualization relies solely on JavaScript’s `fetch` and DOM manipulation via `document.createElement`, with basic CSS for layout. No charting library or data-binding framework is used despite the React label in the metadata.

HHalcyonWjr

63% match

Loading thumbnail…

My_Portrait

This data-visualization example, titled *My_Portrait*, uses a 2018 United Nations population estimate for the top 10 most populous countries to construct a bar chart of national demographics. The bars are rendered within an SVG canvas, and the chart's visual design incorporates a background-clip technique that applies a semi-transparent text fill via the `portrait` class, allowing the graphic to double as a stylized portrait. The project relies on D3.js v5 (loaded as `d3.v5`) and uses its core API to bind the numeric data to the bars' heights. Styling is handled externally through `Style.css`, which sets the page margins and defines the text-fill effect.

AAndrew-Kiwa

63% match

Loading thumbnail…

Lets Make a face

This example shows an interactive face constructed from a single, large text character that fills the browser window. The visualization relies on the D3.js library version 5, loaded from a CDN, and renders the output as a static SVG element. The code defines an HTML page with a 960 by 500 pixel canvas, sets the body’s font size to a massive value, and centers the content, creating a playful, typographic portrait.

HHashir Hameed Niazi

61% match

Loading thumbnail…

Fork of HTML Starter

This example displays a hand-drawn SVG illustration of a face alongside decorative text, rendered in a web page styled with CSS. The JavaScript-free visualization relies on CSS hover effects to change color, while the SVG paths remain static. Fonts are loaded from Google Fonts, and the document structure is defined in a single HTML file with a linked stylesheet. The design demonstrates basic SVG shape composition and interactive styling without additional libraries.

Vvalsorayksterob

61% match

Loading thumbnail…

Fork of HTML Starter

A static portrait of a face built from three SVG circles uses React components to render the scene. The large pink circle forms the head, while two smaller white circles serve as eyes, all positioned with hardcoded coordinates and stroke values. The code uses React 17.0.2 with ReactDOM to mount the SVG elements into the DOM, with dimensions and positions derived from JavaScript constants. No interactive behavior or data loading appears, as the visual is purely declarative and precomputed.

Rromainnifle

61% match

Loading thumbnail…

Gist 752e79ef7b1d634b16a9e7020da164ff

This visualization presents a narrative chart that maps character appearances and introductions across scenes in a story. Using D3.js’s narrative layout, it positions scenes horizontally and characters vertically, encoding each character’s presence as small black ellipses within scene clusters. The code employs mxGraph to render the final graph, with curved edges connecting characters across scenes. Appearance vertices are placed at precise scene coordinates, while introduction labels sit beside the timeline, with links drawn between these points. The underlying data wrangling occurs in a dedicated function that groups scene characters by ID, and the graph is exported as XML via mxCodec.

HHugoberry

61% match

Loading thumbnail…

Hello Lothar

This example displays a simple SVG face composed of a large yellow circle with a black outline for the head and two smaller unfilled circles for the eyes, all rendered directly in an HTML page. The static artwork is created using raw SVG elements—`<svg>`, `<circle>`, and attributes like `cx`, `cy`, `r`, `fill`, and `stroke`—within a basic HTML document, with CSS styling for the body margin and overflow. No interactive behavior or data binding is present; the visualization relies purely on declarative markup to produce the fixed composition.

Llok noe

60% match