Skip to main content
Log in
N

naveenkumar.m@kpriet.ac.in

@Naveenkumarm9944303429·12 public vizzes

Loading thumbnail…

Fork of Rea

This chart displays the frequency of letters A through G as a bar graph, with each bar color-coded and clickable to highlight a selected letter. Built with React and D3 v7, it loads data from a CSV file using `d3.csv`, scales the bars with `d3.scaleBand` and `d3.scaleLinear`, and renders axes via `d3.axisBottom` and `d3.axisLeft` with gridlines. A `ResizeObserver` in React tracks container dimensions for responsive redrawing, while D3 transitions animate bar color and opacity on selection.

Jul 28, 2025
Loading thumbnail…

sample

This example displays the text "Hello D3" centered on a plain white page, with the browser’s default styling and no additional visual elements. It serves as a minimal starter template, demonstrating how to import and use the D3 library within a modular JavaScript environment. The page loads the D3 module via an import map in the HTML head, and the accompanying `index.js` file calls the `select` function from D3 to locate the `body` element and set its text content. The styling is applied through a simple CSS rule in the document head.

Jul 28, 2025
Loading thumbnail…

Test

This example displays a plain web page that outputs the text “Hello D3” in the center of the screen using an oversized font size. It demonstrates a minimal D3.js v7 setup with an import map and ES modules. The code imports the `select` function from the D3 library and applies it to the body element, setting its text content. The visualization is rendered as static HTML text without any data or interactive features, serving primarily as a starter template.

Jul 28, 2025
Loading thumbnail…

sample

This example displays the text "Hello D3" centered on a plain white page, with the browser’s default styling and no additional visual elements. It serves as a minimal starter template, demonstrating how to import and use the D3 library within a modular JavaScript environment. The page loads the D3 module via an import map in the HTML head, and the accompanying `index.js` file calls the `select` function from D3 to locate the `body` element and set its text content. The styling is applied through a simple CSS rule in the document head.

Jul 25, 2025
Loading thumbnail…

Trial

This example demonstrates basic SVG shapes—a circle, rectangle, and line—styled with CSS and labeled with text. It shows how HTML, CSS, and SVG combine to create interactive graphics, with hover effects changing shape fills via the `.shape:hover` rule. The page uses an inline `<svg>` element, while the included `index.js` file imports `d3` to select the body and write "Hello D3", though that selection is not reflected in the visible output. The SVG is rendered directly in the HTML document with a white background and rounded border.

Jul 25, 2025
Loading thumbnail…

test

A bar chart displays counts for letters A through G, with the tallest bar representing A and values ranging from 3 to 200. Clicking a bar highlights it with a darker color and increased opacity, while dimming other bars, using d3-scales scaleBand and scaleLinear for positioning. The React app integrates with D3 v7, loading data from a CSV file via d3.csv through a ResizeObserver for responsive sizing.

Jul 25, 2025
Loading thumbnail…

Fork of Fork of Circles with D3

This example displays three static circles on an SVG canvas: a large yellow circle with a black stroke representing a face, and two smaller black circles as eyes. The visualization uses React 18 and D3.js 7.8.5, explicitly importing the D3 library and logging it to the console. The SVG is rendered with fixed dimensions of 960 by 500 pixels, and the circles are positioned using explicit `cx`, `cy`, and `r` attributes. The code demonstrates a simple declarative approach to SVG drawing within a React component structure.

Jul 24, 2025
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This visualization displays the Iris dataset, comparing sepal length and width across three species using a color-coded scatter plot with an interactive legend. The chart loads data from a CSV file via `d3.csv`, uses `scaleLinear` and `scaleOrdinal` for axes and color mapping, and includes axis labels, title, and source attribution. Hovering over legend items triggers fade effects on non-matching points while raising selected species to the front. The implementation uses modular D3 functions for rendering, dimension observation with `ResizeObserver`, and a BBC-inspired color theme.

Jul 24, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A React 19 and D3 v7 bar chart displays letter frequencies from a CSV file, with bars that dim and darken upon selection. The visualization uses a ResizeObserver hook to track container dimensions, d3.scaleBand and d3.scaleLinear for scales, and d3.axisBottom/axisLeft for axes with gridlines. Clicking a bar toggles its highlighted state, which persists through React's useState.

Jul 24, 2025
Loading thumbnail…

Fork of sample

This example demonstrates the "Hello World" starting point for the VizHub V3 Runtime Environment. It renders a single line of text with an adjustable font size, controlled by holding the Alt key and dragging the numeric value directly in the editor. The code exports a `main` function that takes a `container` DIV and sets its inner HTML, using the `clientWidth` and `clientHeight` for layout. This interactive widget provides immediate visual feedback, showcasing the platform's continuous hot reloading and simplified entry point.

Aug 12, 2024
Loading thumbnail…

Circles with D3

This example demonstrates how to draw a set of circles on an SVG canvas using D3.js version 7. Each circle is positioned with explicit x, y coordinates, has a defined radius, and is filled with a distinct color, resulting in an abstract layered composition on a light green background. The code uses D3’s `select` function and the data join pattern via `selectAll`, `data`, and `join` to bind an array of circle objects to SVG elements, then applies attributes like `cx`, `cy`, `r`, and `fill` through method chaining. The visualization is rendered dynamically by measuring the container’s dimensions at runtime, and the example includes a setup for hot reloading in a development environment.

Aug 12, 2024
Loading thumbnail…

sample

This example demonstrates the VizHub V3 Runtime Environment's interactive widget system, where holding the Alt key and dragging a numeric literal in the code editor updates the rendered output in real time. The code uses a single exported `main` function that receives a container DIV and renders a fixed "Hello World!" text string with a dynamically adjustable font size. This provides a minimal starting template for building more complex visualizations within the platform.

Aug 12, 2024