mfakboo

@mfakboo·5 public vizzes

Fork of Fork of HTML Starter

This example demonstrates how to load and display configuration data from a YAML file in a React application. The React component fetches a `config.yaml` file and uses the `js-yaml` library to parse its contents, extracting and rendering the `location` and `year` fields. The UI is built with standard HTML elements, showing the parsed values alongside a React logo. It also includes snippets for AG Grid column definitions with YAML-based configuration, demonstrating filtering and row grouping functionality.

May 2, 2023

Loading thumbnail…

chartjs

This example demonstrates an interactive line chart built with Chart.js, where React state controls which data series are visible. Toggle buttons below the chart let users show or hide different colored categories, and the chart updates reactively through a custom `useChart` hook that instantiates new Chart instances on each render. The visualization renders to a canvas element, with a dataset containing labels, values, and color properties for filtering. The legend is enabled with red font, and the y-axis starts at zero.

Sep 13, 2022

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.

Mar 2, 2022

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows how petal length and sepal width relate across three flower species, with a color-coded legend that filters data points on hover. Built with React and rendered as SVG using D3 v5 scales (`scaleLinear`, `scaleOrdinal`), the visualization uses circle marks and interactive legend ticks that fade unrelated points. The legend and axes are constructed from reusable components, and the data is loaded via D3’s CSV parser.

Jun 13, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter

This example shows a minimal React + D3.js visualization scaffold with a flexible `VizContainer` component that wraps SVG elements using the standard margin convention. It renders gray rectangles to visualize the outer and inner chart areas, which can be toggled via the `showMargins` prop. The code uses React 16 for component rendering, ReactDOM for mounting, and D3 v6 loaded via CDN, with fixed dimensions of 960×500 pixels. The container abstracts the SVG `<g>` transform for margins, allowing children to be placed directly in the plotting area, though no actual data marks are present yet.

May 26, 2021