Muhammad Meigooni

@mmeigooni·4 public vizzes

react-hook-form

This example demonstrates a React form built with react-hook-form, showing how to programmatically reset form state and values. The form uses the `useForm` hook, and a button triggers the `reset` method to set the first name field to "bill" while configuring options like `keepErrors` and `keepDirty` to preserve specific state aspects. The code also references fetching initial values from an external `formValues.json` API, and inputs are registered using the `register` function with validation rules.

May 11, 2021

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a centered "Hello React!" message in large text. The app uses React 16.13.1 and ReactDOM to mount a single functional component into a root div. The styling is applied through a CSS class that sets the font size and alignment, while the component itself contains only static text content. The code relies on the production builds of React and ReactDOM loaded via CDN, with the application logic compiled into a separate bundle.js file.

Dec 1, 2020

Loading thumbnail…

Goldilocks Zone

This visualization plots confirmed exoplanets by mass (y-axis) against their star’s habitable zone distance (x-axis), with circle size encoding radius and color encoding temperature regime (too hot, just right, too cold). Built with React and D3 v5, it uses `scaleLinear` and `scaleLog` for the y-axis with toggle buttons, `scaleThreshold` for color, and `scaleLinear` for both x and radius scales. SVG circles render from a CSV, with custom `AxisLeft` and `AxisTop` components.

Nov 4, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying the file size, row count, and column count of a CSS Named Colors dataset. The page also includes a small interactive SVG with three circles that show a tooltip on mouseover, using D3 selections and event handlers. The code illustrates both the modern async/await approach with `fetch` and `d3.csvParse`, as well as a commented-out nested promise example. Data comes from an external CSV file linked in the README.

Nov 2, 2020