24cs118@kpriet.ac.in

@Mithuna713·5 public vizzes

Fork of Fork of CAFE

A forked version of the CAFE visualization displays a single hello-world message centered on the page. The code imports the `select` function from D3 v6 and uses it to set the text content of a div with the ID `message`. Styling is applied via an external CSS file, setting the font size to 12em and centering the text. This example demonstrates a minimal D3 setup with ES6 module imports and a CDN-loaded library.

Jul 28, 2025

Loading thumbnail…

Fork of CAFE

This fork of CAFE displays a single centered message, “Hello VizHub!”, rendered in large type. The example demonstrates a minimal D3.js setup, using the `select` function from the `d3` library to target an HTML element by ID and set its text content. The visual styling, including font size and alignment, is controlled through a separate CSS file, while the message itself is defined in a local ES6 module.

Jul 28, 2025

Loading thumbnail…

CAFE

A minimal starter template renders the text message “Hello VizHub!” in enormous 12em type via D3’s `select` to set the `#message` div’s content. The code imports the `message` string from a local ES6 module (`myMessage.js`) and uses d3.v6 from a CDN, styled through `styles.css`. This example demonstrates basic D3 selection, ES6 module imports, and external CSS integration.

Jul 28, 2025

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a bar chart of letter frequencies from a small CSV dataset, styled with a minimalist aesthetic and interactive click-to-highlight behavior. It uses React with a custom `useDimensions` hook and a `ResizeObserver` to track container size, while D3 v7 handles SVG rendering, scales, and axes. The chart’s bars transition their fill and opacity on hover and selection, and the D3 `scaleBand` and `scaleLinear` APIs map the data. The code splits into modular render functions like `renderBars` and `renderBarElements` for maintainability.

Jul 28, 2025

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example visualizes the Iris dataset, comparing sepal length and width across three species using a D3.js scatter plot. The chart uses `d3.csv` to load data from a remote source and `d3.scaleLinear` and `d3.scaleOrdinal` for positioning and color mapping. Interactive legend highlighting via mouse events fades non-hovered points, with the visual configuration controlled by a dedicated config file and stylized using BBC color themes.

Jul 28, 2025