JS Bin

100%

✓ Published0🌍 Public

Last edited Jun 14, 2016

Created on Oct 31, 2015

This example connects a Spark Core IoT device to a web page, turning a div into a virtual LED and potentiometer display. The animation uses requestAnimationFrame to poll the device’s `potarValue` variable every 20 frames, updating a border-left width. Mouse enter and leave events call the `led` function via `device.callFunction` to turn the LED on or off. It demonstrates real-time hardware communication through the Spark JavaScript library, with the device’s status logged to the console.

AI-generated description

Similar vizzes

Loading thumbnail…

JS basics

This example demonstrates JavaScript programming fundamentals in a bare-bones HTML page. It showcases variable mutation with `const` objects, arrow functions with implicit and explicit returns, and a `for` loop. The code defines a `person` function using ES6 shorthand and logs results to the console. The visualization itself is static, containing only an empty SVG element, while all activity happens in the browser’s developer console. The page uses plain CSS and JavaScript, with no external libraries.

Mmax-31

63% match

Loading thumbnail…

JS Bin

A spinning 3D cube displays a live digital clock on each face, using Three.js for WebGL rendering. The clock face itself is drawn into a 2D canvas via the Canvas API (`fillText`, `fillRect`), then mapped onto the cube as a `THREE.Texture` updated each frame. The animation loop rotates the mesh while calling `texture.needsUpdate` to refresh the time display, combining a raw canvas with a Three.js `MeshBasicMaterial`. The scene uses a perspective camera and box geometry sized 200 units.

MMAKIO135

62% match

Loading thumbnail…

JS Bin

This example visualizes browser market share percentages as a donut chart, with animated arc segments and a delayed legend appearing after the initial render. The chart uses D3 v3’s `pie` layout and `arc` generator to create the donut, while `transition.attrTween` animates each arc’s expansion from zero to its final angle. The code explicitly binds data from an inline array of browser names and percentages, and uses `d3.scale.category10` for colors. A drop shadow filter on the SVG container and a styled widget frame are also present, with the legend and percentage labels added via `append` and `text` elements.

663anp3ca

62% match

Loading thumbnail…

Fork of HTML Starter

This visualization is a minimal HTML page that demonstrates basic JavaScript output. It uses inline JavaScript to write styled text and a variable value directly into the document body. The code executes a `document.write` call with a red-colored `div` element and concatenates a string with a numeric age variable (12) to display additional text. The page loads the external script `aaaa.js` via a `script` tag in the `head`, and the `body` is left empty, relying entirely on the script for content generation.

Wwoojinsong

61% match

Loading thumbnail…

css animation

This example demonstrates a CSS-based animation of a string of holiday lights, created entirely with D3.js and vanilla JavaScript. It shows a row of glowing, diamond-shaped bulbs alternating between blue and orange, with each color pulsing on and off in a staggered rhythm. Clicking any bulb removes it by fading it to black, using D3’s `transition` and `style` methods to animate opacity and disable the CSS keyframe animation. The page generates 75 bulbs via a `for` loop, while D3 selects all elements to bind click handlers. The rendering relies on CSS `@keyframes` for the pulse effect and D3 v4 for interactivity.

DDarioCel

61% match

Loading thumbnail…

Javascript inside html

This example demonstrates a mix of inline JavaScript expressions and React-rendered SVG, displaying both text values and a series of circles. The code uses React 16.10 to map over hardcoded arrays, calculating squared values with a custom `sq` function and rendering magenta circles positioned by array elements. A separate `Test` component defines green circles but remains unused. The SVG output appears in a light-green page background, showcasing how JavaScript logic integrates directly into JSX.

Llendup71

61% match

Loading thumbnail…

JS Basics . Black and White

This example demonstrates the basics of JavaScript programming through a series of console-logged statements within an SVG container. The code shows variables, objects, functions, and ES6 arrow functions, including object mutation and a person factory. It uses plain JavaScript APIs, such as `console.log`, and renders with an SVG element while the accompanying CSS hides page margins and overflow.

Mmaxthamt

61% match

Loading thumbnail…

JS in HTML

This example reproduces a Sol LeWitt art piece using D3 v7. The code imports D3’s `select` function and logs it, along with strings built from custom modules `something.js` and `thing.js` that export default and named values. The HTML page sets a large font size and centers the body, though no DOM elements are appended or manipulated, so the visualization is limited to the console output demonstrating module imports and D3’s availability.

Ccssergio

60% match