fresh block

100%

✓ Published0🌍 Public

Last edited May 13, 2017

Created on May 13, 2017

This example demonstrates a simple draggable circle rendered as an SVG element within a Vue.js component. It shows how a mouse interaction can update the circle’s position, with the circle following the cursor only while the mouse button is held down after clicking. The implementation combines Vue 2.3.3 for component logic and data binding with D3.js v4 for event handling and mouse coordinate retrieval via `d3.mouse`. The circle’s `cx` and `cy` attributes are updated dynamically, and the interaction is managed through Vue’s `@mouseenter` and `@click` directives, alongside D3’s `on('mousemove')` method. No external data source is used; the visualization is purely interactive.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A single static circle is drawn on a blank SVG canvas using D3 v4. The code selects the body, appends an SVG element with fixed dimensions, and places the circle at coordinates (300, 300) with a set radius, though several attribute chains remain incomplete. The example demonstrates the basic structure for creating simple geometric shapes with D3’s selection and attribute methods, relying on the SVG namespace for rendering. No interaction, data binding, or scales are involved, making it a minimal starting point for understanding D3’s core drawing syntax.

JJorrisVerboon

77% match

Loading thumbnail…

Hello HTML

A simple interactive SVG circle follows the mouse pointer across a 960-by-500 blank canvas, updating its position in real time. The visualization uses React 17 with the `useState` hook to manage the circle’s coordinates, which are updated on every `mousemove` event on the SVG element. The circle’s center is set via the `cx` and `cy` attributes, while D3 v5 is loaded but not directly used in the rendering logic. The example demonstrates state-driven updates in a React-rendered SVG without any external data source.

CChristian

76% match

Loading thumbnail…

fresh block

A purple circle is centered on an SVG canvas with a counter displayed as text beside it. Clicking the circle increments the count and enlarges the circle’s radius based on the new value. The code uses d3.select to bind a click handler and update the text and circle attributes, with a simple count() function tracking the integer state. Rendering is done via SVG elements created through D3 v4’s selection API.

MMyoshu

76% match

Loading thumbnail…

fresh block

This example shows a simple line chart with circular dots plotted against a linear scale, where both axes use a value range of 0 to 1. The visualization begins with a static rendering, but the dots respond to mouseover and mouseout events, changing color to red and scaling up briefly before returning to black. The code uses D3 v4 with `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, while SVG circle elements handle the interactive hover behavior via `transition().duration(500)`. Data is randomly generated with `d3.randomUniform`, and the chart fills the browser window.

663anp3ca

76% match

Loading thumbnail…

fresh block

A minimal D3.js v4 example renders a single orange circle in an SVG canvas, demonstrating basic shape creation and attribute assignment. The circle is positioned at coordinates (120, 200) within a fixed 960×500 pixel SVG, though the code omits explicit fill color, leaving the circle black by default. Using the `d3.select` and `append` methods, the visualization constructs an SVG element directly in the body, with no data binding or interaction. The example serves as a starting point for learning D3's declarative element generation, relying on static attributes rather than dynamic scales or transitions.

JJorrisVerboon

76% match

Loading thumbnail…

fresh block

This example shows three circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js version 3.5.5 to bind an array of numbers to circle elements and map each value to screen coordinates. The code selects the SVG container, appends circle elements, and sets their cx and cy attributes directly from the data, while fill colors are assigned conditionally: green for 30, purple for 70, and red for 110. The rendering approach relies on D3’s data join and attribute manipulation, with no axes or scales involved.

BBrandonStroud

76% match

Loading thumbnail…

fresh block

This example displays a circular arrangement of ten circles, each with a radius of 50 pixels, positioned around a central point using a computed angle function. The visualization is built with D3.v4, rendering SVG elements onto a 960x500 canvas, with circles placed via an angular distribution formula. The code includes a mouseover event that is intended to change the circle's style, though the specific styling action is not defined. The data comes from a simple generated range of ten values.

GGJHazelaar

76% match

Loading thumbnail…

fresh block

This example shows a minimal, static visualization composed of a single filled circle rendered inside an SVG canvas, with no interactive or animated behavior. The code builds the graphic using the D3.js v5 library, selecting the body element and appending an SVG container with a circle element; the circle’s radius is set but its center coordinates are misspelled as “cv” and “cy,” leaving it positioned at the default top-left origin. The page also includes CSS class “.barras div” suggesting a bar-chart styling, but no bars are generated. The rendering approach relies on D3’s selection and DOM manipulation methods, with no data loading or complex scales involved.

JJuanma-GP

75% match