Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Aug 14, 2025

Created on May 16, 2023

This example demonstrates a server-side data grid using AG Grid's server-side row model, which loads data on demand from an AMPS messaging system. The visualization shows how real-time data can be filtered, sorted, and grouped directly within the grid interface, with AMPS SOW queries fetching only the necessary rows and aggregated group headers. The code implements a custom server-side datasource in React that constructs AMPS filter language queries, handles pagination through `topN` and `skip` options, and supports drill-down grouping. It uses the `amps` client library to execute SOW queries, while AG Grid's `rowModelType` handles the interactive table rendering.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

NodeJS

An interactive data grid demonstrates server-side rendering with AG Grid's Server-Side Row Model, fetching data from a MySQL database via a Node.js backend. The React-based interface supports grouping, filtering, sorting, and aggregation with custom column definitions that dynamically generate date, dimension, and measure fields. Features include saved group state using localStorage, custom styling with icons, and a side panel for column configuration. The implementation uses AG Grid React components, moment.js for date formatting, and custom value formatters for currency and percentages.

Mmfakboo

78% match

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page that displays the text "Hello HTML!" prominently centered using a custom CSS class. The page loads through a simple `index.html` file, which defines the styling and content. The code also includes JavaScript logic for processing data, with functions designed to handle pivoted data arrays, manage row data, and apply filtering through a grid API. The core demonstration shows a basic HTML structure paired with CSS for layout, while the JavaScript and test files indicate potential integration with the AG Grid library for tabular data display.

FFaisal Akbar

72% match

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.

Pppal41366@gmail.com

68% match

Loading thumbnail…

STUDENT'S SPORTS DATA VIZ

This example displays a data grid for student sports records, showing how table data can be filtered, refreshed, and re-rendered in real time. The visualization uses the `AgGridReact` component from AG Grid to present row data and column definitions, with `gridApi.setRowData` and `gridApi.setFilterModel` enabling dynamic dataset updates based on user selection or pivot generation. The code conditionally transforms input JSON data using a custom `processData` function, switching between raw rows and a pivot table view depending on the selected line of business, and assigns stable row IDs through `getRowId` when enabled.

TTejasriKari@my.unt.edu

67% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that integrates CSS and JavaScript for data visualization. It shows how a basic project structure can be set up using the React framework, as indicated by its source metadata, though the page itself relies on standard web technologies. The code includes a simple layout and styling, with JavaScript handling interactive elements. No external libraries like D3 or Three.js are present, as this starter focuses on foundational structure rather than advanced charting. The rendering approach is straightforward DOM manipulation, and the data source is not specified, keeping the example purely illustrative of a clean starting point for web development.

Ssujitrayudu01@gmail.com

66% match

Loading thumbnail…

Fork of Loading data with React and D3

This example renders a grid of 10-pixel squares, each filled with a CSS named color loaded from a remote CSV file. It uses React state to manage the fetched data, triggering a re-render once the data arrives via D3’s `csv` utility. The display initially shows “Loading…” before the color swatches appear, demonstrating data loading and state management in a React-D3 integration.

AAoibhinnRed

66% match

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.

Pppal41366@gmail.com

66% match

Loading thumbnail…

Fork of Hello HTML

This example displays a simplified React application that logs stock trade data to the console and renders placeholder paragraphs showing the `gain` value from a nested dataset. It imports a large JSON object containing ticker symbols, entry/exit prices, and timestamps, then uses React hooks like `useState` and `useEffect` to manage state. The code also imports `csv` from the D3 library, though it is not actually used for parsing. The rendering is minimal, showing one paragraph per data item rather than a visual chart.

AAndreas Sjödin

65% match