Hello stimulusjs

100%

Hello stimulusjs

✓ Published0🌍 Public

Last edited Jan 9, 2018

Created on Jan 9, 2018

This example demonstrates a simple interactive slideshow and greeting form built with Stimulus and D3. It shows how Stimulus controllers manage UI state, such as navigating between emoji slides with next/previous buttons, and how user input in a text field triggers a D3-powered greeting. The slideshow uses `data-controller`, `data-target`, and `data-action` attributes to bind behavior, while D3’s `d3.select` updates the page text. The slide visibility is toggled via CSS classes, and the current index is stored in Stimulus’s data map. The code relies on the Stimulus application and controller classes, plus D3 for DOM manipulation.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3-simple-slider

This example demonstrates a variety of interactive slider configurations using the d3-simple-slider library, built on D3 v5. It showcases simple, stepped, time-based, filled, ranged, and vertical sliders, along with alternative handles and transitions, with each slider updating a displayed value. The page includes extended examples inspired by a New York Times article and a color picker, all rendered as SVG elements within a Bootstrap layout. The sliders are created using `d3.sliderBottom` and `d3.sliderTop` APIs, with options for tick formatting, step values, and fill colors, and respond to user input via the `onchange` event.

Ggotyou007

64% match

Loading thumbnail…

CDF test!

This example demonstrates an interactive text slide animation on an SVG canvas. It shows a message that shrinks and is replaced by an arrow symbol when clicked. The code uses d3.js to append a text element and a path, then links the text to the path via a `textPath` with a `startOffset` attribute. A click event triggers a transition that animates the `startOffset` to slide the text out of view, then swaps the text content after the animation ends. The rendering uses SVG and d3 transitions with a duration of 750 milliseconds.

CCBasis

64% match

Loading thumbnail…

Smiley Face React & D3

This example combines React and D3 to render a simple, interactive smiley face. The app uses React to manage the component tree and render a large emoji character, while D3’s force simulation handles the positioning and movement of facial features. The code initializes a React root and mounts a component that displays a greeting, though the primary visualization is a smiley whose eyes and mouth are dynamically arranged using `d3.forceSimulation` and related force APIs. The underlying data structure is a set of node objects, and the rendering is done through React’s declarative JSX syntax.

JJason Piemeisl

64% match

Loading thumbnail…

time slider

This example showcases various interactive slider configurations built with D3 v5 and the d3-simple-slider library. It demonstrates core functionalities like simple continuous sliders, step-based sliders for discrete values, and time-based sliders using the `d3.timeFormat` and `d3.timeScale` for date handling. Additional features include filled sliders, range selection, vertical orientation, customized handles, and smooth transitions. The visualization also presents practical applications, such as a New York Times-style slider and a color picker, all rendered as SVG elements with Bootstrap styling for layout.

Mmanoj-soft

64% match

Loading thumbnail…

d3-simple-slider

This example demonstrates four interactive slider configurations built with the d3-simple-slider library and D3 v4, each handling a different data type and scale. The sliders showcase value selection for percentages, discrete integer steps, time-based data using JavaScript `Date` objects formatted with `d3.timeFormat`, and dense value arrays with custom tick marks. The code renders each slider as an SVG element via `d3.sliderHorizontal()`, binding change events to update text displays in real time, and includes reset links that programmatically set slider values. The implementation highlights the library’s flexibility in adapting to varied input formats while maintaining a consistent, user-friendly interface.

AAlainRo

64% match

Loading thumbnail…

Gist 3ea15e735c876056ba750785a7ef8362

This example presents a slide deck titled "DH-talk," formatted as a Google Slides presentation. It uses the reveal.js framework to render HTML-based slides, with content drawing from a Gist repository. The presentation focuses on digital humanities topics, and its visualizations are constructed through the `d3.js` library, including `d3.forceSimulation` for network layouts and `d3.geoPath` for geographical mapping. The code demonstrates how to embed interactive charts directly within the slide framework, merging narrative with data-driven graphics for an educational talk.

CCliffordAnderson

64% match

Loading thumbnail…

HTML Starter

This example shows a simple, playful SVG scene of a smiley face rendered on an HTML page. It demonstrates a basic interactive hover effect: moving the mouse over the smaller eye circle triggers the temporary appearance of the text “APPELUIT!!!!” on the canvas. The scene is defined entirely in static HTML and SVG, styled with CSS. The interactivity is driven by JavaScript using the D3 v5 library, specifically the `d3.select` method to attach `mouseover` and `mouseout` event handlers.

Ffelixvovo

64% match

Loading thumbnail…

Code Speaking

Typed characters appear in a running transcript alongside their ASCII decimal codes, while a corresponding symbol image fades in for each code. The animation proceeds character by character, with a two-second delay between steps. D3 v5 loads a CSV table that maps ASCII values to image links, and the code also uses `d3.select` to update the text area. User input comes from an HTML form and is processed via a JavaScript loop with `setTimeout` to sequence the transitions.

JJoker-tr

64% match