Make Something

100%

Make Something - Gauri Jare

✓ Published0🌍 Public

Last edited Jan 14, 2023

Created on Jan 14, 2023

A teal rectangle follows the mouse cursor across a full-window SVG canvas. The code uses d3.select to create the SVG and append the rectangle, setting its width and height based on the window dimensions. A mousemove event handler updates the rectangle’s x and y attributes with the cursor’s event coordinates. The plain black-stroked shape moves freely, demonstrating basic D3 interaction with the DOM.

AI-generated description

A circle that follows the mouse.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make something, move and click mouse

A small circle follows the mouse as it moves across an SVG canvas. Clicking the mouse drops a larger, randomly colored circle at the click position, with colors selected from a fixed palette of blue, red, yellow, green, and pink. The example uses D3.js v7 selection and event handling methods, including `svg.on('mousemove')` and `svg.on('click')`, to update circle attributes such as `cx`, `cy`, `r`, and `fill`. The SVG is sized to the full browser window.

QQingyang Wang Profolio

78% match

Loading thumbnail…

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen, using a unidirectional data flow pattern. The code uses d3-selection’s `select` and `selectAll` with data joins to create and update an SVG element. Mouse movement events trigger a `setState` function that updates an immutable state object with the cursor’s `x` and `y` coordinates, which then re-renders the circle’s `cx` and `cy` attributes. The rendered circle has a fixed radius of 50 pixels, and the SVG fills the entire viewport.

QQingyang Wang Profolio

77% match

Loading thumbnail…

Make Something

A minimal SVG visualization displays an empty 1000-pixel-wide canvas with a single horizontal axis drawn using d3.axisBottom. The axis maps a linear scale from 0 to 100 across a range of 100 to 800 pixels, rendered as a static tick-marked line. The code uses d3.scaleLinear and d3.axisBottom within a d3-selected SVG container. No data points, marks, or interactive elements appear; the example focuses solely on demonstrating axis construction and positioning.

QQingyang Wang Profolio

75% match

Loading thumbnail…

Title Here

A gray square follows the mouse cursor across an SVG canvas, demonstrating basic pointer tracking with D3.js. The visualization uses d3.select to create an SVG and attach a rectangle element, which responds to mousemove events by updating its x and y attributes based on the event coordinates. The square never changes size or color, and the behavior is contained entirely within the SVG viewport.

KKhatera Alizada

74% match

Loading thumbnail…

Mouse Follower (Make Something)

A rectangle moves in opposition to the mouse's cursor, its position derived from the inverted coordinates of the pointer within the viewport. Clicking resets the rectangle to the mouse's location by swapping the axes. Built with D3 v7 and the `select` API, the visualization uses `svg.on('mousemove')` and `svg.on('click')` handlers to update state, which then drives the rectangle's `x` and `y` attributes, styled with an orange fill and purple stroke.

MMatthew Dzwil

73% match

Loading thumbnail…

Fork of Mouse Follower Simple Make Something Francesca Sajedi

A green circle and red rectangle respond to the mouse. As the cursor moves, the circle repositions to the cursor's coordinates while the rectangle's width and height scale to match those same x and y values. The visualization uses the D3.js select and append methods to create SVG elements, binding a mousemove event to update the shape attributes dynamically. The SVG canvas fills the entire browser window.

Ffsajedi22

72% match

Loading thumbnail…

Mouse Follower

A violet square with a dashed magenta border follows the mouse cursor across a full-screen SVG canvas. The visualization responds to every mouse movement event, continuously updating the square’s x and y coordinates to center it on the pointer. Built with D3 v7, it uses the `d3.select` and `svg.append` APIs to create and manipulate the rectangle, while the `svg.on('mousemove', ...)` handler updates the rect’s position attributes. The square measures 50 by 50 pixels and is positioned relative to the viewport dimensions set from `window.innerWidth` and `window.innerHeight`.

IIshaChid76

72% match

Loading thumbnail…

d3.bayview walkthru

This example demonstrates a decorative, static composition of orange and red geometric shapes—a large rotated rectangle and multiple circles—rendered within an SVG canvas. The code applies a shared CSS style to both `rect` and `circle` elements, giving them a blue stroke with dashes and transparency. It uses D3.js version 3.5.5, referencing the `d3.select` API, though the primary drawing is hand-coded in markup. The gist includes a minimal HTML file and README, with the shape placement and attributes defined directly.

GGordyD

71% match