Tangle document

100%

Tangle document

✓ Published0🌍 Public

Last edited Feb 3, 2016

Created on Feb 3, 2016

This example uses the Tangle library, created by Bret Victor, to build an interactive document where a numerical value can be adjusted by dragging. The code sets up a model with two variables, `china` and `met`, and links an adjustable number in the text to update the metal price display based on a formula. The interaction relies on Tangle’s `TKAdjustableNumber` class and its supporting `BVTouchable` library for mouse and touch events.

AI-generated description

Similar vizzes

Loading thumbnail…

Tangle document

This interactive document demonstrates how fuel prices in Ukraine are derived from oil prices and the euro exchange rate. Using the Tangle library, the page displays a sentence where key numbers are draggable, allowing viewers to adjust input values and see the computed gasoline price update in real time. The implementation relies on Tangle's `TKAdjustableNumber` class for the interactive sliders, while the calculation logic runs in a custom Tangle model using the `Math.round10` utility. JavaScript libraries include Tangle, MooTools, and the BVTouchable touch-event handling system.

MMraleksa

77% match

Loading thumbnail…

tuto

This example displays a series of numbers from a small inline array as text elements positioned along the x-axis. The visualization uses D3 v4 to select existing page elements and append SVG text nodes, setting their coordinates and font size based on the data index. The code also includes commented-out attempts at creating bar charts, but only the text rendering is active. The data is hardcoded directly in the script, and the SVG canvas is fixed at 960 by 500 pixels.

AAlexdef74307

62% match

Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr

60% match

Loading thumbnail…

Untitled

This example visualizes a grid of colorful cubes whose heights represent random negative values, rendered as an interactive 3D bar chart. Users can drag to rotate the entire scene, which triggers smooth transitions as the cube faces and numeric text labels update. The visualization uses the d3-3d plugin with d3.v4 to project cube vertices, while SVG paths and text elements render each face and height value. A button triggers regeneration of the data, and drag events control rotation angles through d3.drag.

KKishen Patel

60% match

Loading thumbnail…

Untitled

Three circles of varying sizes and colors visualize three numeric values from a clay dataset, with each circle’s radius roughly corresponding to its value and a number label placed inside. The code builds an SVG using D3 v7 in a React-friendly HTML page, drawing the circles with fixed coordinates and styling them with opacity and white strokes. It directly appends SVG elements via `d3.select` and `.append`, setting circle positions, radii, and fill colors, while text elements display the values 62, 11, and 17 in font sizes tied to those numbers.

Rrykay

59% match

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

59% match

Loading thumbnail…

Untitled

This example demonstrates how to bind a simple numeric array to existing heading elements using D3 version 7. The static bar-chart-like display renders each value as blue text within `<h2>` tags, using the `selectAll` and `join` API to match data to nodes. The code imports the `select` function from D3 and applies the `.text()` and `.style()` methods to update content and color, with the dataset defined inline as an array of nine numbers.

CCorey-PT

58% match

Loading thumbnail…

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca

58% match