NodeJS

100%

✓ Published0🌍 Public

Last edited Mar 2, 2022

Created on Sep 27, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

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.

FFaisal Akbar

78% 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

71% match

Loading thumbnail…

Rendering Data with React

This example shows how React and D3 work together to render a grid of color swatches, one for each named CSS color loaded from an MDN dataset. The React component manages the asynchronous data loading with the `useState` and `useEffect` hooks, fetching the CSV via D3’s `csv` method. Once loaded, each color is mapped to a div whose background color is set using the `RGB hex value` field from the dataset. The visualization relies on React’s declarative rendering rather than D3’s DOM manipulation, demonstrating a clean separation of data loading and UI presentation.

MMario Ibarra

65% match

Loading thumbnail…

Grid Idea 2

This example demonstrates a responsive CSS Grid layout that organizes seven placeholder visualization areas into a structured dashboard. On larger screens, the grid uses named template areas to arrange a header, main content regions, and navigation blocks across three columns and three rows. At narrower viewport widths, a media query reflows the layout into a single column, stacking all sections vertically. The implementation uses pure HTML and CSS Grid properties including `grid-template-areas`, `grid-template-rows`, `grid-template-columns`, and media queries, with no JavaScript or external libraries.

RRobert Johnson

65% match

Loading thumbnail…

grids 2

This example presents a dashboard layout with distinct regions for a map, table, slider, and hierarchical data, though the visible code only establishes the Bootstrap-based grid structure and an empty SVG canvas. The page uses Bootstrap 4 for responsive column and row sizing, with a fixed full-height container and color-coded placeholders. D3 v5 is imported and used solely to set the SVG’s width and height based on the document’s client dimensions. The index.js file applies these attributes without additional data binding or rendering, leaving the actual visualizations unimplemented.

AAnimesh Nautiyal

64% match

Loading thumbnail…

grids

This visualization displays a grid-based layout with multiple colored panels, including a header bar, a slider-controlled range display, and a large SVG canvas. The interface uses Bootstrap’s grid system for responsive column and row structuring, while d3.v5 handles SVG sizing and element selection. A slider appears to adjust a numeric value shown in the adjacent label, with the main chart area left empty. The page uses a fixed full-viewport layout with distinct color-coded sections for headers, controls, and content areas.

AAnimesh Nautiyal

64% match

Loading thumbnail…

Dataviz_project

This visualization demonstrates a monthly calendar layout using a CSS Grid-based chart. The page displays a grid with twelve month labels from January to December, arranged within a bordered chart container. Built with plain HTML and CSS, it uses grid-template-columns to structure the row layout and a fixed margin body styling. The project appears to be a static, minimal example of grid-based data layout rather than an interactive visualization, with no JavaScript or React functionality visible in the provided files.

Ggrassfluffy02

63% match

Loading thumbnail…

Loading data with D3 and React

This example demonstrates a grid of colored squares, one for each CSS named color, rendered as React divs. It fetches a CSV file of color data from a GitHub gist using D3’s `csv` utility, then stores the parsed rows in React state via `useState` and `useEffect`. The background color of each square is set from the `'RGB hex value'` column. The visualization highlights the integration of D3’s data-loading functions with React’s state management for dynamic rendering.

Zzenoalive

63% match