Tangle document

100%

Tangle document

✓ Published0🌍 Public

Last edited Jan 20, 2016

Created on Jan 20, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Tangle document

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.

MMraleksa

77% match

Loading thumbnail…

gaz_ukraine4

This interactive visualization, built with D3 v3, displays Ukraine’s natural gas consumption, supply sources, and export patterns over the past nine years using SVG and animation. It features a slider to adjust the volume of Russian gas imports and shows the resulting effects on consumption and reverse-flow supply from Europe. The page includes annotated sections with historical context and uses linear scales, axes, and drag-and-drop interaction for the slider. Data is embedded directly in the code, with text annotations in Russian explaining the geopolitical implications.

MMraleksa

64% match

Loading thumbnail…

gaz_ukr

This visualization presents the state of natural gas consumption in Ukraine over the past nine years, breaking down total usage, import sources, and consumer sectors. The interface allows a user to drag a circular handle to adjust the volume of Gazprom gas, revealing the projected impact on Ukraine’s energy balance. Built with D3 v3, the graphic uses SVG for its map and charts, an animated slider mechanism, and axis annotations to compare scenarios. The data is displayed through custom annotations and dynamic charts, drawing on several D3 modules like `d3.scale.linear` and `d3.select` for rendering.

MMraleksa

61% match

Loading thumbnail…

Gist 89566fbfb20d81fd7fe9

This interactive line chart tracks the exchange rates of various global currencies against the euro, with a dropdown menu to switch between different currency selections. The visualization displays a time series of daily rates, augmented by a red exponential moving average line that reveals underlying trends, while a crosshair with a trackball follows the mouse to show precise values for any date and rate pair. The chart is rendered as an SVG using the D3.js library, with grid lines, axis labels, and a legend. The code also incorporates the d3fc framework for chart components and a custom area chart beneath the line to emphasize the rate’s magnitude over time.

BBenHeubl

59% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays daily gas prices across multiple stations, plotted over time as a scatterplot of firebrick-colored points. Tooltips reveal station names on hover. The chart is built using the Vega-Lite API (vl) with Vega and Vega-Lite libraries, rendering to SVG via d3.v5, and pulls data asynchronously from a CSV hosted on GitHub Gist, sourced from the UCI Auto MPG dataset.

Ttmcgirr

59% match

Loading thumbnail…

Fork of Choropleth Map

This interactive choropleth map compares fuel and crude oil consumption across European countries during the spring of 2020. A slider lets users switch between April, May, and June to update both the colored country regions and the overlaid graduated circles, which represent fuel and crude oil values. The visualization uses D3 v5 with a geoAzimuthalEqualArea projection, geoPath for rendering TopoJSON boundaries, and scaleSqrt for circle sizing. A separate color legend and D3 zoom functionality are included. Data is loaded from CSV and TopoJSON files.

AAli

57% match

Loading thumbnail…

Line chart from CSV using d3.js

This example visualizes the USD to RUB exchange rate over three selectable years (2018, 2019, 2020) as an animated line chart with a filled area. It uses d3.js v6 within a React-compatible structure, rendering to SVG. Data is loaded from CSV files using `d3.csv`, with the x-axis mapped via `d3.scaleTime` and the y-axis via `d3.scaleLinear`. The line and area paths are built with `d3.line` and `d3.area` using cardinal curves, while transitions (using `transition()`) animate the axis rescaling and stroke-dasharray drawing effect. A mouse hover reveals a crosshair and highlights the nearest data point via `d3.bisector`. The source is the Moscow Exchange, linked via an embedded anchor.

AAleOG

57% match

Loading thumbnail…

gaz_map

This interactive map visualizes changes in Russian gas transit routes to Europe across four scenarios, using buttons to toggle between years 2006, 2013, and projected states. Animated SVG paths trace pipelines like Nord Stream and South Stream, with a tooltip and explanatory text panels. The visualization uses D3 v3 with `d3.geo.path` for geographic rendering and TopoJSON for world country boundaries, while colored lines and CSS-styled buttons drive the scenario switching.

MMraleksa

56% match