Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Nov 14, 2022

Created on Nov 14, 2022

This example demonstrates how to add interactive brushing to a D3 visualization. It displays a single circle in an SVG element that changes color based on user selection: the circle turns green when it falls within the brushed area and pink otherwise. The code uses d3.brush to create the selection region and listens to brush events to trigger the updateChart function. Rendering occurs via SVG, with d3 v7 handling both the circle and brush interactions.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal interactive D3.js visualization: a single circle rendered as an SVG element. The circle changes its fill color and radius when hovered, using a CSS transition for a smooth three-second animation. The code relies on D3 version 7, loaded from a CDN, and manipulates the SVG circle's attributes directly through CSS and HTML, without invoking any specific D3 functions or data binding. The visualization serves as a basic starter template for D3 projects.

JJasper Alblas

83% match

Loading thumbnail…

Basic brush practice

This example demonstrates interactive brushing on a 400×400 SVG canvas, where a single circle changes color based on whether it falls within the user’s brush selection. The brush updates the circle’s fill to blue when selected and red otherwise, using animated transitions. Built with React and D3 v5, the code leverages `d3.brush`, `d3.select`, and `d3.event.selection` to detect the brushed region and compare its coordinates against the circle’s position. The brush extent is fixed to the full canvas, and the color change triggers on both brush start and end events.

JJunyanL

81% match

Loading thumbnail…

Brushing Circles with D3-Brush

This example demonstrates interactive brushing on a scatterplot of six circles, where dragging a rectangular selection highlights overlapping data points. It shows how a brush can filter or emphasize specific marks in a visualization. The implementation uses D3’s `brush` module, with a `brush` event listener that checks each circle’s coordinates against the selection bounds to update a `highlightedSet` in the state. Circle styling (stroke, opacity) responds to the highlighted set, and the `end` event clears highlights when the brush is dismissed. The rendering uses SVG elements via D3’s `select` and `join` pattern.

CCurran Kelleher

81% match

Loading thumbnail…

Fork of D3 Starter

A minimal D3 starter example demonstrates a basic data join by rendering 15 circles across the screen. The code uses `d3.select` and `d3.range` to generate data, then employs `selectAll`, `data`, `enter`, and `append` to create SVG circles with fixed radii. It runs entirely in the browser with a full-window SVG canvas, set against a plain white background. The example highlights the core enter selection pattern in d3 v7, with the bundled JavaScript file containing the import and logic.

Ccaitlin-woods

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 6 starter project, rendering two circles on an SVG canvas: a large yellow circle with a dark stroke and a small dark circle. The code uses d3-selection’s `select` and `append` methods to build the SVG elements, with circle attributes like `r`, `cx`, and `cy` set via method chaining. Positioning relies on percentage and pixel values, and the visualization is embedded in a full-viewport HTML page with a large font-size style.

Mmagistrfox

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates basic SVG rendering and interactive dragging in D3 v7. It uses `d3.select` to append an SVG canvas and randomly positions 20 circles across a 960×500 coordinate space. The circles are rendered with `data` joins and the `join("circle")` method. Drag behavior is implemented with `d3.drag()`, which handles the `start`, `drag`, and `end` events to update circle positions via `event.x` and `event.y`. The code imports helpers such as `range`, `select`, and `drag` from the D3 module.

NNarottam Medhora

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for D3 version 7, rendering a single yellow circle with a black stroke inside an SVG element. The page loads D3 from a CDN and uses static SVG markup to display the shape, with no data binding or interactive behavior. The code includes commented-out imports and selection methods, showing how a D3 script would typically begin, while the current visualization relies solely on hardcoded SVG attributes.

RRubanda

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js starter setup, showing two circles (one red, one blue) connected by a path that updates dynamically. It uses an SVG rendering approach with D3 v7, where a line generator (`d3.line`) connects the circle coordinates. A `d3.timer` drives an update function that continuously re-reads the circles' positions and redraws the connecting line. The code also utilizes data binding with `selection.data()` and `selection.join()` to manage the path element between frames.

NNeel Mehta

80% match