Skip to main content
Log in
N

nandugali

@nandugali·12 public vizzes

Loading thumbnail…

Untitled

A real-time water surface simulation renders an animated 3D plane in WebGL. Three.js constructs the scene, geometry, and shader material, while GLSL vertex and fragment shaders compute wave displacement based on time, amplitude, and speed uniforms. The animation loop increments the time uniform each frame, continuously deforming the grid to mimic rippling water. The code imports from Three.js and gl-matrix for matrix and vector math, with the rendering handled by the WebGLRenderer.

Dec 9, 2023
Loading thumbnail…

Water Simulation

This WebGL visualization demonstrates a simulated water surface using Three.js. The code constructs a 10x10 plane geometry, applies a blue wireframe material, and animates its vertices by altering their z-coordinates with a sine function based on time. Each vertex moves independently to create rippling wave-like motion, with the mesh redrawn every frame. The interactive camera, positioned at z=50, provides a perspective view of the undulating terrain, showcasing real-time procedural animation driven by a simple mathematical model.

Dec 9, 2023
Loading thumbnail…

Simple Water Simulation

A simple WebGL pendulum swings in blue against a white canvas, anchored at a fixed point and connected by a line to a circular bob. The simulation runs continuously, rotating the bob and wire around the anchor using a shader-based rotation matrix. Users can click buttons to increase or decrease the angular velocity, speeding up or slowing down the swing. Rendered with the WebGL API, the example draws points, a triangle fan for the bob, and lines via raw vertex buffers and custom shaders.

Dec 9, 2023
Loading thumbnail…

Simple Water Simulation

This example shows a simple water simulation rendered as a full-screen, animated canvas. A static, blue gradient fill is applied based on the texture coordinate’s y-position, creating a uniform water-like surface. The piece uses the WebGL API directly via JavaScript, compiling custom vertex and fragment shaders to control geometry and color. It draws a single quad as a triangle strip and continuously re-renders it via `requestAnimationFrame`, though the color does not change over time.

Dec 9, 2023
Loading thumbnail…

Fork of test

This visualization displays a correlation matrix for the `mtcars` dataset, showing pairwise relationships between variables. The upper triangle presents correlation coefficients as colored text, while the lower triangle uses circles sized by the absolute correlation value, with color indicating the correlation strength from red (negative) to blue (positive). The diagonal labels each variable. Built with d3.v3, the code loads data from CSV, uses ordinal scales with `rangePoints` for positioning, and applies a linear color scale for the diverging color scheme.

Dec 9, 2023
Loading thumbnail…

Fork of Fork of Scatter Plot Using Different Data Set

This scatter plot visualizes the number of tweets per minute over a day, using time of day on the x-axis and tweet count on the y-axis. The D3 v7 code loads CSV data from a GitHub-hosted file, parses the time strings into JavaScript Date objects, and renders each data point as a small circle in an SVG. It uses d3.scaleTime and d3.scaleLinear for the axes, with d3.axisLeft and d3.axisBottom adding labeled tick marks formatted as hour periods (e.g., "01 PM").

Dec 9, 2023
Loading thumbnail…

Fork of Scatter Plot Using Different Data Set

This scatter plot visualizes the number of tweets per minute throughout a day, using time of day on the x-axis and tweet count on the y-axis. The SVG circles are drawn from CSV data loaded via `d3.csv` from a remote GitHub repository. The code uses `d3.scaleTime` and `d3.scaleLinear` to map the data to screen coordinates, with axes generated by `axisLeft` and `axisBottom`, and time labels formatted with `d3.timeFormat`. The visualization fills the entire browser window based on `window.innerWidth` and `window.innerHeight`.

Dec 9, 2023
Loading thumbnail…

Water Simulation

This example shows an interactive water surface simulation rendered with WebGL on an HTML canvas. The visualization uses D3’s `select` to manage the container and a custom `viz` module that updates the scene on each render. The code initializes the WebGL context and draws a dynamic, undulating water effect, with state managed through a `setState` function to trigger re-renders. It relies on canvas-based WebGL rendering for fluid-like motion, with no external data source beyond the visual simulation itself.

Dec 9, 2023
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, rendered at a very large font size. It demonstrates the fundamental structure of an HTML document, combining CSS for styling and JavaScript for potential interactivity. The styling is applied through a `<style>` block that sets the `.message` class’s font size and alignment. The page uses no external libraries, relying purely on native HTML and CSS, making it a minimal starting point for web-based visualization projects.

Dec 9, 2023
Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart displays the basic cost of Netflix subscriptions across ten countries, sorted from highest to lowest. The visualization uses D3 v5 APIs including `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` to generate SVG paths. Each slice’s color corresponds to its cost value, with mouseover logging the data to the console. A legend on the right lists each country with a color swatch and formatted dollar amount, while the data comes from a CSV file loaded via `csv()`.

Oct 29, 2023
Loading thumbnail…

Chaos Game

This visualization demonstrates the chaos game, a mathematical process that generates fractal patterns by repeatedly selecting points between a set of fixed anchor vertices. The SVG canvas displays a dense scatter of points that emerge as the algorithm iterates, with each new point placed halfway between the previous point and a randomly chosen vertex. The example uses D3.js v7 to manage the SVG element and render the resulting point cloud, while the underlying computation is handled in JavaScript. The visualization shows how simple probabilistic rules can produce intricate, self-similar geometric structures.

Sep 29, 2023
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, rendered at a very large font size. It demonstrates the fundamental structure of an HTML document, combining CSS for styling and JavaScript for potential interactivity. The styling is applied through a `<style>` block that sets the `.message` class’s font size and alignment. The page uses no external libraries, relying purely on native HTML and CSS, making it a minimal starting point for web-based visualization projects.

Sep 29, 2023