Fork of MrW's VizHub Docu

100%

Fork of MrW's VizHub Docu

✓ Published0🌍 Public

Last edited Aug 17, 2022

Created on Aug 17, 2022

This example documents the keyboard shortcuts available in the VizHub editor, presenting them in a Markdown table within the README. The visualization itself is a minimal HTML page that displays only the title and the word "README" with large, centered typography. The code relies on standard HTML and CSS for styling, while the documentation references CodeMirror and VIM key bindings, including commands like toggling comments and killing lines. It does not use any data visualization libraries, instead serving as a static reference chart.

AI-generated description

Editor Shortcuts

The vizhub editor supports

(My) Most common keys:

Win	Mac	Command
ALT+V	ALT+V	VIM ↔︎ CodeMirror keys
CODE	MIRROR	KEYS
		Code
^/		toggle comment
(⇧)Tab		(reverse-) indent
		Line
	^k	kill line Ꮖ→
	⌘⌫	del line ←Ꮖ
^D	⌘D ???	delete line
^⇧D	⌘⇧D	duplicate line
← ↑ ↓ →	← ↑ ↓ →	Navi
	^a / home	goLineStart / Smart
^⇧↑ / ↓		move up/down
VIM	EDITOR	KEYS
See	link	above

MIT Licensed

Similar vizzes

Loading thumbnail…

MrW's VizHub Docu

This example documents the keyboard shortcuts available in the VizHub editor, presenting a table that maps Windows and Mac key combinations to CodeMirror and VIM commands. It also includes a separate HTML page that simply displays the title “MrW’s Vizhub Docu” and the word “README” with static CSS styling. The project uses no external libraries, relying on plain HTML, CSS, and Markdown formatting in the README file to convey the information.

RRussell Watson

88% match

Loading thumbnail…

Markdown Demo

This example showcases the rendering of Markdown content in VizHub, demonstrating a wide range of syntax including headings, emphasis, links, tables, code blocks, blockquotes, task lists, and embedded HTML. The README.md file serves as the Markdown source, while the visualization includes an index.html that displays a large "Hello HTML!" message styled with CSS. The example highlights how VizHub processes Markdown and HTML files, using standard Markdown parsing and HTML rendering to present the content in the gallery. It does not use any additional JavaScript libraries for data visualization.

CCurran Kelleher

75% match

Loading thumbnail…

New Doc

This example demonstrates the flexibility of VizHub for creating and styling a simple HTML document. It presents a page with a large heading and a bulleted list, where the first bullet is highlighted in red, all displayed against a dark blue background with prominent white text. The code imports the `select` function from D3.js to set the text content of a message div, pulling the string from an ES6 module, while a separate CSS file imports the Ubuntu font and controls overall page styling.

Ssaiyam-jain

69% match

Loading thumbnail…

Markdown Cheatsheet

This example displays the raw content of a Markdown cheatsheet, which is a plain-text file listing markup syntax for headings, emphasis, links, tables, code blocks, lists, and more. The page also includes an inline HTML fragment and a JavaScript console log. The visualization is not driven by data or charting libraries; instead, it relies solely on the browser’s default rendering of the README file and the index.html body, with the latter styled via a simple CSS rule.

CCurran Kelleher

68% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal setup for building data visualizations with D3.js and ES6 modules in the VizHub environment. It displays the text "Hello World" in a large font using the `textContent` property directly on a DOM element, without invoking any D3 selection methods. The page loads D3 v5 from UNPKG and includes local modules for importing strings, though the active code does not use these imports. The visualization highlights how to structure files and dependencies for a simple interactive canvas.

Mmyoung1032

68% match

Loading thumbnail…

vizHub

This example renders a nearly blank HTML page with centered text, displaying the title "vizHub" at a massive font size. It demonstrates a minimal setup using plain CSS for styling and JavaScript for browser interaction, logging the string "cool" to the developer console upon load. The page relies solely on the Document Object Model and standard web APIs, with no external libraries or data sources involved. It serves as a bare-bones starter template for embedding custom visualizations in a React framework context.

Sstanemurhula

67% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal visualization that displays a static text message, "Hello VizHub!", centered on the page using a large font. It shows how to set up a basic VizHub project by loading D3 via UNPKG, importing D3 in the main JavaScript file, and separating code into local ES6 modules. The page structure is defined in HTML with a `<pre>` element, while the message is exported from a separate module and injected into the DOM. Styling is handled through a simple CSS rule that centers the text and sets its font size.

Ssangeetha-gandhi

67% match

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a single text message, “Hello VizHub!”, on a blank page. It demonstrates a minimal D3 setup by loading the library via UNPKG and using ES6 modules to import a local string. The example shows how to combine a local `styles.css` file, a global `d3` script tag, and modular JavaScript imports to build a simple visualization scaffold in the VizHub environment.

KKaminariOS

67% match