Skip to main content
100%

Gist 8c151c128174d8bef51ffcbe4ba2f0dc

✓ Published0🌍 Public
Aabernier
Last edited May 22, 2020
Created on May 22, 2020

This example demonstrates a lecture-style data visualization that uses CSS to prepend the text “hello” to elements with the class `alert.lecture`, as defined in the `lecture.css` file. The code employs standard CSS selectors and the `:before` pseudo-element to inject content dynamically into the page. It illustrates how lightweight styling rules can alter visual presentation without JavaScript libraries or complex APIs, relying solely on native CSS features to modify the rendered output. The effect is immediate and purely style-based, with no interaction or data processing involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 280440

This visualization demonstrates a custom hover effect for navigation links, where each link reveals a small dot marker on its left side. The effect is implemented using CSS pseudo-elements, specifically `:hover:before`, which injects the dot image via the `content` property. The dot is positioned absolutely using `top: 6px` and `left: 4px` relative to the link, and the rule applies only when the user hovers over the link. No JavaScript or data libraries are involved; the example relies purely on CSS styling. The `gistfile1.css` file contains the styling, and the dot image is loaded from an external path.

CCaged
65% match
Loading thumbnail…

4.14.2021.InfoDesign

This example demonstrates a minimal HTML page that combines CSS and JavaScript to display a styled heading and trigger an alert. The page uses an external stylesheet, `info.css`, to render the heading text in white on a black background, while the external script `java.js` calls the browser’s `alert()` function to show the message “information desing” on load. The embedded script logs “Hello JavaScript!” to the console. The code references no visualization libraries, relying solely on basic DOM elements and standard web APIs.

EErin2021
65% match
Loading thumbnail…

21.04.08-html기초

This example demonstrates a minimal HTML page that combines CSS and JavaScript to display static text and alert messages. The page includes an `h1` heading styled with white text on a black background via an external stylesheet (`info.css`), while embedded scripts log arithmetic results and strings to the browser console using `console.log`. The code also loads an external JavaScript file (`javascript.js`) that triggers an `alert` message. No data or dynamic rendering occurs; the focus is on foundational HTML structure, CSS styling, and basic script execution order.

Jjungsu
65% match
Loading thumbnail…

Pseudo Visualization

This example displays a minimal HTML page with a large, centered greeting message. A small JavaScript script logs “hello world” to the browser console, while a CSS rule styles the message text at 12 em. The visualization demonstrates the basic structure of a web page using plain HTML elements, a linked stylesheet, and a module script, offering no data or interactive rendering.

Jjeevanprasad.shivarathri@zemosolabs.com
65% match
Loading thumbnail…

SVG Foundamentals

This example displays a simple HTML page with a large centered message reading “Hello HTML!” styled via CSS. It demonstrates the foundational structure of a web-based visualization setup, including an external stylesheet and a JavaScript module. The code uses no data or rendering libraries; instead, it relies on basic DOM elements and a script that only logs “hello world” to the console. The visualization shows no interactive or dynamic behavior beyond the static text styling.

Llzhang774@gatech.edu
65% match
Loading thumbnail…

Fundamentals

This example demonstrates the fundamental building blocks of web-based visualization by displaying a static text message, "Hello HTML!", centered on the page using CSS. The code defines a `.message` class with a font-size of 13 em and text-align center, applied to a div element within the HTML body. No JavaScript is used; the styling is entirely handled through the embedded `<style>` block. It serves as a minimal illustration of how HTML structure and CSS presentation combine to create a basic visual output.

Ttobrie5
64% match
Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered "Hello HTML!" message using CSS styling and static text, serving as a minimal demonstration of combining HTML, CSS, and JavaScript. The page defines a `.message` class with a 13em font size and text alignment, while the body contains a single div element. The code includes a separate module defining a `colorLegend` function that builds D3.js legend components with background rectangles and tick groups, though it is not invoked in the HTML. No external libraries are loaded, and the visualization relies solely on standard web technologies without dynamic data or interaction.

TTaheniataallah
64% match
Loading thumbnail…

html_basics

This example demonstrates basic HTML and CSS styling for text and SVG shapes, with a primary focus on the cascade and specificity of CSS selectors. The page contains two paragraphs: the first is styled with a larger font size and pink color via an ID and class selector, while the second uses a plain element selector. The visualization also includes a yellow circle drawn with an inline SVG element, using standard SVG attributes for positioning and appearance. The code relies on native web APIs—HTML, CSS, and SVG—without external JavaScript libraries, showcasing fundamental front-end techniques.

BBillyBHWong
64% match