wiki preview test

100%

wiki preview test

✓ Published0🌍 Public

Last edited Jun 9, 2023

Created on Jun 7, 2023

This example demonstrates an interactive Wikipedia link preview in a plain HTML page, where hovering over a linked article title displays its summary in a pop-up. The code uses the Wikipedia REST API to fetch article extracts on mouseover, then dynamically creates and positions a div element via the DOM API. The pop-up is removed on mouseout. While it loads D3 v7 from a CDN, the interaction relies on native JavaScript event listeners and fetch calls, not on D3-specific visualization functions.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Wikipedia Exploration Map

This visualization maps the user's personal browsing history through Wikipedia, displaying a branching tree of visited articles connected by hyperlinks. Built with D3.js v6, the SVG visualization uses `d3.tree` for hierarchy layout and `d3.linkHorizontal` for curved edges, with interactive zoom and drag via `d3.zoom`. Nodes contain clickable links to the original articles, and hovering reveals full article summaries in a `foreignObject` text container. The underlying data, structured as a JSON tree in `flare-2.json`, was scraped from the user's browser history using Python.

Cchristiand416@gmail.com

64% match

Loading thumbnail…

Tooltip example

This example demonstrates a basic tooltip interaction: hovering over a green circle reveals a text box that follows the mouse cursor. The tooltip is created as a separate HTML `div` element positioned relative to the page. The code uses `d3.select` to append an SVG circle and the tooltip div, and employs the `.on("mouseover")`, `.mousemove`, and `.mouseout` event handlers with `tooltip.style` to control visibility and position based on `event.pageX` and `event.pageY`. It runs on d3.v7 and renders all visual elements as SVG.

Mma-jacobs

64% match

Loading thumbnail…

test

This visualization displays the text "Hello D3 version 7" in enormous type, centered on a plain white page. It serves as a minimal demonstration of D3 version 7’s basic DOM manipulation. The page loads the D3 library from a CDN and executes a script that uses the `select` API to target the document’s `body` element and set its text content. The example highlights the simplicity of starting with D3’s core selection and modification methods.

MMing LIU

63% match

Loading thumbnail…

D3 Links Example

This example shows how to link SVG visual marks to external web pages by constructing URLs from data properties. Three rectangles each link to a different Wikipedia article, with the hyperlink target generated dynamically from an array of strings. The code uses D3.js (version 3.5.5) to bind data to anchor elements via `selectAll("a").data(data).enter()`, then sets the `xlink:href` attribute using a function that concatenates the data value with the Wikipedia base URL. Each rectangle is positioned with the `attr` method, and the rendering is SVG.

CCurran Kelleher

63% match

Loading thumbnail…

addlinkToObj

This example shows a single interactive link: a rounded, light-green rectangle labeled with the word “gongoozler” that, when clicked, opens the corresponding Wikipedia page. The visualization uses D3 v2 to append an SVG anchor (`<a>`) with an `xlink:href` attribute pointing to `http://en.wikipedia.org/wiki/gongoozler`, then attaches a `rect` inside it for the clickable area. A separate `text` element, styled with `pointer-events: none`, overlays the label without intercepting clicks. The code hardcodes the word and dimensions, rendering the result as static SVG with no data source or interaction beyond the hyperlink.

BBillalD

63% match

Loading thumbnail…

Exploratation

This example demonstrates a minimal D3.js setup where a heading renders the text “Hello VizHub!” in large, centered type. The page loads D3 v5 from a CDN and uses the `select` function to target a div by its ID, updating its content with a string imported from a local ES6 module. It highlights basic module imports, DOM selection, and text manipulation without any data binding or complex rendering.

HHanzhang1022

62% match

Loading thumbnail…

dots

This example displays a minimalist webpage with large, centered text reading “Hello D3 version 7.” It demonstrates the basic setup for D3 v7 by importing the `select` function and using `select('body').text(...)` to set the body’s content. The page includes a video tutorial link and references a Stack Overflow post about adding circles on click, though no mouse events or circle rendering appear in the visible code. The project uses the D3 library loaded from unpkg and separates the main logic into `index.js`.

KKhatera Alizada

62% match

Loading thumbnail…

testD3

A minimal test of D3 version 7 displays the word "Hello D3 version 7" centered on a blank page, with the body styled at a massive 13em font size. The page loads D3 from a CDN and runs a script that imports the `select` function from the library and logs it to the console. The code imports `select` but does not yet use it to render text, leaving the visible output dependent on the default empty body. The example demonstrates a basic setup for integrating D3 with an HTML page.

Ggaoqing027

62% match