Skip to main content
100%

D3 button that shows and hides text in a div

✓ Published0🌍 Public
VVanBantam
Last edited Mar 3, 2017
Created on Mar 3, 2017

This example demonstrates a toggle button that shows and hides three text elements in a web page. The D3.js library (version 3.5.5) handles the button’s click event, switching between “Click me” and “Reset” labels while toggling the `hidden` CSS class on each div via `d3.select` and `classed`. An SVG canvas is appended but remains empty. The interaction relies on a counter variable to alternate visibility states, with the text appearing or disappearing accordingly.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/hungvietdo/'>hungvietdo</a>'s block: <a href='http://bl.ocks.org/hungvietdo/6959df62cd3a1c1b428a'>Button in D3</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Common UI Elements with D3

This example demonstrates how to build a simple interactive counter using standard UI elements with D3. It shows a button and a text display that updates the click count in real time. The implementation uses D3 selections to create the button and counter div, with event handling via the `on` method to update application state. The `state` object manages the count, and `setState` triggers re-rendering. The code leverages D3's data join pattern with `selectAll` and `join` to bind elements. Styling is handled through CSS classes defined in `styles.css`, using Flexbox for centered layout and green button styling.

CCurran Kelleher
71% match
Loading thumbnail…

SHOW HIDE BLOCK JS

This example demonstrates a simple toggle interaction that switches between showing a red and a blue square using a button labeled “Show Red Box” or “Show Blue Box.” The code uses vanilla JavaScript event handling via an `onclick` attribute and manipulates the CSS `display` property to control visibility. It relies on the DOM API methods `getElementById` and `style.display`, with D3.js loaded for potential visualization extensions, though the core behavior is purely HTML and JavaScript.

Llupica.matthew@gmail.com
71% match
Loading thumbnail…

for hw3

This example displays a blank interactive canvas with a single static text label, “Edit the code below to change me!”, rendered in monospace font at a fixed position. It uses D3 v4 to select the body element, append an SVG container sized 960 by 500 pixels, and add a text element with custom styling. The visualization serves as a minimal starter template, showing how D3’s selection and append methods create basic SVG output without any data binding or dynamic behavior.

GGoomble
69% match
Loading thumbnail…

Testing D3

This example displays a plain-text message, “Hello D3, what is going on?” centered on the page. It uses the D3 `select` API to target the `body` element and chain the `.text()` method to set its content. The page loads D3 v7 from a CDN and relies on a CSS class to style the message with a large font size. The visualization demonstrates a minimal D3 setup within a static HTML file, with no external data source.

TTshalberg
69% match
Loading thumbnail…

d3js

This example displays three static text elements—"uno," "dos," and "tres"—as separate paragraphs inside a designated div. It uses D3.js v5 to bind a simple array of strings to paragraph selections via `d3.select` and `data().enter().append()`, with a callback function setting each paragraph’s text content. The visualization is minimal, showing basic data-join mechanics without interaction or animation, and the header creation code is commented out, leaving only the list rendering active.

Aaaizemberg
69% match
Loading thumbnail…

D3.js - data(), join(), transition(), duration(), and key functions

Interactive buttons append, prepend, or drop numbers from an array, updating a row of animated SVG circles. The D3.js v7 code demonstrates selection joins with `data()`, `join()`, and a key function, showing how element insertion and removal works during transitions. Each click triggers a 500ms animated update via `transition().duration()`, repositioning circles horizontally while their radii scale with the numeric values.

AAxVa 🐍 💪
69% match
Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates how to bind data to HTML elements using D3 v4. It features a sandbox with four paragraphs that, upon clicking a button, change their text and font size. The code then uses D3’s `selectAll`, `data`, and `enter` methods to append two new paragraphs from a simple array, with commented examples showing how to attach click handlers to modify text dynamically. The exercise section lists interactive checkboxes that can be toggled via D3’s property method.

CChrisChrisLoLo
69% match
Loading thumbnail…

D3 Test

This example displays a simple SVG canvas with a single text message reading “Edit the code below to change me!” positioned near the top-left of a 960-by-500 pixel frame. The code uses d3.select to append an SVG element to the body, then chains an svg.append operation to create the text node. Styling is applied directly via .style attributes for font size and family. The script relies on D3 v4, loaded from the d3js.org CDN, and serves as a minimal starting point for interactive visualization development.

IIzaskunLS
69% match