ppal41366@gmail.com

@Prateekpal41366·14 public vizzes

Fork of Fork of Fork of HTML Starter

A scatter plot of CSV data renders each point as a hexagonal polygon, rotated and scaled, with fill color mapped from a selected categorical attribute. Users toggle between white and color via a dropdown. The React app uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.extent`, and `d3.format`, with D3 v7, drawing SVG polygons with tooltips.

Jul 4, 2024

Loading thumbnail…

Fork of Fork of React Starter

This example shows a grid-based layout of grey squares arranged on a blue background, with a single white rectangle and a purple block overlaid in specific grid positions. The React component renders multiple `grid-item1` divs into a CSS Grid container with 14 columns and 9 rows. The layout is defined using CSS Grid properties like `grid-template-columns` and `grid-template-rows` in the HTML `<style>` block, while the React app uses `createRoot` from `react-dom` to mount the component. The visualization demonstrates how CSS Grid positioning and React JSX can combine to create a structured, colored composition.

Jul 4, 2024

Loading thumbnail…

Fork of React Starter

This React example displays a 12-column CSS grid with seven items, where six smaller cells span two columns and two larger cells span three columns and two rows each. The layout uses a blue background with white cells, rendering the word “Hello React!” above the grid. It is built with React 18.2, using the `createRoot` and `render` methods from the `react-dom` library, and relies on CSS Grid properties such as `grid-column` and `grid-row` for sizing.

Jul 3, 2024

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js web page that displays the message “Hello VizHub!” centered in a large font. It loads D3 from the UNPKG CDN and uses the `select` function from the `d3` library to set the text content of a `div` element. The example also imports a local ES6 module, `myMessage.js`, to supply the message string, and uses a linked stylesheet, `styles.css`, to control the text’s alignment and size. The code highlights basic D3 selection and DOM manipulation without any data or complex rendering.

Jul 3, 2024

Loading thumbnail…

Fork of HTML Starter

This example shows a simple web page that displays the message “Hello HTML!” in large, centered text. It demonstrates how to structure a basic HTML document with embedded CSS for styling and a reference to JavaScript libraries. The page loads React and ReactDOM from CDN links using script tags, though the React libraries are not actually used to render content; the message is a static div element with a class that applies the font size and alignment. The styling uses a 13em font-size to make the text prominent.

Jul 1, 2024

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatterplot displays survey data as hexagonal polygons positioned by x and y values, with color encoding categorical attributes. Users toggle between two color schemes via buttons representing 2009 and 2014 data. Built with React and D3 v7, it uses `scaleLinear` and `scaleOrdinal` for scales, `extent` for domains, and renders SVG polygons with rotation, scaling, and stroke styling. Data loads asynchronously from a CSV via `d3.csv`.

Jun 24, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a vertical button list where users can select one of five buttons, causing the chosen button to enlarge and change color while the others shrink and fade. The interface is built using React's `useState` hook to track the selected button index, and ReactDOM renders the `App` component. Styling leverages CSS transitions for smooth scaling and color shifts, with the button container using flexbox to center the selected item and push others outward. The code runs entirely in the browser without external data sources.

Jun 21, 2024

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a rotating circular menu interface built with React and D3. The menu displays a set of items arranged radially, where each item rotates to a selected position when clicked. The selected item is highlighted with a distinct background color. The visualization uses React's `useState` hook to manage the selected index and dynamically applies CSS transforms for positioning and rotation. It imports D3 v5 through a CDN link in the HTML file, and it defines the menu styling and structure using custom CSS and React components.

Jun 21, 2024

Loading thumbnail…

Fork of HTML Starter

This is a minimal web page built with HTML and CSS that displays the text "Hello HTML!" centered on a white background. The page uses a `<style>` block to set the font size to 13em and text alignment to center. The code is a basic starter template demonstrating how to structure an HTML document with embedded CSS, and it includes a placeholder for JavaScript code in an external file. This example serves as a simple foundation for building more complex visualizations.

Jun 21, 2024

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot displays the classic Iris Dataset, encoding each observation as a rotated white hexagon with a black outline. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and maps data points to SVG `<polygon>` elements. The hexagons are positioned via `xScale` and `yScale`, then transformed with `rotate` and `scale` parameters. Hovering reveals tooltips formatted with the `format` API. The chart loads data from a CSV file using D3's `csv` function.

Jun 14, 2024

Loading thumbnail…

HTML Starter

This visualization displays a cheerful smiley face composed of a yellow circular background with black strokes, two eyes, a mouth drawn using D3's arc generator, and decorative flower-like polygons positioned around the face. The React-based code constructs the SVG scene using reusable components like BackgroundCircle, Eyes, and Mouth, while the Facecontainer manages the SVG dimensions and centering. D3 v7 provides the arc path for the mouth, and linearGradient fills add red-to-yellow color accents to select shapes.

Jun 12, 2024

Loading thumbnail…

Fork of Simple Scatter Plot

This visualization is a fork of a simple scatter plot that displays the relationship between bill length and flipper length in the Penguins Dataset. It shows each penguin as a semi-transparent circle positioned according to these two measurements, with labeled axes and a light gray plot background. The implementation uses React with D3.js, importing `scaleLinear`, `axisLeft`, and `extent` from D3, along with custom axis label components. Data is loaded from a CSV file via a GitHub gist URL, and the plot resizes to fit its container using D3 selectors.

Jun 12, 2024

Loading thumbnail…

data viz 1

This example uses D3 to load and log data from a remote CSV file containing CSS named colors. The code constructs a URL to a GitHub-hosted CSV, calls `d3.csv()` to fetch and parse the data, and then prints the resulting array of objects to the browser console. The rendering is minimal, focusing on demonstrating the data-loading workflow rather than a visual output, with all styling and layout handled by the default HTML structure.

Jun 11, 2024

Loading thumbnail…

mouse follower

This example shows an interactive smiley face rendered as a circle that follows the mouse pointer across an SVG canvas. The circle’s center coordinates update in real-time based on the pointer’s position within the viewport. Built with React and D3 v7, the app uses React state and the `onMouseMove` event handler to track the pointer, while the SVG `<circle>` element is updated via React’s declarative rendering. The mouse position is captured from `clientX` and `clientY` properties, with the initial position set to the canvas center.

Jun 11, 2024