Request and Response Drills

100%

Request and Response Drills

✓ Published0🌍 Public

Last edited Apr 18, 2017

Created on Apr 18, 2017

Two interactive data-visualization drills demonstrate how request and response patterns shape real-time feedback. The first, a Mad Lib Generator, uses d3.forceSimulation to position user-supplied words as nodes, which respond to drag events with animated transitions. The second, an A/B Test, renders two competing button variants and logs click counts via a live-updating bar chart, drawing on d3.select and transition.attrTween for smooth state changes. Both examples rely on Glitch-hosted code and event-driven updates to show how user actions trigger immediate visual responses.

AI-generated description

Similar vizzes

Loading thumbnail…

Communication Drills

Communication Drills presents three interactive prototypes built with D3.js and Glitch-hosted HTML/JavaScript. The first, Surprise, animates a force-directed network using `d3.forceSimulation` with drag and collision detection. Hourly Rate Calculator computes and visually updates a cost breakdown in real time as users adjust sliders, relying on D3’s data binding and transition methods. Live Search filters a dataset through an input field, redrawing a bar chart with `d3.select` and `transition.attrTween`. The examples demonstrate varied D3 techniques for user-driven data exploration, each using sample JSON data embedded in the code.

Aarcox80

79% match

Loading thumbnail…

Component Drills

This example demonstrates a component-drilling interaction where a navigation bar and an address book are linked through a force-directed graph. It uses d3.forceSimulation to position and animate the connected nodes, with each node representing a UI component. The visualization shows how selecting a component in the navigation bar drills down to highlight its corresponding details in the address book. The code relies on D3’s drag and click handlers to update the graph’s state, while the address book and navigation bar are rendered as HTML elements that respond to the simulation’s data bindings.

Aarcox80

67% match

Loading thumbnail…

React Redux Drills

React Redux Drills pairs two interactive Glitch projects that demonstrate state management in React with Redux. The first, “Interest Calculator I: Connecting,” shows a compound-interest form wired through Redux’s `connect` and `dispatch` to update a computed total. The second, “Interest Calculator II: Dispatching,” builds on this by adding explicit action creators and reducer logic to handle user input. Both examples render plain HTML inputs and result text, relying on Redux’s `createStore`, `Provider`, and `useSelector`/`useDispatch` hooks (or their class-based equivalents) to manage and propagate state changes. The code is sourced from a public gist by arcox80, with live editable versions hosted on Glitch.

Aarcox80

67% match

Loading thumbnail…

Action, reducer and store drills

This example demonstrates how to visualize Redux state management through interactive “drill” views. It shows a live, force-directed graph of actions, reducers, and store state, with nodes and links updating in real time as actions dispatch. The visualization uses `d3.forceSimulation` for layout and `d3.select` with data joins to render transitions. A CRUD reducer example (from the Glitch project “tulip-buffet”) provides the underlying state logic, while a second file (gistfile1.txt) defines internationalization (i18n) state for language-specific labels. The code wires Redux store subscriptions to D3 updates, animating node positions via `transition.attrTween`.

Aarcox80

65% match

Loading thumbnail…

Math test

A math quiz uses D3.js v3 with an SVG force-directed graph to display answers as draggable, colored circles. The visualization presents arithmetic questions and lets users select the correct result from a node layout, with feedback and score tracking. The code applies `d3.layout.force`, SVG circles, and CSS styling for interactive elements. Language and operation settings adjust quiz content, while checkboxes enable timed quizzes and sound, though the actual sound behavior is not implemented in the shown code. The interface also displays correct/incorrect counts and a timer.

EEE2dev

64% match

Loading thumbnail…

A11 - Interaction

This example showcases interactive data visualization techniques, including filtering, brushing, zooming, and panning, implemented with HTML, CSS, and JavaScript within the React framework. Two linked visualizations demonstrate these interactions; the primary view, embedded from Vizhub, supports all four operations, while a secondary example further applies the same features. The code leverages standard web technologies and the visualization likely uses D3.js for rendering, though the specific APIs are not detailed in the provided files.

DDuc Pham

63% match

Loading thumbnail…

Gist 973618

This example demonstrates a dynamic network visualization that maps relationships between nodes in real time. It uses d3.forceSimulation to compute physics-based layout and continuously updates node positions as the simulation runs. The code also implements a request handler that serves different JavaScript templates depending on the referer, with a full source version for direct access and a minified version for other contexts. The visualization likely renders an interactive graph, though the specific visual styling is not shown in the provided snippet.

Aandrewxhill

62% match

Loading thumbnail…

Experimentation 1

This example shows a simple interactive network graph built with D3.js, where nodes (circles) and links (lines) are generated from sample data and arranged using the d3.forceSimulation API. Users can drag nodes to reposition them, with the simulation updating link positions on each tick. The graph is rendered as SVG in a full-screen container, and the code includes a minimal data structure for adding nodes and connections, as well as a color palette from colors.js for potential styling. The visualization is a basic template for experimenting with force-directed layouts.

Ttkcj0912

62% match