Skip to main content
100%

Gist 1adbdacf6a95cfacb3cca1647ed20f39

✓ Published0🌍 Public
Aamundo
Last edited Jul 28, 2021
Created on Jul 28, 2021

This example shows every paragraph element on a page highlighted with a thick red border, transforming a plain HTML document into a visual checklist of text blocks. The script uses the standard Document Object Model (DOM) API, specifically `document.querySelectorAll('p')`, to select all paragraph nodes, then applies an inline CSS style via `p.style.border` with a `4px solid red` value. The rendering approach is direct DOM manipulation, with no external libraries or frameworks involved. The effect is immediate and static, permanently altering the appearance of each paragraph until the page is refreshed or the style is changed.

AI-generated description

Similar vizzes

Loading thumbnail…

07. D3 Paragraphs Style

This example demonstrates how to apply styling to HTML paragraphs created with D3’s data join. The code selects the `body` element, binds an array of five numbers to `p` elements, and appends a paragraph for each value, setting its text to “I can count up to” followed by the number. The paragraphs are then styled with red text using the `.style()` method with the property `color`. This showcases D3’s declarative approach to DOM manipulation and element styling.

Aamakanju@nyit.edu
68% match
Loading thumbnail…

D3.js

This example demonstrates a minimal HTML page that uses JavaScript to dynamically change the color of all paragraph elements to blue. The code retrieves paragraphs using the Document Object Model (DOM) API `document.getElementsByTagName`, iterates through them, and applies an inline CSS style property via `style.setProperty`. It relies on standard browser APIs rather than external libraries, with the script loaded asynchronously through the `defer` attribute in the HTML markup. The page contains no visual data visualization, focusing instead on basic DOM manipulation and styling.

HHaileabGH
68% match
Loading thumbnail…

Fork of D3.js

This example demonstrates how to apply inline CSS styling to paragraph elements using JavaScript. The code selects all `<p>` tags from the DOM and sets their text color to blue via the `style.setProperty` method. The visualization gallery presents a minimal HTML page without any data sources, relying solely on vanilla JavaScript and the Document Object Model (DOM) API for its interaction.

SSai Krupa Jangala
66% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page with four paragraphs of text, each rendered in blue. The page uses plain JavaScript to select all paragraph elements via `document.getElementsByTagName` and applies inline CSS color styling through `setProperty`. The included CSS centers the body text, while the HTML structure defines the static content. No external libraries or data sources are used, relying solely on native browser APIs for its simple presentation.

EEFisher828
65% match
Loading thumbnail…

HTML_basics

This example demonstrates a minimal HTML page with styled paragraphs, showing how CSS selectors target specific elements. It uses plain HTML tags and an embedded `<style>` block, with an `id` selector for the first paragraph and a type selector for all paragraphs. The page includes two short text passages, one describing a D3 workshop, and relies on basic document structure with `<header>` and `<body>` elements. No external libraries are used; it is a static HTML/CSS demonstration of fundamental styling and markup.

AAlbertFranco
65% match
Loading thumbnail…

SelectionTinker

Two HTML paragraphs initially render in black, then d3.selectAll changes every paragraph’s text color to blue, and finally d3.select overrides the first paragraph to red, demonstrating selection and chained styling. Using D3 v4, the example shows how a broad selection affects all matched elements while a narrower select targets only the first, with no data binding or interaction. The code relies solely on d3.select, d3.selectAll, and .style for DOM manipulation.

JJoelGallagher
65% match
Loading thumbnail…

Fork of D3.js

This example demonstrates how to set the text color of all paragraph elements to blue using vanilla JavaScript’s `getElementsByTagName` and `style.setProperty`. The code iterates through the collection of paragraphs and applies the styling directly. It uses a minimal HTML page with a referenced `app.js` script, which executes with the `defer` attribute to ensure the DOM is fully parsed before manipulation. No external libraries or frameworks are involved.

HHaileabGH
65% match
Loading thumbnail…

08. D3 Paragraphs Style Function

This example demonstrates how D3.js can set paragraph styles conditionally based on data values. It selects the body element and appends a paragraph for each number in the dataset [5, 10, 15, 20, 25], with text displaying the count. Using the `.style()` method, paragraphs with data values greater than 10 are colored red, while others remain black, illustrating data-driven styling with D3’s selection and data-binding APIs.

Aamakanju@nyit.edu
64% match