CM6 demo

100%

✓ Published0🌍 Public

Last edited Apr 29, 2019

Created on Mar 14, 2019

This example demonstrates a browser-based code editor with syntax highlighting, line numbers, bracket matching, and undo/redo functionality. It constructs an `EditorState` with extensions including legacy JavaScript mode parsing, multiple selections, and custom keybindings. The editor view renders into a DOM element, showing a sample script that reads from the filesystem. The implementation uses the `@datavis-tech/codemirror-6-prerelease` package, which exposes APIs like `EditorState.create`, `EditorView`, `legacyMode`, `lineNumbers`, and `matchBrackets`.

AI-generated description

A direct port of the codemirror.next demo to vanilla JS, using the NPM package @datavis-tech/codemirror-6-prerelease.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

#javascript

This example demonstrates a JavaScript code editor that maintains focus and blur states for a text input area. The snippet configures event handlers for editor focus and focus loss, using a React component that passes `onEditorFocus` and `onEditorLoseFocus` callbacks through its props. It shows how the editor responds to user interaction by triggering these custom methods, which could update a visualization or UI state. The code relies on React’s event system and component props to manage the editor’s behavior, with no external libraries like d3 or Canvas involved.

GGugaGongadze

58% match

Loading thumbnail…

Editor Demo

The editor demo showcases animated geometric shapes—circles and rectangles—with distinct colors and sizes arranged on a light purple background. It uses D3.js to bind data to SVG elements and applies transitions to animate shape attributes: circles expand via `attr('r', ...)` while rectangles grow from zero width and height, all with staggered delays. The code also demonstrates enter, update, and exit selections, with faster transitions moving shapes and slower ones morphing or removing them. The rendering is entirely SVG-based, driven by `d3.transition` with both slow and fast durations.

CCurran Kelleher

54% match

Loading thumbnail…

IC-6

This example displays the text “Hello React!” centered on the page, styled with a large font size. It demonstrates a minimal React application where the UI is defined in JSX and rendered into the DOM. The code imports React and ReactDOM, defines a simple functional component, and uses `ReactDOM.render()` to mount it to the `#root` element, relying on the UMD builds of React and ReactDOM hosted via unpkg.

99176371431

54% match

Loading thumbnail…

Hello D3 Version 6

This example demonstrates the simplest possible setup for D3 version 6, displaying a static text message in the browser. The page loads D3 v6 from a CDN and uses plain JavaScript to write “oi” into a `<pre>` element via `document.getElementById`. It also defines a `dummy_data` object with six string values but only logs it to the console, never rendering it visually. The code relies on standard DOM manipulation rather than any D3-specific APIs like selections or scales.

GGuilherme Corsi

54% match

Loading thumbnail…

JavaScript Exp

This example presents a minimal web page that checks the integration of JavaScript and CSS within an HTML document. It displays a large, centered "Hello HTML!" message, demonstrating basic styling applied via a CSS class. The code uses vanilla JavaScript to log the Document Object Model (DOM) to the browser console, illustrating how to access and inspect the page structure programmatically. This serves as a bare-bones starting point for web development, with a linked reference to a separate React-based starter project.

Bbeyzadoganay

53% match

Loading thumbnail…

JS playground

This example demonstrates a minimal JavaScript playground embedded directly in an HTML page, printing “Hello” combined with imported text to the browser console. It shows how D3 v6’s `select` and `scaleLinear` modules are imported, alongside custom local modules that export constants and default values. The page renders large static text (“JS in HTML”) and relies on separate `script.js` and `bundle.js` files, with the latter representing VizHub’s automatic bundling. The code highlights modular ES6 import/export syntax and debug output via `console.log`, with no interactive or data-driven visual elements.

AAndre J Denais

52% match

Loading thumbnail…

Visualization Editor

This example demonstrates a visualization editor built on the Chiasm runtime engine, where a configuration file drives the layout and properties of interactive dummy visualizations. The code uses the `configEditor` plugin to render a side panel with clickable numbers and colors, while the `layout` plugin arranges panels A, B, and C in a nested box layout. Dragging the X lines in the dummy visualizations propagates changes back to the configuration. The implementation relies on RequireJS, D3.js for JSON loading, and the Chiasm package system to wire together plugins at runtime.

CCurran Kelleher

52% match

Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

JJun Alvarado

52% match