Shankar Ghimire

@ghimirsh·6 public vizzes

Cars Report

This example displays a text-based report of cars filtered by price, rendering each matching vehicle as a formatted line with year, make, model, and cost. The visualization uses D3 v5 loaded via UNPKG, along with local ES6 modules for data parsing and report generation. The `cars.js` module defines an inline JSON array, while `generateReport` filters and maps entries using `formatCar`. The resulting message is inserted into a `<pre>` element through `document.getElementById`.

Sep 28, 2023

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-visualization setup that loads a static dataset of five cars from a local ES6 module using `import`, then displays the make of the first car in large text within an HTML `<pre>` element. The code imports D3 from a CDN via UNPKG and uses `document.getElementById` to update the DOM with the selected value. It highlights basic ES6 module usage and simple DOM manipulation without any chart or graphical rendering.

Sep 28, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML!” at a very large font size, centered on the screen. The code uses plain CSS for styling via a `.message` class with `font-size` and `text-align` properties, and includes no JavaScript logic or external libraries. The rendering approach is a simple static document structure with direct inline styling in the `<style>` tag. It serves as a bare-bones starter template for HTML and CSS, with no data sources or interactive behavior involved.

Sep 28, 2023

Loading thumbnail…

SVG Fundamentals-Shankar Ghimire

This example demonstrates the fundamental building blocks of SVG rendering in a web page, using plain HTML and CSS with JavaScript. The code sets up a minimal document structure with an empty body, indicating a starter template for creating SVG visualizations. It shows how to initialize a basic webpage that can be extended with SVG elements and styles. The example relies on native browser APIs for SVG and CSS rather than external libraries, providing a clean foundation for learning SVG basics within a React or vanilla JavaScript environment.

Oct 24, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG shapes, using a static, predefined dataset of geometric elements. It shows how basic primitives such as rectangles, circles, lines, and paths are defined and styled within a 960×500 coordinate system. The code uses raw SVG tags like `<rect>`, `<circle>`, `<line>`, and `<path>`, with attributes for positioning, fill colors, strokes, and widths. The visualization highlights the contrast between filled shapes and stroked outlines, and includes a multi-segment path that connects four points with a thick black line.

Sep 13, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, a line, and a path, arranged on a 960 by 500 canvas. It shows how to set basic visual properties such as fill colors, stroke colors, and stroke widths. The code uses raw SVG elements within an HTML page, with no external libraries. It displays the coordinate system via explicit x, y, and radius attributes, illustrating the direct relationship between markup and rendered graphics.

Sep 4, 2022