Title here

100%

✓ Published0🌍 Public

Last edited Jun 6, 2019

Created on Jun 6, 2019

This example tests browser support for coarse and fine pointer media queries. It displays the boolean results of `pointer: coarse`, `any-pointer: coarse`, `pointer: fine`, and `any-pointer: fine` as headings using D3 v5. The code uses `window.matchMedia` to assess the user’s primary and any input device, and dynamically loads D3 based on browser compatibility.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example demonstrates a crosshair annotation that follows pointer movement over an SVG. The visualization uses d3fc's `annotationSvgCrosshair` and `pointer` APIs to track mouse position and render intersecting horizontal and vertical lines at that location. Scales are defined with d3.scaleLinear. The code renders to a 1000x1000 SVG element within an HTML page, with a React framework setup. Each pointer event triggers a re-render, updating the crosshair's datum with the latest cursor coordinates.

HHazki

60% 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

59% match

Loading thumbnail…

box test

This example demonstrates basic chart interactivity by rendering a single green circle in D3.js version 7, which changes to magenta on mouse hover. The visualization uses D3's `select` and `pointer` functions to implement a custom tooltip that displays the circle's data, containing key-value pairs like "hello: world" and "yo: dog". The tooltip dynamically positions itself near the cursor, flipping to the opposite side of the screen edges based on mouse coordinates, while the circle's fill color resets when the mouse leaves. The code renders to an SVG canvas using the unpacked D3 library.

Aadventuresenglish.info@gmail.com

59% match

Loading thumbnail…

Mouseenter

A nested set of semi-transparent rectangles demonstrates the practical difference between D3’s mouseenter/mouseleave events and the standard mouseover/mouseout events. Each time the mouse enters a group, a text label with the event name (e.g., "mouseenter" or "mouseover") fades in at the cursor position, while moving between nested rectangles triggers only the mouseover/mouseout pair. The code attaches these four handlers to a recursively nested SVG `<g>` element, uses `d3.mouse` for cursor coordinates, and animates the labels’ opacity to zero via D3’s `transition`. A polyfill is mentioned for browsers without native mouseenter support.

Mmbostock

59% match

Loading thumbnail…

Stroke fun waterfall

This visualization is a test harness for evaluating browser rendering oddities in SVG strokes and text. It displays a grid of waterfall-style test cases with varying text, stroke widths, font sizes, and opacity settings, all rendered using D3.js v4. The tool demonstrates differences between `paint-order` and double-painting techniques, as well as `geometricPrecision` and `spacingAndGlyphs` text-rendering options. Users can adjust parameters via a fixed control panel or URL query string to isolate specific rendering behaviors across different browser engines.

HHerst

59% match

Loading thumbnail…

D3 Tests

This example demonstrates a minimal D3 setup by rendering the text “Hello D3 version 7” in the center of the page. It shows how to load D3 v7 from a CDN and use the `select` function to target the body element. The code calls `select('body').text(...)` to replace the page content, with styling via a large font size and centered alignment. It serves as a basic test for verifying that D3 is correctly installed and functioning.

Nnicolekevans

58% 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

58% 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

58% match