Javascript

100%

✓ Published0🌍 Public

Last edited Sep 26, 2019

Created on Sep 26, 2019

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Javascript Basics

This example shows a blank SVG canvas with JavaScript code commented out in the HTML file, demonstrating basic programming concepts such as variables, objects, loops, and arrow functions. The code includes examples of console logging, arithmetic operations, object creation, and function definitions, though all are disabled. It uses an inline `<script>` tag and an SVG element with 960 by 500 pixel dimensions, rendered as static SVG markup. The visualization appears as an empty plot, with the JavaScript fundamentals acting as the primary subject rather than any graphical output.

Ddexuzi

76% match

Loading thumbnail…

JavaScript Basics

This example illustrates fundamental JavaScript programming concepts through a blank SVG canvas. The page embeds commented-out code covering variables, objects, functions, and loops, demonstrating basic syntax before execution. Using an HTML document with inline JavaScript, it sets up an SVG element measuring 960 by 500 pixels. The visualization serves as an educational template for learning language basics, with all example code commented out, preparing developers to uncomment and run statements incrementally. It relies on vanilla JavaScript and inline SVG rendering rather than external libraries, highlighting core web development principles.

Eelgato_1994

74% match

Loading thumbnail…

javascript basics

This example reproduces a Sol LeWitt-style drawing using an SVG canvas. The page sets up a 960-by-500-pixel `<svg>` element and uses JavaScript to define and log a `person` function that returns an object with `first` and `last` properties. The code demonstrates basic arrow-function syntax and object shorthand, though no visual output is generated beyond the empty SVG container.

Lliu yang

73% match

Loading thumbnail…

Line Drawing

This example demonstrates freehand line drawing through mouse drag interaction. A user presses and holds to create a smooth, flowing path rendered as an SVG stroke on a white canvas. The interaction is built using `d3.drag` to capture pointer events, while `d3.line` with the `d3.curveBasis` curve generates the smooth B-spline path through the collected points. The path elements are appended directly to the SVG container, and the code styles them with a black, three-pixel-wide stroke for a clear visual result.

Mmbostock

73% match

Loading thumbnail…

Javascript basics

This example demonstrates JavaScript language fundamentals, including variable assignment, increments, loops, and function declarations, with output logged to the browser console. The page uses a minimal HTML structure with inline CSS to remove body margins and prevent scrolling, while a static SVG element serves as a placeholder on a blank canvas. The code explores modern syntax features such as `let`, arrow functions, and template-free function expressions, though no visualization is rendered. It relies solely on native browser APIs—`console.log` for debugging and a hardcoded `<svg>` tag—without external libraries or data sources.

Nnreinig3@gatech.edu

73% match

Loading thumbnail…

Blank Canvas

This example shows a blank, rounded rectangle filling the browser window as a simple canvas. It demonstrates fundamental DOM manipulation and SVG creation using D3.js v5. The code calculates the width and height from the document body, sets the SVG element's size accordingly, and appends a rectangle with a defined corner radius. Using the `select` function and chained `attr` and `append` methods, it illustrates how to build and style SVG shapes entirely through D3’s programmatic interface.

MMajaha21

72% match

Loading thumbnail…

Javascript A6

This example demonstrates a blank interactive SVG canvas where a single rectangle with the ID `change-hover` transitions its fill color to green over three seconds when hovered, using CSS transitions. The page sets up basic JavaScript syntax—variables, objects, loops, and functions—commented out for educational reference, but no active D3 or data visualization code executes. The rendering is plain SVG embedded directly in HTML, with no external data sources or libraries beyond standard CSS and JavaScript.

CCaroline Ghisolfi

72% match

Loading thumbnail…

Untitled

This example presents a minimal canvas-based visualization that renders a blank drawing surface within an HTML page. The code combines D3 v6 for potential data-driven operations, jQuery for DOM manipulation, and Papa Parse for CSV parsing, though no actual data or visual elements are drawn. The canvas element is set to 200 by 100 pixels and displays the default white background, with a commented-out color property suggesting incomplete styling. The page loads the D3 library from a CDN and includes a separate Papaparse script reference, indicating readiness for future data loading and rendering tasks.

SSMIT9102

71% match