Skip to main content
SimilarExport ZIP
100%

Framework

✓ Published0🌍 Public
Ttsmithv11
Last edited Apr 19, 2020
Created on Apr 19, 2020

This example demonstrates how to build a simple interactive framework using D3.js by modifying SVG elements in response to user input. It displays a blue rectangle centered within an SVG canvas, and clicking on the rectangle changes its fill color to green. The code uses D3 selections and the `select` and `arc` imports from the d3 module, with the `on("click", ...)` method to attach the event handler. The visualization relies on D3 v5 and renders directly to SVG with dimensions of 960 by 500 pixels.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2
77% match
Loading thumbnail…

D3 Intro

An empty SVG canvas is colored entirely red through a simple demonstration of D3's DOM manipulation. The code selects the `svg` element using D3's `select` function and applies an inline background color style. This example serves as a minimal introduction to D3 v5, using the library loaded from a CDN and bundled via rollup. The rendering relies on SVG, with no data binding or visualization yet, focusing solely on establishing the basic workflow of selecting elements and applying styles.

Ssploitfun
75% match
Loading thumbnail…

d3.js selection frame example

This example demonstrates interactive rubber-band selection in an SVG canvas using D3.js v3. It shows how users can drag to draw a rectangular selection frame over a set of labeled circles, with the selection rectangle dynamically resizing to accommodate drags in any direction. The code uses D3’s `mousedown`, `mousemove`, and `mouseup` events on the SVG element, appending a `rect` with the `.selection` class and updating its position and dimensions via `d3.mouse`. The circles, defined in a static JavaScript array, highlight on mouseover and clear the selection on release.

JJosephSKh
74% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle and a rectangle—hand-coded directly in an HTML document, with D3.js v5 loaded for broader data-driven visualization capabilities. The page also showcases ES6 module imports, including a custom `myMessage.js` module that exports a string, and uses D3’s `select` API to update a designated div’s text. Rendering relies entirely on SVG markup within the browser, with minimal styling applied via a separate CSS file. The code serves as a foundational template for integrating D3 with modular JavaScript.

DDjedjeX
74% 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…

D3 Experimentation

This example demonstrates a minimal SVG canvas populated programmatically with D3 v5, using a blank 960×500 space where elements are appended via `d3.select` and `selection.append`. The page imports D3 from a CDN and bundles custom logic in `index.js`, though only a single empty `svg.append()` call is visible in the source. Styling removes all margins and hides overflow, creating a full-viewport effect. The work serves as a starting point for exploring SVG and D3’s selection and manipulation methods, with a linked video explaining the broader experimentation process.

AArcy Flores
74% match
Loading thumbnail…

Let's make a map D3.js

This example demonstrates how to build a simple SVG map using D3.js version 5. The code selects an SVG element from the HTML and reads its width and height attributes to set up the canvas. It imports the `select` and `arc` functions directly from the D3 library, preparing the foundation for drawing geographic paths or shapes. The visualization relies on the D3.js framework with SVG rendering, as specified in the metadata, and is accompanied by a tutorial video link in the README. The map itself is not yet populated with data in the provided JavaScript.

Rryanrholler
74% match
Loading thumbnail…

Introduction to D3

This example demonstrates a minimal introduction to D3, showing how to create an SVG canvas that fills the entire browser window. The code uses the `select` and `append` functions from the D3 library to dynamically add an SVG element to the HTML body, then sets its width and height attributes based on the window’s dimensions. The visualization renders nothing beyond an empty, resizable SVG container, serving as a starting point for more complex D3 projects. The page is built from a barebones `index.html` file with no pre-existing content, relying on JavaScript to construct the visual output at runtime.

Hhossaphul
74% match