Test shadow dom

100%

Test shadow dom

✓ Published0🌍 Public

Last edited Jan 6, 2023

Created on Jan 6, 2023

This example demonstrates an attempt to embed a remote web viewer inside a custom HTML element using the Shadow DOM. The page defines a `dso-viewer` custom element that fetches HTML from `https://viewer.dso.kadaster.nl/viewer` and injects the response into its shadow root. The code uses the Fetch API with a `no-cors` mode, though the response is only logged to the console rather than rendered. A large styled message appears above the element, but no actual visualization or data is displayed.

AI-generated description

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

Similar vizzes

Loading thumbnail…

SVG Foundamentals

This example renders a single white, card-like SVG shape with a drop shadow, demonstrating foundational SVG elements and filters. The code defines an SVG canvas with a 1440×550 viewBox, using a `<path>` with `fill-rule="evenodd"` to create the curved panel. A `<filter>` with `feDropShadow`-style operations (`feOffset`, `feGaussianBlur`, `feColorMatrix`, and `feBlend`) adds a soft gray shadow beneath the shape. The page is a bare HTML document with inline CSS and JavaScript, showing how to embed SVG markup directly.

Ddhou47

62% match

Loading thumbnail…

React & D3 Barebone

A minimal web application renders the text “Hello React!” to the browser. The example combines React 17, ReactDOM, and D3 6.6 to demonstrate a basic setup. The `index.html` file loads these libraries from a content delivery network, while `index.js` imports React and ReactDOM, defines a simple arrow function component, and uses `ReactDOM.render` to mount it to the `#root` element. The page includes custom CSS to remove body margins and hide overflow.

WWolfgang

61% match

Loading thumbnail…

test

This example demonstrates a minimal D3 version 6 setup where a large “hello” text replaces an SVG element on a black background. The page loads a 960x800 SVG, but the JavaScript removes it and appends a paragraph element containing the result of a simple `hello` function. Using vanilla DOM methods (`document.querySelector`, `createElement`, `appendChild`, `removeChild`) alongside the D3 v6 library loaded from a CDN, the code highlights basic script integration and DOM manipulation in a visualization context.

IInnoFail

61% match

Loading thumbnail…

HTML Starter

This minimal HTML page demonstrates a bare-bones web setup using inline styles, a separate JavaScript file, and the D3 library loaded via CDN. It logs the D3 object to the browser console, verifying that the library has loaded successfully. The example serves as a starting point for building more complex visualizations, showing how to structure an HTML document with linked CSS and JavaScript, while relying on D3 v6 for future data-driven graphics.

Aainhoadieruiz@gmail.com

61% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that loads D3.js via a CDN and renders a root element into which JavaScript draws content. It uses the D3 v5 library within an HTML structure, with a separate `bundle.js` file containing the application logic. The page initializes a blank `div` with the ID `root`, and the script leverages D3 to create dynamic visualizations. The setup shows a basic integration of D3.js into a standard HTML document, serving as a starting point for more complex projects.

DDmytro Tyshchenko

61% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that uses D3 v5, loaded from a CDN, to render a single styled `<div>` element containing placeholder text. The code sets up a basic document structure with a large centered body font and a bordered box, showing how to integrate D3 into a plain HTML page without any additional frameworks. It highlights the core pattern of combining standard HTML elements with D3’s script tag inclusion, serving as a foundational template for more complex visualizations.

Jjuhwanoh

61% match

Loading thumbnail…

HTML Starter

This example displays a large, centered “Hello HTML!” message and logs the contents of a remote CSV file to the browser console. It uses the d3-fetch and d3-dsv libraries, calling `d3.csv()` to load the dataset from a GitHub raw URL. The page structure is plain HTML with embedded CSS styling for the message text.

Rrickardviik

61% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that uses D3 v6 to render a single blue rectangle onto an SVG canvas within a React-based project structure. The page includes embedded CSS that centers and enlarges body text, while a script appends an SVG element with fixed 500x500 dimensions, then selects and appends a rectangle with hardcoded position and size attributes. The code also logs a message to the browser console and serves as a bare-bones starting point for visualization development.

TTrustPaul

60% match