Skip to main content
SimilarExport ZIP
100%

QuytD3

✓ Published0🌍 Public
Ttrongan765@gmail.com
Last edited Mar 4, 2024
Created on Mar 4, 2024
Forked from HTML Starter

This example shows how a single-page SVG visualization responds to user clicks by adding red circles at the click coordinates on an HTML page. The code uses D3.js version 7.8.5 to select the SVG container and bind a click event to the document body. Upon each click, the application appends a circle element with a fixed radius of 20 pixels, positioning it at the client X and Y coordinates of the mouse event. The implementation relies on d3.select and d3.event, with no external data source, and the page is written in Vietnamese.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Quyt-Study

This example displays a centered cyan circle on a full-screen SVG. It demonstrates the minimal setup for a D3 visualization within a React environment, using `d3.select` to append the `<svg>` element and then attaching the circle with `svg.append`. The circle’s position is set to the center of the viewport using `innerWidth` and `innerHeight`, and its fill is specified via the `attr` method. The code relies on the D3 library (version 7.8.5) and the `select` API, with the rendering handled entirely by SVG.

Ttrongan765@gmail.com
80% match
Loading thumbnail…

Clickable Circles with D3 and React

Clickable circles rendered in an SVG canvas demonstrate a React and D3 integration. The visualization shows 14 circles with varied positions, sizes, and colors from a static array. Clicking a circle selects it, highlighting its outline with a black stroke. The App component manages selection state and re-renders the D3 visualization via `select()` and `.join()` for efficient DOM updates. The `viz` function uses D3’s SVG selection API to set attributes and attach click handlers, while React’s `useState` and `useEffect` control the interactive response.

CCurran Kelleher
76% match
Loading thumbnail…

Thuc hanh D3

This example displays a blank, full-viewport SVG scene with a solid red background, rendered through a React application. The visualization demonstrates basic D3.js v5 setup, using `select` to grab the SVG element and applying the background color via D3’s style method. The SVG is sized 960 by 500 pixels, with CSS resetting margins and hiding overflow. The code imports only the `select` function from D3, showing a minimal integration of the library into a React-based workflow, with the SVG markup defined directly in the HTML.

Nnphau011
75% match
Loading thumbnail…

Quyt-D3-Selection

This animated D3 visualization demonstrates a dynamic selection and update pattern for SVG circles. Using `d3.select` and `d3.range`, it generates a time-varying dataset with positional and radius values calculated from sine waves. The `vizData` function applies a data join to a circle selection, updating `cx`, `cy`, and `r` attributes at 60 frames per second. The example shows how D3’s modern selection API can efficiently manage a growing and shrinking set of visual elements while the underlying data changes continuously.

Ttrongan765@gmail.com
75% match
Loading thumbnail…

d3

This example demonstrates a single red circle with a green stroke, centered inside a 500-by-500 SVG canvas. The code uses D3 v6 to select the SVG element, append a circle, and set its radius, position, and fill and stroke colors via attribute methods. The visualization anchors the circle using fixed pixel coordinates, while the body text is styled with a 13-em font size for a bold, minimal layout.

Ggyanendra verma
74% match
Loading thumbnail…

SVG

This example displays three circles positioned horizontally in an SVG container. The first circle is black, the second is red, and the third is green, with varying sizes to show basic SVG styling. It uses plain HTML and inline SVG elements, including the `<circle>` tag with attributes for center coordinates, radius, and fill color. The code demonstrates fundamental vector graphics rendering directly in the browser without any external libraries or data sources.

Nnguyenloan1506
74% match
Loading thumbnail…

react

This example demonstrates a minimal interactive SVG visualization built with React and D3. A single red circle is rendered at the center of a 960×500 canvas using React’s declarative JSX syntax. The code imports the `arc` function from D3 v5, though it is not used in the final output. Mouse movement over the SVG triggers `handleMouseMove`, logging `clientX` and `clientY` coordinates to the console via the `onMouseMove` event handler. The visualization uses React 16.9, ReactDOM, and D3 v5, rendered as SVG with no external data source.

MMuhammad Ahmad
74% match
Loading thumbnail…

Clickable Circles with D3 and React

A grid of pastel-colored circles, each positioned by explicit pixel coordinates from a static data array, fills the visualization. React manages the application state while D3's `select` and `join` methods render the SVG `<circle>` elements. Hovering a circle triggers a `mouseover` event that calls `setSelectedId`, updating React state and re-running the D3 selection to draw a black stroke around the active circle, while `mouseout` clears the highlight.

223100098@lums.edu.pk
74% match