P

pranav-vis

@pranav-vis·31 public vizzes

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event. The x-axis maps reported dates using a time scale, while the y-axis uses a logarithmic scale to show total dead and missing, effectively handling the wide range of values. Built with React and D3 v5, the visualization uses SVG rendering with custom AxisBottom, AxisLeft, and Marks components. The logarithmic scale compresses large numbers, making it easier to compare events of varying severity across time.

Loading thumbnail…

Missing Migrants on a Map - Multiple Views with Brushing (done)

This visualization shows the global distribution of missing migrants using a natural Earth projection map with bubble markers sized by death counts. A synchronized date histogram below enables temporal brushing, filtering the map’s circles to reflect the selected time range. The React app uses D3 v7 APIs including `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `brushX` for linked views, while rendering land and graticule paths as SVG with CSS styling. Data comes from a simplified Missing Migrants CSV, loaded via `d3.csv`.

Loading thumbnail…

Brushing try

This example renders a full-screen “Hello React!” message at a massive font size, demonstrating a minimal React setup. The app uses React 16.13.1 and ReactDOM to mount a single functional component to the DOM. The component returns a `<div>` with a CSS class that styles the text, and the page loads the production React bundles via a CDN. The code shows no interactive brushing or data visualization behavior despite the title.

Loading thumbnail…

Fork of Missing Migrants on a Map - Multiple Views w/brushing (retry)

This interactive map visualizes global migrant deaths and disappearances, with bubble size representing the total dead and missing per incident. A linked time-series histogram below displays the same data aggregated by month, enabling users to observe temporal trends. The visualization uses D3 v7 for data processing and rendering, with a React frontend. The map employs `d3.geoNaturalEarth1` projection for spatial data, while the histogram uses `d3.scaleTime` for temporal binning. D3's `brushX` API enables interactive time-range selection, though the code currently lacks a visible data-filtering mechanism. Data comes from a CSV file of Missing Migrants Project records.

Loading thumbnail…

Missing Migrants on a Map - Multiple Views w/brushing

A map of global migrant deaths and disappearances is paired with a time-series histogram, allowing brushing on the histogram to filter the map’s bubbles. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with circle radii scaled by `d3.scaleSqrt`. The histogram bins monthly reported incidents using `d3.histogram` and a time scale, while `d3.brushX` enables selection. The data comes from a CSV of Missing Migrants Global 2021 reports, rendered in React with D3 v7 into SVG.

Loading thumbnail…

Missing Migrants on a Map - Multiple Views

A map and histogram combine to visualize recorded deaths and disappearances of migrants. The map uses a natural Earth projection (`d3.geoNaturalEarth1`) and `d3.geoPath` to draw country boundaries, with circle size scaled by `d3.scaleSqrt` to represent the count of dead and missing per location. A date histogram below aggregates the same metric monthly using `d3.histogram` and `d3.timeMonths`, with `d3.scaleTime` and `d3.scaleLinear` axes. Both views render as SVG, driven by React components and loaded from a CSV dataset.

Loading thumbnail…

Missing Migrants - 1

A histogram displays the monthly total of dead and missing migrants, using data from a simplified Missing Migrants CSV. Bars are rendered as SVG rectangles within a React component, with the x-axis representing time and the y-axis showing aggregate counts. The chart uses D3 v7’s `scaleTime`, `scaleLinear`, `histogram`, and `timeMonths` thresholds to bin records, while axes are custom components. Tooltips reveal the month range and count for each bar.

Loading thumbnail…

Missing Migrants on a Map

This visualization maps the global distribution of missing migrants, with each circle’s size representing the total number of dead and missing individuals at that location. The map uses a natural Earth projection with graticules, landmasses, and country borders rendered via `d3.geoNaturalEarth1` and `d3.geoPath`. Data is loaded from a CSV using `d3.csv` and scaled with `d3.scaleSqrt`. React components manage the SVG rendering, while a world atlas TopoJSON provides geographic boundaries. Circle opacity is set to 0.3, and hover interactions are not implemented.

Loading thumbnail…

Points on a World Map

This example displays global population distribution by plotting cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The visualization uses React for component structure, D3 v7’s `geoNaturalEarth1` and `geoPath` for map rendering, and TopoJSON to load world country boundaries. City coordinates and populations come from a CSV dataset, projected onto the map with `projection([lng, lat])`.

Loading thumbnail…

World Map

This example renders a world map using D3’s `geoNaturalEarth1` projection and `geoPath` to draw land masses from TopoJSON data (countries-50m.json), with graticules and country borders overlaid. The map fills land with a teal color against a gray sphere, while interior boundaries appear as lighter strokes. Built with React for component structure, the visualization fetches the TopoJSON via `d3.json`, converts it using `topojson.feature` and `topojson.mesh`, and renders the final SVG paths.

Loading thumbnail…

Scatterplot with Color and Interactive Color Legend

This interactive scatterplot visualizes the Iris dataset, plotting sepal width against petal length with points colored by species. The chart includes an interactive color legend; hovering over a legend entry fades non-matching points to 20% opacity and re-renders them in full opacity, allowing users to isolate a species. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for axes, marks, and the legend, rendering in SVG.

Loading thumbnail…

IRIS Scatterplot with Color and Color Legend

This visualization displays the classic Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal width on the y-axis. Each data point is colored by species using d3.scaleOrdinal, with a custom React-rendered color legend positioned to the right. The SVG is built with React components for axes and marks, using d3.scaleLinear for positioning and d3.extent to compute domains. Axis labels are rotated and styled with CSS. The data loads asynchronously via d3.csv, which parses numeric fields before rendering.

Loading thumbnail…

React Starter - Array render test

Four strings from a hardcoded array render as an SVG scatter plot, with each value appearing as a colored circle labeled by its corresponding text. The React component `Array` maps over the array, using a provided color scale to assign fills to circles positioned at fixed x and y offsets. The example demonstrates React’s declarative rendering with ReactDOM rendering an SVG group, translating coordinates, and using JSX to generate circle and text elements.

Loading thumbnail…

IRIS Scatterplot with Color

This scatterplot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis, with points colored by species using a d3.scaleOrdinal with a custom range. The React-based implementation uses d3.csv to load the data and d3.scaleLinear for axes, rendered as SVG circles with native `<title>` tooltips. Axes are built with custom React components from d3.ticks, and the chart includes labeled axes and a loading message. The color encoding distinguishes the three Iris species, making group patterns visible.

Loading thumbnail…

Polished Scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the x- and y-axes via dropdown menus. The SVG rendering uses React to manage state, with d3.scaleLinear for scales and d3.extent for domain calculation. Custom axis components generate ticks and labels, while circle marks include tooltips formatted with d3.format. The data is loaded as CSV and parsed into numeric values before being passed to the visualization.

Loading thumbnail…

Scatterplot with menus

This scatterplot displays the Iris flower dataset, mapping petal and sepal measurements as points. Two dropdown menus let users select which numeric attributes to plot on the X and Y axes, with axis labels updating dynamically. The visualization is built with React components, using D3 v7’s `scaleLinear` and `extent` for axes and scales, while rendering SVG circles for each data point. CSV data is loaded via D3’s `csv` utility and formatted with `format` for tick labels.

Loading thumbnail…

IRIS Scatterplot

This example visualizes the classic Fisher's Iris dataset, plotting sepal width against petal length for each flower sample as a circle. The D3.js v7 linearithmic scales (`d3.scaleLinear`) map the data to SVG coordinates, with the `AxisBottom` and `AxisLeft` custom React components rendering ticks and labels. Hovering over a point shows a tooltip with the formatted petal length value. The code loads data from a CSV using D3's `csv` function and renders the plot as SVG circles within a React application.

Loading thumbnail…

Menus with react

This example demonstrates a React-based dropdown menu for selecting a pet, with the current selection displayed as large text. The app uses React’s `useState` hook to manage the selected value and passes it to a custom `Dropdown` component, which renders a native HTML `<select>` element. It maps over an array of pet options, setting the `selected` attribute on the matching option. The component receives `options`, an `id`, and an `onSelectedValueChange` callback, which updates the state on user interaction. The styling is applied via inline CSS in the HTML file.

Loading thumbnail…

Fork of React Starter

This example displays the text “Hello React!” centered in a large font, demonstrating a minimal React application. It uses React 16.13.1 and ReactDOM to render a functional component into a root div. The component returns a simple styled message, with CSS defining the font size and alignment. The code is bundled into a single script and loaded in an HTML file, showing the basic structure of a React project without additional libraries or data processing.

Loading thumbnail…

Temperature Line Chart - San Francisco

This line chart displays daily temperature variations in San Francisco over a week, with individual data points circled along a smooth curve. The visualization uses React with D3 v7, reading data from a CSV via `d3.csv`. The chart implements `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and a path drawn with `d3.line` and `d3.curveNatural`. Axes are custom React components rendering SVG tick marks, with gradient styling applied through companion CSS classes. The data loads asynchronously through a custom `useData` hook and displays a loading message until ready.

Loading thumbnail…

UN Population Bar Chart - Stylized

This example visualizes the top five most populous countries from the UN World Population 2019 dataset as a horizontal bar chart. Each bar’s length encodes the estimated population for 2020, with tooltips showing the value in billions. Using React and D3 v7, the chart employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and custom React components for axes. The SVG bars are rendered with `<rect>` elements, while axes use D3’s tick generation with SI formatting that converts billions to “B”.

Loading thumbnail…

UN Population Bar Chart - Margins And Axes (Modular)

This D3.js v7 and React modular example displays United Nations population estimates for the top five countries in 2020, using an SVG bar chart. Left and bottom axes delineate country names and population values, with gridlines, while each bar’s length maps the quantitative scale. The code separates concerns into dedicated modules—`axisBottom.js`, `axisLeft.js`, and `marks.js`—each exporting reusable functions. It employs `scaleBand` and `scaleLinear` from D3 to position bars and ticks, uses the `csv` loader to fetch the remote data source, and renders the chart inside a React interface with defined margins.

Loading thumbnail…

Fork of UN Population Bar Chart - Margins And Axes

This example visualizes United Nations world population data for the top five countries as a horizontal bar chart, using D3 v7 scales and React components. The SVG rendering applies explicit margins and generates both x- and y-axis tick marks with grid lines for value reference. The code uses `scaleBand` for country positioning, `scaleLinear` for population values, and `csv` to load the UN dataset, with bar heights adjusted by computed padding.

Loading thumbnail…

UN Population Bar Chart - Pathetic Version

This example shows a rudimentary bar chart of UN world population data for five countries, displaying each country's 2020 population as a horizontal rectangle scaled by value. The visualization uses React for component management and d3.v7's `scaleBand`, `scaleLinear`, and `csv` loader to fetch and map the data from a GitHub-hosted CSV. Bars are rendered as SVG `<rect>` elements with olive fill, positioned using the band scale and sized by the linear scale. The chart intentionally lacks axes, labels, or interactivity, presenting only raw bars on a blank canvas.

Loading thumbnail…

Fork of Rendering CSS Named Colors - Arc (Using pie)

This example visualizes all 148 CSS named colors as a pie chart, with each slice filled using its corresponding RGB hex value from a CSV dataset provided by MDN. The React application loads the data via d3.csv, then uses d3.pie to compute the arc segments and d3.arc to generate the SVG path geometries for each slice. The resulting chart is rendered as an SVG within a 960×500 canvas, centered on the display.

Loading thumbnail…

Rendering CSS Named Colors - Arc

The visualization displays all CSS named colors as a full circular arc chart, with each color occupying a wedge proportional to its position in the dataset. It uses React to manage state and render SVG paths, while D3 v7 handles data loading via `d3.csv` and arc generation through `d3.arc`. The data comes from a GitHub-hosted CSV file of named colors and their RGB hex values, which directly sets each path’s fill. The chart initially shows a loading message until the data arrives.

Loading thumbnail…

Rendering Data With D3

This example renders the CSS named colors from an MDN dataset as a vertical stack of horizontal bars, each colored by its hex value. The visualization uses React to manage component state and render the data, while D3.js v7 loads the CSV file via `d3.csv`. Each row is mapped to a styled HTML `<div>` element, with the dataset loaded asynchronously and displayed once available. The code also includes a utility to summarize dataset size and structure using `d3.csvFormat`.

Loading thumbnail…

Fork of Vega-Lite API Template

This example plots the daily adjusted closing price of Apple stock (AAPL) as a line chart, with time on the x-axis and price on the y-axis, using a minimal dark-themed design. It loads CSV data from a GitHub gist via `d3.csv` and renders the visualization with the Vega-Lite API, specifically using `markLine` and encodings for temporal and quantitative fields. The code registers Vega, Vega-Lite, and Vega-Tooltip, customizes axis and label styles via a configuration object, and auto-fits the chart to the browser window.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7 and the browser’s Fetch API. It displays a text summary of the CSS Named Colors dataset, reporting the total file size in kilobytes, row count, and column count. The code uses `d3.csv()` to fetch and parse the remote CSV, while an `async` function with `await` handles raw text retrieval, and `d3.csvFormat()` measures the dataset’s size.

Loading thumbnail…

Mouse follower

A green circle acts as a mouse follower, tracking pointer movements across a React-managed SVG canvas. The component uses React hooks `useState` and `useCallback` to store and update the cursor position on `onMouseMove` events, re-rendering the circle's `cx` and `cy` attributes accordingly. The example demonstrates declarative SVG rendering with React's virtual DOM.

Loading thumbnail…

Smiley Face All Parts

A grid of identical smiley faces appears, each built from yellow circular faces, black eyes with white outlines, and a curved mouth stroke. The example demonstrates modular React component composition, where `Face` assembles `FaceCircle`, `EyeCircle`, and `MouthArc` within a `FaceContainer` that applies an SVG transform. `d3.arc` generates the mouth path, while `d3.range` in `index.js` maps over an array to render multiple faces. All graphics are drawn as SVG elements in React.