S

Sabin Bhandari

@sansiven·29 public vizzes

Loading thumbnail…

GSAP practice

This example demonstrates a simple animated text element using GSAP, where the phrase “Hello React!” translates diagonally across the screen. It integrates React hooks, specifically `useRef` and `useEffect`, to manage the animation lifecycle. The code relies on GSAP’s `TweenLite` to animate the DOM node’s `x` and `y` properties over one second. The React component renders a styled message, and the animation is triggered once on mount, showcasing a basic interaction between React state management and GSAP’s tweening API.

Loading thumbnail…

Practice API Call

This example demonstrates a practice API call to the Nepal Stock Exchange, displaying sector indices for the NEPSE market. It fetches data from `newweb.nepalstock.com.np` using a React application with `useState` and `useEffect` hooks, though the fetch call is currently commented out. The page renders sector descriptions, including Banking, Hotels, Hydropower, and Development Bank indices, using React 16.13.1 and ReactDOM. The interface presents a static list of market sectors with their base-year market capitalization values.

Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering cities with over 50,000 inhabitants as semi-transparent circles, sized with a square-root scale to reduce visual disparity. The map uses an equal-area natural Earth projection with graticules and political interiors drawn from the World Atlas TopoJSON. The React app uses `d3.geoPath` for geographic features and `d3.scaleSqrt` for proportional sizing, with city data sourced from the Simplemaps World Cities Database.

Loading thumbnail…

Points on a Map

This visualization displays world cities with populations exceeding 50,000 as semi-transparent teal points on an SVG map. The map uses a Natural Earth projection via d3.geoNaturalEarth1, with landmasses, graticules, and interiors rendered using d3.geoPath. City locations are projected from latitude and longitude coordinates, then drawn as small circles. The underlying city data comes from Simplemaps, while country boundaries come from the World Atlas TopoJSON, both loaded asynchronously with d3.csv and d3.json. The React component structure uses custom hooks for data fetching.

Loading thumbnail…

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset from a gist, showing measurements of sepal length, width, petal length, and width for three iris species. Users select the x and y axes via React dropdowns, and hovering over the color legend highlights data points of a selected species while fading the others. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders as SVG with React components, and implements the color legend with interactive hover events.

Loading thumbnail…

Scatter Plot with Color Legenf

This interactive scatter plot visualizes the Iris Dataset, enabling users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus allow the selection of attributes for the x and y axes, while a color legend encodes species. The visualization uses D3 v5 for data scaling and axis generation, React with SVG for rendering, and a color legend implemented with a sequential ordinal scale. The marks are interactive circles with tooltips.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot from the Iris dataset visualizes three flower species as colored circles on an SVG canvas. Users select any of four numeric attributes for the X and Y axes via dropdown menus, with the species class encoded by a categorical color scale (orange, teal, and purple). Rendered in React with D3.js scaleLinear and scaleOrdinal, the plot updates the axes and marks automatically, and hovering over a point reveals its precise X value via an SVG title tooltip. The dataset is loaded asynchronously with d3.csv.

Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot of the Iris dataset explores relationships between four flower measurements, with dropdown menus that independently select which measurement appears on the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear` for axes and renders points as SVG circles. The dataset loads via `d3.csv` from a GitHub gist, and the menus are implemented with the `react-dropdown` library, updating state through React hooks.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control which attributes appear on the x and y axes. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.extent to compute domains, and d3.csv to load data. SVG circles represent individual flowers, with tooltips showing exact values. The interface includes labeled axes that update dynamically, styled with custom CSS and the Poppins font.

Loading thumbnail…

Menus with React

An interactive dropdown menu for selecting a pet is rendered with React and ReactDOM. The component manages its own state via the `useState` hook, updating the selected value and logging it to the console whenever the user changes the option. A custom `Dropdown` component maps over a static array of pet options to generate the `<select>` element, and the selection is controlled by `onSelectedValueChange` callbacks. The interface is styled with CSS, and the example uses React 16.9.0 from the unpkg CDN.

Loading thumbnail…

React Starter

A React starter template renders the text “Hello React” in a blank browser window. The example demonstrates the minimal setup required to integrate React with a visualization gallery, using `ReactDOM.render` to mount a functional component into a `#root` div. It loads React 16.9.0 and ReactDOM from CDN links in `index.html`, with the main logic contained in `index.js`. The code shows no data or interactive behavior, serving solely as a foundation for building React-based examples within the gallery.

Loading thumbnail…

World Map

This visualization displays a world map with landmasses, country boundaries, and graticule lines, using geographic data from the world-atlas TopoJSON source. The React-based application loads topology data via `useData` and renders SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection. Country interiors and borders are generated through TopoJSON’s `feature` and `mesh` functions, while the sphere outline, graticule grid, and filled land areas are styled with distinct CSS classes. The map updates reactively as data loads, showing a clean, minimal aesthetic.

Loading thumbnail…

Line Chart

This line chart visualizes temperature over time for a one-week period in San Francisco, using data loaded from a CSV file. The React application renders an SVG with d3.scaleTime and d3.scaleLinear axes, while the data path is drawn using d3.line with curveNatural interpolation. The chart displays a smooth curve in teal, with axis labels for Time and Temperature, and tick marks formatted as abbreviated weekday names.

Loading thumbnail…

Working with time

A scatter plot displays temperature readings from a week of San Francisco weather data, with time on the x-axis and temperature on the y-axis. The visualization uses React to render SVG circles, with d3.scaleTime and d3.scaleLinear handling the scales. d3.axisBottom and d3.axisLeft are replaced by custom React components for tick marks, while d3.csv loads the dataset and d3.timeFormat formats the day labels. The chart highlights the daily temperature variation across the week.

Loading thumbnail…

Visualising SDG budget Nepal

This example visualizes Nepal’s 2020 budget allocations toward the Sustainable Development Goals (SDGs) using a donut chart. Each slice represents an SDG, with a legend and tooltips (via SVG `<title>`) showing the goal name, allocated amount in lakhs, and percentage. The code loads CSV data using `d3.csv`, computes pie angles with `d3.pie()`, and draws arcs with `d3.arc()`, while React (with hooks like `useState` and `useEffect`) manages the rendering. Colors are assigned via `d3.scaleOrdinal`, and the SVG output includes interactive hover details.

Loading thumbnail…

SDG Budget in Nepal

This visualization shows Nepal's budget allocations across various Sustainable Development Goals (SDGs), displayed as a horizontal bar chart using SVG rendered through React. Each bar represents a goal’s budget in lakhs of rupees, converted to absolute values via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis, with tick formatting via `d3.format`. Data is fetched from a remote CSV using `useData`, a custom React hook, and interactive tooltips are provided through SVG `<title>` elements.

Loading thumbnail…

Rendering data with react (pie chart)

This example renders a pie chart of CSS named colors, where each slice represents an individual color and is filled with its corresponding RGB hex value. The code loads data from a remote CSV file using D3’s `csv` utility, then computes the pie layout with `d3.pie` and generates the SVG paths using `d3.arc`. React manages the component state and renders the SVG elements, with an asynchronous effect to fetch the data and a loading fallback. The visualization demonstrates a clean integration of D3 for data processing and React for declarative rendering.

Loading thumbnail…

Stylised Scatterplot

This scatterplot visualizes the iris dataset, plotting sepal length against sepal width. The visualization uses D3 utilities like `scaleLinear` and `extent` to compute scales, while React components render the SVG elements. The axis labels and tick marks are styled with the Poppins font, and the data points are rendered as circles with tooltips provided by SVG `<title>` elements. The plot demonstrates a clean integration of D3's data-handling with React's component-based rendering.

Loading thumbnail…

Stylised Bar Chart

This stylised bar chart displays the top 10 countries by projected 2020 population, sourced from UN population data. Built with React and rendered as SVG using D3 v6 utilities, the chart uses a horizontal bar layout with a linear scale for population and a band scale for countries. The code imports `scaleBand`, `scaleLinear`, and `format` from D3, while custom React components handle axis and bar rendering. Population values are formatted with SI prefixes, converting gigabytes to billions for tick labels and tooltips.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, with the y-axis listing country names and the x-axis displaying population values. It loads data from a CSV file using `d3.csv` within a React hook (`useData`). The visualization uses `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles, with axes and marks extracted into reusable React components (`AxisBottom`, `AxisLeft`, `Marks`). React renders the SVG, and D3 v6 handles the data loading and scaling.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, with countries listed on the y-axis and population totals on the x-axis. It combines React state management with D3 utilities, using `d3.csv` to load data and `scaleBand`, `scaleLinear`, and `max` to compute positions and scales. React renders the SVG elements, while D3 generates the tick marks and grid lines for both axes. The source data comes from a UN population dataset hosted as a CSV file.

Loading thumbnail…

The Margin Convention

This example displays a horizontal bar chart of the top ten most populous countries for 2020, using a conventional margin layout to offset the visualization from the SVG canvas edges. The application loads its data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis to size the rectangles. React manages the component state and conditional rendering, showing a loading message until the data arrives, while the final chart is drawn as SVG elements within a transformed group.

Loading thumbnail…

Fork of Rendering data with react (pie chart)

This example shows a horizontal bar chart of the ten most populous countries, using United Nations population data for 2020. It loads the data with `d3.csv` and renders each country as an SVG `<rect>` element. React hooks (`useState` and `useEffect`) manage the asynchronous data loading, while `d3.scaleBand` and `d3.scaleLinear` map country names and population values to pixel positions and bar widths. The visualization updates from a loading state to the final chart once the CSV resolves.

Loading thumbnail…

Rendering data with react

A color visualization renders the 148 CSS named colors as horizontal stripes, sorted in the order they appear in a CSV file loaded from a GitHub gist. The example demonstrates React’s component model by mapping each row of data to a `<div>` whose background color is set from the `RGB hex value` field. D3’s `csv` utility fetches and parses the data, while React’s `useState` and `useEffect` hooks manage the asynchronous loading state, showing a “Loading…” message until the data arrives. The result is a simple, full-width gradient-like display of all named colors in SVG-less, div-based rendering.

Loading thumbnail…

Loading data using react d3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors using D3 utilities within a React application. It displays a text message showing the data’s size in kilobytes, row count, and column count once the file is fetched via the `d3.csv` method, with React’s `useState` and `useEffect` hooks managing the asynchronous data loading and state updates. The visualization renders as plain SVG text in a `<pre>` element.

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing a CSV file containing CSS named colors. It displays the total file size in kilobytes, the number of data rows, and the number of columns extracted from the source. The visualization uses the D3.js library’s `d3.csv` method to fetch and parse the remote CSV data asynchronously. The result is then formatted using `d3.csvFormat` to calculate the file size, while the parsed data structure provides the row and column counts.

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas. Built with React, the app tracks cursor coordinates via the `onMouseMove` event and stores them in state using the `useState` hook. The `useCallback` hook optimizes the event handler, and `ReactDOM.render` mounts the component. The SVG’s circle element updates its `cx` and `cy` attributes to match the current mouse position, creating a direct, real-time visual response.

Loading thumbnail…

Smiley face part I

A grid of fifteen randomly generated smiley faces uses D3’s arc generator to draw stylized eyes and mouths, while a yellow circle with a black stroke forms each face. React components compose the faces, with each instance receiving randomized eye offsets, eye radii, and mouth dimensions. The SVG output is rendered through ReactDOM, leveraging D3 v6 for geometric path creation.