Niku12352

@Niku12352·5 public vizzes

Menus with React

This example demonstrates a simple pet-selection dropdown menu built with React, using state to track and log the currently chosen option. It renders a labeled `<select>` element populated with a static array of pet options (dog, cat, hamster, parrot, spider, goldfish), with the initial value set to hamster. The code uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component that maps over options to create `<option>` elements. ReactDOM mounts the `App` component into the DOM, with styling applied via inline CSS.

May 7, 2023

Loading thumbnail…

Polished World Map

This polished world map displays country boundaries and graticules in a muted teal palette, with a light gray sphere background. It uses React to render SVG elements generated by the d3-geo APIs `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, while loading geographic data from the World Atlas TopoJSON via `topojson.feature` and `topojson.mesh`. The map visually separates landmasses, internal borders, and graticule lines through distinct CSS classes, offering a clean cartographic aesthetic.

May 7, 2023

Loading thumbnail…

Fork of Rendering data with react

A full-screen stack of thin horizontal bars represents CSS named colors, each bar’s background color set to its corresponding RGB hex value from a CSV file. The visualization loads the data asynchronously with D3’s `csv` utility and manages the data state through React’s `useState` and `useEffect` hooks. React renders each row as a `div` element with a fixed width of 960 pixels and height of 4 pixels, with the bar colors derived directly from the `RGB hex value` column. A loading message displays until the data arrives.

May 7, 2023

Loading thumbnail…

Rendering data with react

This example displays all CSS named colors as horizontal stripes across the browser window, using a data-driven approach. The code loads a CSV file of color names and their RGB hex values via `d3.csv`, then maps each row to a styled `<div>` element with a background color set from the data. React manages the state and conditional rendering, showing a loading message until the asynchronous data fetch completes. The visualization uses React’s `useState` and `useEffect` hooks with D3 v5 utilities to fetch and parse the remote dataset.

May 7, 2023

Loading thumbnail…

Mouse Follower

A React and SVG visualization renders a black circle that follows the mouse cursor across a 960 by 500 canvas. As the pointer moves, the circle’s fill color changes randomly to one of six predefined hex values (e.g., red, green, blue). The application tracks cursor coordinates via the `onMouseMove` event on the `<svg>` element, updating the circle’s `cx` and `cy` attributes through React state. The code uses React’s `useState` and `useCallback` hooks to manage position and color updates efficiently.

May 7, 2023