M

mohitPassan

@mohitPassan·22 public vizzes

Loading thumbnail…

Missing migrants multiple views

This visualization presents multiple views of missing migrant data from a global 2021 dataset. A world map using a natural Earth projection displays circles scaled by the square root of total dead and missing per location, with tooltips showing exact counts. Below, a date histogram bins reported deaths monthly, stacking totals by time. Built with React and D3 v6, the map uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while the histogram employs `bin`, `scaleTime`, `scaleLinear`, and `scaleSqrt` for aggregation and scaling. SVG renders all marks, with the world atlas sourced from TopoJSON.

Loading thumbnail…

Missing migrants

This visualization shows the total number of dead and missing migrants reported per month, using a bar chart where each bar aggregates monthly totals. The code loads a CSV dataset of migrant incidents, bins the reported dates into monthly intervals using `d3.bin` with `timeMonths` thresholds, and sums the "Total Dead and Missing" values per bin. React manages the component state while D3 scales (`scaleTime`, `scaleLinear`) and axes render the SVG output. Axes are formatted with `timeFormat`, and tooltips display raw values via SVG `<title>` elements.

Loading thumbnail…

Missing migrants on a map

This visualization maps the locations of missing migrants worldwide, using circles to represent the total number of dead and missing individuals at each coordinate. The map is rendered using a natural Earth projection with D3’s `geoNaturalEarth1` and `geoPath`, while circle radii are scaled by a square-root scale (`scaleSqrt`) applied to the `Total Dead and Missing` field. The underlying data comes from a CSV dataset of global migrant incidents, and the world atlas is loaded via TopoJSON. React manages state and rendering, with SVG elements for the graticule, land, and point marks.

Loading thumbnail…

Points on a map

This visualization displays world cities as points on a natural Earth projection, with point size mapped to population via a square-root scale. The map renders landmasses, graticules, and country interiors using `d3.geoPath` from the `d3` library. City data is loaded as a CSV, while world topology comes from the `world-atlas` package, with React managing the application state and SVG rendering. Hovering over a city reveals a tooltip with its name, country, and population.

Loading thumbnail…

Interactive color legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Users select X and Y axes via dropdown menus, and hover over the categorical color legend to highlight points of a particular Iris species while fading others. The visualization uses React with hooks for state management, d3.scaleLinear and d3.scaleOrdinal for scales, and renders SVG marks via React components. Data is loaded asynchronously with d3.csv.

Loading thumbnail…

Scatter plot with menus and colors

This interactive scatter plot explores the Iris dataset, displaying species as colored points with selectable X and Y axes. Two dropdown menus, built with react-dropdown, let users choose which flower measurements to compare, while a color legend identifies the three species using d3.scaleOrdinal. The visualization uses React state management and SVG rendering through D3 scales and axes (scaleLinear, AxisBottom, AxisLeft) to redraw the chart whenever the selected attributes change.

Loading thumbnail…

Polished scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via React dropdown menus. The visualization uses React with hooks to manage state and data fetching, while D3 v6 scales and SVG elements render the circles and axes. Axis components map data values to screen coordinates using `scaleLinear` with the `d3.extent` method, and hover tooltips display formatted values through SVG `<title>` elements. The chart maintains polished styling with custom tick marks, axis labels, and a Poppins font.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that select which attributes appear on the x and y axes. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, while React manages component state and re-rendering when menu selections change. The data is loaded asynchronously via D3’s `csv` method, and circles represent individual flowers with tooltips showing the x-axis value.

Loading thumbnail…

Menus in react

A React select menu renders four identical options labeled "Nice." The example demonstrates a basic dropdown interface using React 17 and ReactDOM, with the UI defined as a functional component. The options are hard-coded in JSX inside the `App` component, which is mounted into a `#root` div. The page is minimal, with a hidden overflow and no custom styling beyond the reset body margin, highlighting the default browser rendering of the menu widget.

Loading thumbnail…

React starter

This example demonstrates a minimal React application that renders the text “Hello react” to the page. It uses React 17 and ReactDOM to mount the `App` component into a root `div`, with global styles that remove the margin and hide overflow. The code relies on the `React.createElement` and `ReactDOM.render` APIs to define and display the component, serving as a starter template for building interactive visualizations without any data or rendering libraries.

Loading thumbnail…

World map

This visualization presents a world map with landmasses filled in teal, displayed on a light gray sphere with subtle graticule lines, and highlighted country borders. It is constructed with React, using d3’s `geoNaturalEarth1` projection and `geoPath` to draw the geographic features. The data comes from a TopoJSON file loaded from the world-atlas package, processed with the topojson `feature` and `mesh` functions. The map is rendered as an SVG, with styles defined in CSS for the land, sphere, and graticules.

Loading thumbnail…

Working with time

A line chart displays temperature readings from San Francisco over one week, using a time-based x-axis and linear temperature y-axis. Built with React and D3 v6, the visualization employs `scaleTime` and `scaleLinear` to map data, while custom `AxisBottom` and `AxisLeft` components render the axes. The `Marks` component draws a smooth curve using `line()` with `curveNatural`, highlighting the temperature trend. Data loads from an external CSV file and renders as SVG within a responsive layout.

Loading thumbnail…

Scatter plot

This scatter plot uses the classic Iris dataset to visualize the relationship between petal length and petal width. The chart is rendered as an SVG using React, with D3.js computing the linear scales via `scaleLinear` and `extent` to map data values to pixel coordinates. The x- and y-axes are generated by the custom `AxisBottom` and `AxisLeft` components, which use D3's scale `ticks` to position grid lines and labels. Data points are drawn as circles with a constant radius, and hovering reveals a tooltip via an SVG `<title>` element.

Loading thumbnail…

Stylised bar chart

A stylised bar chart displays population data for various countries, with horizontal bars ranked by value. The visualization uses React state management via a `useData` hook to load CSV data from a gist, while D3 v6 functions `scaleBand`, `scaleLinear`, and `max` handle scaling and layout. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. Tick labels use D3’s `format` with SI prefixes, and a Poppins font styles the chart.

Loading thumbnail…

Refactored bar chart

This bar chart displays the population of various countries, using horizontal bars where length encodes the population value. The chart is built with React, using SVG for rendering, and leverages d3's `scaleBand` and `scaleLinear` to map data to screen coordinates. The code is refactored into separate components for the axis, labels, and marks, with data loaded via a custom hook using `d3.csv` from a remote population dataset.

Loading thumbnail…

Axes with react and d3

This example shows a horizontal bar chart of country populations in 2020, rendered as SVG with React. It loads CSV data via `d3.csv` and manages the asynchronous state with React hooks (`useState` and `useEffect`). The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with manually drawn tick marks and labels. The data comes from a GitHub Gist, and the visualization updates once the data is fetched and stored in React state.

Loading thumbnail…

Margin convention

This example shows a horizontal bar chart of country populations derived from a CSV file of 2020 data, with bars rendered in SVG using React. The visualization demonstrates the margin convention by using a fixed outer width and height, subtracting top, right, bottom, and left margins to calculate an inner plotting area, then applying a transform to a `<g>` element. It loads the dataset with `d3.csv`, converts the population column to numbers, and scales the bars with `scaleBand` for the y-axis and `scaleLinear` for bar widths based on the maximum population.

Loading thumbnail…

Bar chart using react and d3

This gallery example demonstrates a horizontal bar chart that visualizes population data for various countries. The chart uses D3's `scaleBand` and `scaleLinear` functions to map country names to the y-axis and population values to bar widths, rendering the results as SVG rectangles. The data is loaded asynchronously from a CSV file via `d3.csv` and managed through React's `useState` and `useEffect` hooks. The visualization leverages React's declarative component model alongside D3's scaling utilities to produce a clean, interactive-free static chart.

Loading thumbnail…

Using d3 arcs

This visualization displays all named CSS colors as a single pie chart, with each slice representing one color from a CSV dataset loaded via `d3.csv`. Using React hooks like `useState` and `useEffect`, the code fetches the color data and renders it as SVG paths. The chart relies on D3’s `pie()` generator to compute arc angles for each color, while the `arc()` generator with `innerRadius(0)` and `outerRadius(600)` draws the filled slices. The data comes from the MDN CSS color reference, showing the full spectrum of color names in one circular layout.

Loading thumbnail…

Loading data to react

This example demonstrates loading a CSS named colors dataset into a React application using D3. The code fetches a CSV file of color names and their corresponding RGB hex values via `d3.csv`. While the data is loading, a simple "Loading..." message appears; once available, each color is rendered as a horizontal strip whose background color corresponds to the hex value from the CSV. The visualization leverages React's `useState` and `useEffect` hooks to manage the asynchronous data fetching and state updates, with ReactDOM rendering the final list of colored divs.

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js. It fetches a dataset of CSS named colors and logs the data to the console in a formatted CSV string. The visualization uses the asynchronous `d3.csv()` function to retrieve and parse the file, followed by `d3.csvFormat()` to serialize the parsed data back into CSV text for display. The code also includes a commented-out alternative using `fetch()` and `d3.csvParse()`.

Loading thumbnail…

Mouse follower

A single gray circle follows the mouse pointer across an SVG canvas. The example uses React state to track the cursor’s clientX and clientY coordinates on every mousemove event, updating the circle’s cx and cy attributes accordingly. Rendered as an SVG circle with a fixed radius, it starts at the center of a 960×500 viewport. The implementation combines React’s useCallback and useState hooks with D3.js v6, though D3 is only loaded and not actively used in the logic.