Skip to main content
Log in
P

Premkumar

@vagaiprem·26 public vizzes

Loading thumbnail…

Fork of ThreeJS Starter

A rotating blue cube animates in a 3D scene, responding to directional and ambient lighting. Built with Three.js, the example sets up a WebGL renderer on a canvas, a perspective camera, and orbit controls with damping. The cube's material uses a MeshPhongMaterial with shininess, while automatic rotation and user interaction via controls update the view. The code also handles window resizing by adjusting camera aspect and renderer dimensions.

Aug 7, 2025
Loading thumbnail…

proj_2

A 3D grid of spheres forms a cube, with each sphere’s color derived from its position along the x, y, and z axes using an HSL mapping. The entire cube rotates slowly over time. Built with Three.js, the visualization uses PerspectiveCamera, OrbitControls for user interaction, SphereGeometry, MeshPhongMaterial, and DirectionalLight. The animation loop updates rotation increments and re-renders the scene, while damping controls allow smooth camera zoom and orbit.

Aug 7, 2025
Loading thumbnail…

Fork of 3D Cube of Spheres

A rotating cube constructed from 64 colored spheres demonstrates Three.js's 3D rendering capabilities. Each sphere's hue is derived from its grid position using HSL color mapping, creating a gradient across the cube's volume. The scene uses `THREE.Scene`, `THREE.DirectionalLight`, and `THREE.AmbientLight` for illumination, while `OrbitControls` enables user interaction. The animation continuously rotates the sphere group, and the WebGL renderer displays the result in a black background.

Aug 7, 2025
Loading thumbnail…

first_work

This example displays a large, red, centered message reading “Hello CSE dep!” on a blank page. The visualization uses basic HTML and CSS styling to render the text, with a JavaScript file that only logs “hello world” to the console. The code relies on standard web technologies—HTML structure, CSS for font size, color, and alignment, and JavaScript for console output—without any external libraries or data sources. The presentation is static and minimal, focusing solely on the text display.

Aug 7, 2025
Loading thumbnail…

Fork of 3D Cube of Spheres

This interactive WebGL visualization displays a 4×4×4 cube of spheres with warm orange color variations. Each sphere uses Three.js MeshPhongMaterial with randomly varied HSL saturation and lightness values, creating a subtle gradient effect. The entire cube group rotates continuously in both the x and y axes through the animation loop, while OrbitControls allows users to zoom and pan around the structure. The scene uses 64 individually positioned spheres, rendered with directional and ambient lighting for depth.

Aug 7, 2025
Loading thumbnail…

Fork of 3D Cube of Spheres

A rotating cube constructed from 64 colored spheres demonstrates Three.js's 3D rendering capabilities. Each sphere's hue is derived from its grid position using HSL color mapping, creating a gradient across the cube's volume. The scene uses `THREE.Scene`, `THREE.DirectionalLight`, and `THREE.AmbientLight` for illumination, while `OrbitControls` enables user interaction. The animation continuously rotates the sphere group, and the WebGL renderer displays the result in a black background.

Aug 7, 2025
Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D cube composed of 64 colored spheres animates with continuous rotation in a black scene, lit by white, ambient, and point lights to highlight each sphere's hue and brightness. The spheres are generated procedurally as Three.js meshes with Phong materials, using position-based HSL colors. OrbitControls with damping enables interactive rotation, while the renderer redraws each frame via WebGL animation.

Aug 6, 2025
Loading thumbnail…

Fork of 3D Cube of Spheres

A rotating cube constructed from 64 colored spheres demonstrates Three.js's 3D rendering capabilities. Each sphere's hue is derived from its grid position using HSL color mapping, creating a gradient across the cube's volume. The scene uses `THREE.Scene`, `THREE.DirectionalLight`, and `THREE.AmbientLight` for illumination, while `OrbitControls` enables user interaction. The animation continuously rotates the sphere group, and the WebGL renderer displays the result in a black background.

Aug 6, 2025
Loading thumbnail…

Fork of 3D Cube of Spheres

A rotating cube constructed from 64 colored spheres demonstrates Three.js's 3D rendering capabilities. Each sphere's hue is derived from its grid position using HSL color mapping, creating a gradient across the cube's volume. The scene uses `THREE.Scene`, `THREE.DirectionalLight`, and `THREE.AmbientLight` for illumination, while `OrbitControls` enables user interaction. The animation continuously rotates the sphere group, and the WebGL renderer displays the result in a black background.

Aug 6, 2025
Loading thumbnail…

Fork of HTML Starter

This example displays a single static message, “Hello KPR!”, styled with large red text on a blue background. It uses standard HTML and CSS to define the layout and appearance, while a JavaScript file, loaded as a module, runs a simple `console.log` command. The visualization demonstrates a minimal setup for combining an HTML document with external CSS and JavaScript files, serving as a basic template for more complex projects.

Aug 6, 2025
Loading thumbnail…

my_first

This example displays the text "Hello HTML!" in a large, centered font. It uses a plain HTML document with a linked stylesheet to style the message. The visualization is straightforward, rendering static text without any interactive elements or data processing. The code relies on standard CSS properties for font size and alignment, and the page is structured with a single `div` element.

Aug 6, 2025
Loading thumbnail…

my_first

This example displays a full-screen HTML message with the text “Hello HTML!” styled at a very large font size and centered on the page. The rendering relies on plain HTML and CSS, with a simple `.message` class controlling the font size and text alignment. The accompanying JavaScript code only logs “hello world” to the browser console and does not manipulate the page content. No external visualization libraries or data sources are used.

Aug 6, 2025
Loading thumbnail…

my_first

This example displays a full-screen HTML message with the text “Hello HTML!” styled at a very large font size and centered on the page. The rendering relies on plain HTML and CSS, with a simple `.message` class controlling the font size and text alignment. The accompanying JavaScript code only logs “hello world” to the browser console and does not manipulate the page content. No external visualization libraries or data sources are used.

Aug 6, 2025
Loading thumbnail…

my_first

This example displays a full-screen HTML message with the text “Hello HTML!” styled at a very large font size and centered on the page. The rendering relies on plain HTML and CSS, with a simple `.message` class controlling the font size and text alignment. The accompanying JavaScript code only logs “hello world” to the browser console and does not manipulate the page content. No external visualization libraries or data sources are used.

Aug 6, 2025
Loading thumbnail…

my_first

This example displays a full-screen HTML message with the text “Hello HTML!” styled at a very large font size and centered on the page. The rendering relies on plain HTML and CSS, with a simple `.message` class controlling the font size and text alignment. The accompanying JavaScript code only logs “hello world” to the browser console and does not manipulate the page content. No external visualization libraries or data sources are used.

Aug 6, 2025
Loading thumbnail…

my_first

This example displays a full-screen HTML message with the text “Hello HTML!” styled at a very large font size and centered on the page. The rendering relies on plain HTML and CSS, with a simple `.message` class controlling the font size and text alignment. The accompanying JavaScript code only logs “hello world” to the browser console and does not manipulate the page content. No external visualization libraries or data sources are used.

Aug 6, 2025
Loading thumbnail…

Fork of first

This example displays a large, red "Hello World welcome to II CSE A!" message centered on a light pink background. The `main` function directly injects an HTML `div` element into the provided container, setting its font size to `115px` via inline styles. It uses no external libraries, relying on plain JavaScript string interpolation and inline CSS for styling. The text color is `#ff6b6b` and the background is `#fdf4f2`, with all elements positioned using text alignment.

Aug 5, 2025
Loading thumbnail…

first

This visualization displays the text "Hello World welcome to II CSE A!" in a large, centered font. The code sets the font size to 115 pixels and uses plain HTML and CSS within a container to render the static text. It does not employ external libraries or data sources, relying solely on a simple innerHTML template string.

Aug 5, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart displays the count of awards for categories A through G, with a title reading "Data Visualization" and labeled axes for Awards and Count. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` to position bars, `axisBottom` and `axisLeft` for gridlines and ticks, and loads data from a CSV. Clicking a bar toggles its selection, highlighting it in a darker blue while dimming others. The chart is responsive, using a ResizeObserver hook to update dimensions.

Aug 5, 2025
Loading thumbnail…

Fork Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic DOM manipulation and animation. The face is drawn using SVG shapes, including a yellow circle, two eyes, and a mouth created with the `d3.arc` shape generator. The code uses `select`, `append`, and `attr` to construct the scene. An animated sequence, driven by `transition().duration()`, moves the rectangular eyebrows up and down in a repeating loop, showcasing D3's ability to tween attributes over time.

Aug 22, 2024
Loading thumbnail…

Fork of D3 Grouped

This example demonstrates a grouped bar chart of the top 10 countries by population, using a D3 join pattern. It shows how to append a group element per data point containing both a bar and a text label, with the enter selection handled via `.join()` and `.call()`. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisLeft` from the axes library. Data comes from the UN population estimates 2024, sorted in descending order.

Aug 22, 2024
Loading thumbnail…

prem_1

A simple bar chart visualizes six sample values as vertical steelblue bars that turn orange on hover. The chart uses a d3.scaleLinear to map the data range to the SVG height, with each bar's x-position determined by its index. D3.js v6 selections append rect elements for the bars and text labels above each bar showing its value. The SVG renderer is styled via CSS, and the y-axis scale is computed from d3.max of the data array.

Aug 21, 2024
Loading thumbnail…

Fork of Scatter Plot with Color_new

This fork of a scatter plot visualizes the Iris Dataset, showing sepal length against petal length. The plot’s marks are colored by species using an ordinal color scale from `d3-scale-chromatic`, with a corresponding color legend generated by the `colorLegend` function. The axes are created with `d3.axisLeft` and `d3.axisBottom`, and the chart is rendered using D3’s selection join API.

Aug 21, 2024
Loading thumbnail…

Fork of Circles with D3

This D3.js example displays seven colorful circles of varying sizes and positions on a light green background, creating an abstract composition. The circles use a semi-transparent opacity, allowing overlaps to blend their colors. The code demonstrates D3’s `select`, `selectAll`, and `join` API methods, chaining attribute setters like `attr('cx', ...)` and `attr('r', ...)`. The circle data is hardcoded as an array of objects containing coordinates, radii, and hex color values, with an SVG element sized to the container.

Aug 21, 2024
Loading thumbnail…

Fork of Simple World Map_new

This interactive world map renders country boundaries using a Natural Earth projection, displaying graticule lines and an outline for geographic context. Built with React and D3, the code fetches TopoJSON data from the `visionscarto-world-atlas` package and converts it to GeoJSON features using `topojson-client`. The map is drawn with `d3.geoPath` and `d3.geoNaturalEarth1`, with `d3.geoGraticule` generating the latitude and longitude grid.

Aug 21, 2024
Loading thumbnail…

Fork of Blank Slate with Hot

This example demonstrates the "Hello World" for the VizHub V3 runtime, showing a large, centered text element that renders "Everyone!" inside a container. The code exports a `main` function that receives the container and sets its inner HTML with an inline style for font size and text alignment. It highlights the runtime’s simplified entry point without an `index.html` file, and supports interactive hot reloading—allowing values like the font size to be adjusted live via Alt-drag in the editor.

Aug 21, 2024