binary-param

100%

✓ Published0🌍 Public

Last edited Nov 11, 2021

Created on Nov 10, 2021

This example interactively demonstrates binary-to-Base64 encoding through a row of 500 checkboxes, where each checkbox represents a single bit. Toggling any checkbox updates the displayed binary string, its Base64 encoding, and the decoded binary output. The implementation uses D3.js selections and event handlers to manage the checkboxes, while custom JavaScript functions perform the conversion between binary arrays and a custom Base64 alphabet string.

AI-generated description

Similar vizzes

Loading thumbnail…

Base64.js

This example demonstrates a compact implementation of Base64 encoding in JavaScript, showing how binary data can be converted into a six-bit character representation using the standard Base64 alphabet. The code defines a function, `encode`, that iterates over the input string’s character codes and constructs the output by bit-shifting values and selecting characters from a lookup string. It uses standard JavaScript string methods like `charCodeAt` and `charAt` alongside bitwise operators, with no external libraries or visualization components involved. The example serves as a clear, minimal demonstration of encoding logic rather than a data-driven graphic.

Mmbostock

64% match

Loading thumbnail…

D3.js Graph with Checkbox (Dynamic)

This example shows a dynamic multi-line chart where each line corresponds to a data column, toggled on and off via checkboxes. Using D3.js v6, it renders SVG paths for three series (`rt1`, `rt2`, `rt3`) against a linear mass scale, with a color scale based on `d3.schemeCategory10`. The checkboxes are generated from the data keys, and the `on("change")` handler updates line visibility by toggling the `display` attribute. The data is hardcoded in the script.

Ffofana1984

62% match

Loading thumbnail…

Test

This example demonstrates a reusable D3 checkbox component that can be configured with custom sizes, positions, colors, and checked states. Three checkboxes are rendered on an SVG canvas, and clicking them updates a text label to display their boolean statuses. The implementation defines a `d3CheckBox` factory function that builds interactive SVG elements with rectangular boxes and path-based check marks, using D3 version 3’s `d3.svg.line()` for the mark geometry. A click event toggles opacity and triggers a callback showing how the component supports custom interaction logic.

PPhilip Rago

60% match

Loading thumbnail…

aaronson-oracle

An interactive visualization demonstrates a predictive text model learning from a user's binary choices. As the user presses the left or right arrow key, the system builds n-gram sequences from the history of prior inputs to predict the next likely key. A large SVG tree diagram visualizes the conditional probabilities of each possible four-bit sequence, showing which sequences are active and frequently occurring. A sticky score panel displays the model's rolling accuracy over the last 100 predictions, while the log shows a running history of actual versus guessed inputs. The implementation uses D3.js selection, event handling, and SVG rendering.

11wheel

59% match

Loading thumbnail…

Toggle test

This example demonstrates an interactive bar chart where colored squares can be toggled on and off by clicking on corresponding circles below the chart. The visualization uses D3's `select` and `.join` operations to efficiently update the SVG elements, with a `transition()` on rectangle attributes for smooth animations. The data is a static array of colored bars, and the toggle function adds or removes items from the selected dataset before re-rendering the chart. The rendering uses SVG with full viewport dimensions.

Bbjfmbeck

59% match

Loading thumbnail…

interactive_button_template

This example demonstrates an interactive template for exploring categorical and continuous variables through linked sliders and buttons. Built with D3.js and rendered as an SVG, it uses two d3.slider widgets to let viewers adjust numeric variables (0-12 hours) while selecting categories via the A–H buttons. The interface includes a sentence placeholder and two chart containers, suggesting a filterable visualization where selections drive updates. Though the JavaScript logic is incomplete, the template shows how slider inputs and button filters can be combined for interactive data exploration.

BBenHeubl

58% match

Loading thumbnail…

svg & d3 - example

This example demonstrates a simple bar chart built with D3.js v4, using an SVG-based rendering approach. It displays a small dataset of four numeric values as horizontal bars, with a separate checklist interface above the chart that lists the same data points as labeled checkboxes. The visualization pairs categorical data with an interactive checklist, though the chart itself is static and does not respond to checkbox state. The code uses D3 selections and data binding (`d3.select`, `selectAll`, `data`, `enter`, `append`) to create both the label inputs and the bar elements, while CSS styles define the bar colors and text alignment. The chart is rendered as a series of `div` elements within a container, with widths proportional to the data values.

BBharath4259

58% match

Loading thumbnail…

One unfilled rectangle

This example demonstrates how D3.js can manipulate existing DOM elements and their properties. It starts with a simple HTML div containing a checkbox, then uses D3 selections to change the div’s border style to a dark gray dashed pattern and reassigns its ID attribute. The checkbox’s checked property is also set to true via D3’s property method. The visualization highlights D3’s ability to integrate with static HTML and dynamically update both CSS styles and element attributes, using the d3.v4 library directly in the browser without any external data sources or complex rendering.

IIgathi

58% match