P

Prashish Paudel

@Prashish13·50 public vizzes

Loading thumbnail…

Rough of 2. Penguin Scatter Plot with Color Legend Interaction

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill length and bill depth for three penguin species. Users can hover over the color legend to highlight points from a specific species while fading all others. The visualization uses React with D3 scales and SVG rendering, including `scaleLinear` for axes and `scaleOrdinal` for categorical colors. The `ColorLegend` component manages hover interactions, while `Marks` renders the circles with tooltips via SVG `<title>` elements.

Loading thumbnail…

Rough of 1. Penguin Scatter Plot with Menus

This interactive scatter plot from the Observable-style D3.js gallery displays the palmerpenguins dataset. Two dropdown menus allow users to switch between different numeric attributes for the x and y axes. The scatterplot, rendered as SVG, plots species data points with tooltips showing the x-axis value. The React application uses D3 v5 modules for data loading and linear scaling, with axis components built from D3 scale ticks.

Loading thumbnail…

Rough of 4. Migrant Deaths Linked Views in World Map

This interactive visualization combines a world map with a date histogram to show migrant deaths and missing persons over time. The map uses proportional circles scaled by the total dead and missing count, while the histogram displays monthly sums. Users can brush over the histogram to filter the map’s displayed data. Built with React and D3 v5, it employs d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleSqrt for circle sizing, and d3.brushX for the time-filter interaction. Data comes from the Missing Migrants Dataset.

Loading thumbnail…

Rough of 3. Sized Points of Populated Cities on a Map

This visualization shows populated cities (population over 50,000) as sized points on a world map, using the natural Earth projection. City positions are projected from latitude and longitude, with circle radius scaled by the square root of population. The map displays graticules, landmasses, and country interior boundaries. It uses D3 v5's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map rendering, React for the component structure, and SVG for drawing. City data comes from the Simplemaps World Cities Database, while country boundaries use the World Atlas TopoJSON.

Loading thumbnail…

4. Migrant Deaths Linked Views in World Map

This visualization combines a world map with a date histogram to explore migrant deaths. The map displays circles scaled by the total dead and missing, using a natural Earth projection with d3.geoPath. The histogram aggregates deaths by month, and a d3.brushX selection filters the map’s displayed data. Data comes from the Missing Migrants Dataset, rendered with React and D3 v5.

Loading thumbnail…

3. Sized Points of Populated Cities on a Map

This example displays cities with populations over 50,000 as sized points on a world map, using circle radius to encode population magnitude. The visualization uses `geoNaturalEarth1` and `geoPath` from D3 v5 to project geographic coordinates, while `scaleSqrt` maps population values to radii. City data comes from Simplemaps’ World Cities Database, and country boundaries from World Atlas TopoJSON, rendered via React with SVG. Graticules and land interiors provide spatial context, with semi-transparent teal circles overlapping to reveal density patterns.

Loading thumbnail…

2. Penguin Scatter Plot with Color Legend Interaction

This interactive scatter plot visualizes the Palmer Penguins dataset, showing bill length against bill depth for three penguin species. The SVG visualization uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) to position circles colored by species. A color legend on the right implements hover interaction: mousing over a species name fades all other points to 20% opacity while highlighting the selected species. The chart includes formatted axes and a native SVG tooltip via the `<title>` element, with data loaded asynchronously from a remote CSV using `d3.csv`.

Loading thumbnail…

1. Penguin Scatter Plot with Menus

This interactive scatter plot visualizes the Penguin Dataset, a cleaned CSV of penguin measurements, displaying relationships between physical attributes such as bill length, bill depth, flipper length, and body mass. Built with React and D3 v5, the chart renders circles as SVG marks, with two dropdown menus allowing viewers to dynamically change which numerical columns are mapped to the x- and y-axes. The visualization uses D3's `scaleLinear` and `extent` for axis scaling, `csv` for loading the data, and React's `useState` to manage menu-driven attribute selection.

Loading thumbnail…

37 Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world map and a time-series histogram to explore 37 migrant deaths. The map uses a natural Earth projection via D3’s `geoNaturalEarth1` and `geoPath` to render land and graticules, with circles sized by `scaleSqrt` proportional to death counts. The histogram aggregates monthly totals using `d3.bin` and `sum`, while a `brushX` brush filters the map’s data in real-time through React state. Data comes from the Missing Migrants Global subset CSV, and React’s `useMemo` optimizes rendering performance.

Loading thumbnail…

36. Multiple Views with Brushing

This visualization combines a world map and a time-series histogram to explore data on missing migrants. The map displays circles sized by the total dead and missing, with geographic features rendered using d3.geoNaturalEarth1 and d3.geoPath. The histogram below uses a brushX brush to filter the map, updating the displayed data interactively. Both views are built with React and SVG, and the data is sourced from a CSV file.

Loading thumbnail…

35. Multiple Views Cleanup

This visualization combines a geographic bubble map with a histogram, both rendered in SVG using React, to display data on migrant deaths and disappearances. The bubble map projects city locations using the D3 natural Earth projection, with circle areas scaled proportionally to the square root of the death count against a graticule and world atlas. Below it, a time histogram aggregates the same data into monthly bins along a time axis, using D3’s time scale and histogram binning functions. The topojson library provides the country boundaries from World Atlas.

Loading thumbnail…

34. Missing Migrants Multiple Views

This visualization combines a world map with a time-series bar chart to display data on missing migrants. The map uses a natural Earth projection with sized circles to show total deaths and missing persons by location, while the histogram aggregates the same metric by reported date. Built with React and D3 v5, the example employs `geoNaturalEarth1` for projection, `scaleSqrt` for circle sizing, and `bin` with `timeMonths` thresholds for the histogram. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

33. Migrants on a Map

This example visualizes events from the Missing Migrants Dataset on a world map using a Natural Earth projection. Each circle represents a single migrant incident, with its radius scaled by the square root of the total dead and missing count. The map renders SVG elements via React, using d3.geoPath for country boundaries, graticules, and sphere outlines, while d3.scaleSqrt maps data values to circle radii. The visualization loads geographic data from World Atlas TopoJSON and migrant records from a CSV file.

Loading thumbnail…

32. Missing Migrants Date Histogram

This visualization is a date histogram that aggregates the total number of dead and missing migrants per month from the Missing Migrants Dataset. The chart uses a React application with SVG rendering, employing d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis. The data is grouped into monthly bins using d3.bin, and the sum of each bin’s values is calculated with d3.sum. Rectangles represent each month, with a tooltip showing the aggregated count. The axes are rendered using custom components, and the styling uses the Poppins font with a teal color for the marks.

Loading thumbnail…

31. Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single event. The x-axis shows the reported date (time) and the y-axis displays the total number of dead and missing individuals per incident. The visualization uses React with a D3.js v5 backend, rendering SVG elements through custom components. It employs D3’s `scaleTime` and `scaleLinear` to map data coordinates, while axes and circle marks are generated using React map functions. The data is loaded asynchronously via a CSV file with D3’s `csv` function and formatted using `timeFormat`.

Loading thumbnail…

30. Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points sized by population using a square-root scale. The rendering combines country landmasses, interiors, and graticules from the World Atlas TopoJSON data, projected via `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. City coordinates are projected and plotted as SVG circles whose radii derive from the population values loaded from a Simplemaps CSV.

Loading thumbnail…

29. Points on a Map

This example visualizes a world map with points representing cities whose populations exceed 50,000. Using a natural Earth projection, it renders landmasses, graticules, and the sphere outline via `d3.geoPath`, while `d3.geoNaturalEarth1` handles the projection. City locations are plotted as SVG circles, with coordinates transformed through the projection function. The map uses a light gray land fill and teal points, with data sourced from the World Cities Database and country boundaries from World Atlas TopoJSON. The visualization is built with React, D3 v5, and TopoJSON.

Loading thumbnail…

Penguin Scatter Plot With Interactive Color Legend

A scatter plot of penguin bill length versus bill depth, colored by species using a D3 ordinal color scale. The visualization uses React for component structure and renders as SVG. An interactive color legend allows users to hover over species names to highlight corresponding data points, applying a fade effect to non-selected species. Data comes from a cleaned penguins CSV dataset loaded via d3.csv.

Loading thumbnail…

Penguin Scatter Plot

A scatter plot of the Palmer Penguins dataset, showing the relationship between bill length and bill depth for individual penguins. Each point is rendered as a circle, and hovering reveals the exact bill length. The visualization is built with React and D3 v5, using SVG for rendering. Axes are generated with `scaleLinear` and custom `AxisBottom` and `AxisLeft` components, while the data is loaded asynchronously from a CSV file using the `csv` function.

Loading thumbnail…

28 Scatter Plot With Interactive Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for individual flowers. An interactive color legend highlights data points by species, dimming non-matching points on hover and making the selected species prominent. Built with React and rendered as SVG using D3 scales and axes, the visualization uses `scaleOrdinal` for the color mapping and `scaleLinear` for the spatial coordinates. The legend handles mouse events to filter and focus the display.

Loading thumbnail…

27. Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length versus sepal width, with each point colored by species and a legend identifying the three categories. The visualization uses React components and D3 v5 scales, including `scaleLinear` for axes and `scaleOrdinal` for color mapping. SVG circles are rendered via custom `Marks`, `AxisBottom`, `AxisLeft`, and `ColorLegend` components, with data loaded asynchronously using `d3.csv`.

Loading thumbnail…

26. Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. Each point’s color encodes the species using an ordinal color scale with three distinct hues. Built with React and D3 v5, the chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for coloring, and shared axis and mark components rendered as SVG. Data loads asynchronously via `d3.csv` and includes formatted tick labels with a compact SI prefix.

Loading thumbnail…

Polished Penguin Scatter Plot with Menus

This interactive scatter plot visualizes the cleaned Palmer Penguins dataset, enabling comparison of six attributes such as bill length, flipper length, and body mass. Users select attributes for both the x- and y-axes via dropdown menus built with ReactDropdown. The visualization, rendered as SVG using React, employs D3’s `scaleLinear` for axis scaling and `extent` for domain calculation. Circles representing each penguin include a tooltip showing the x-value. The code uses the D3 `csv` module and a custom `useData` hook for data loading.

Loading thumbnail…

25. Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, enabling users to explore relationships between sepal and petal measurements. Two dropdown menus, built with ReactDropdown, let viewers select which numerical attribute maps to the x-axis and y-axis. The visualization uses React components and D3 scales, including `scaleLinear` and `extent`, to render axes and circles in SVG. Axis components generate tick marks with labels, while tooltips display exact values via SVG `<title>` elements.

Loading thumbnail…

Penguin Scatter Plot with Menus

This interactive scatter plot visualizes the Palmer Penguins dataset, allowing users to switch both the x- and y-axis attributes between bill length, bill depth, flipper length, body mass, species, and sex. Built with React and D3 v5, it renders the plot as SVG circles with tooltips, axes, and dropdown menus for dynamic attribute selection. The code uses `scaleLinear`, `extent`, and `format` from D3, with React hooks like `useState` and `useEffect` to manage state and load the CSV data via `d3.csv`.

Loading thumbnail…

24. Scatter Plot with Menus

This interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements by selecting any attribute for the X and Y axes via dropdown menus. Built with React and D3 v5, it renders an SVG with marks, axes, and axis labels, using D3’s `scaleLinear` for scaling and `extent` for domains. Data is loaded from a remote CSV, and hover tooltips display formatted values. The plot updates dynamically based on user selections.

Loading thumbnail…

23. Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet from a list of six options, with the chosen value displayed in the browser console. It shows how controlled form inputs manage state in React: the `Dropdown` component renders a `<select>` element, and the `useState` hook in the main `App` component tracks the selected value. The code uses ReactDOM to mount the application, and the dropdown’s `onChange` event triggers a state update via the passed `onSelectedValueChange` callback.

Loading thumbnail…

React starter Code

This React starter code demonstrates a minimal "Hello React" message rendered inside a web page. The HTML structure provides a root `<div>` element, while the JavaScript imports `React` and `ReactDOM` to render a simple component. The application uses `ReactDOM.render` to inject the `App` component into the designated DOM node, producing the output in the browser. It serves as a foundational template for building interactive visualizations with React, relying on the standard React 16.9.0 production libraries loaded via CDN.

Loading thumbnail…

22. Making World Map using D3 and React

This example renders a world map using D3.js and React, displaying landmasses, graticules, and country interiors in a Natural Earth projection. It uses `d3.geoNaturalEarth1()` for the projection, `d3.geoPath` to draw geographic features, and `d3.geoGraticule` for the coordinate grid. Country boundaries are styled using CSS classes, with land filled in teal and interiors outlined. The map data comes from the `world-atlas` package, which is loaded via `d3.json()` and processed with `topojson` functions `feature()` and `mesh()`. The rendering is done through SVG elements within a React component.

Loading thumbnail…

7. Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data in the browser using the Fetch API. The script defines an `async` function that retrieves text from a remote CSV file containing CSS named colors and logs the raw text to the console. It uses `fetch` and `response.text()` to obtain the data, illustrating a straightforward approach to handling tabular data without additional parsing libraries. The example focuses solely on fetching and displaying the unprocessed CSV content, rather than visualizing it.

Loading thumbnail…

6. Face Part VI using multiple files with Compartmentalizing Complexity

A grid of 18 smiley faces is rendered, each face composed of a yellow circle with a black outline, two black eyes, and a curved mouth. The faces are generated from React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which assembles them into an SVG using D3's `arc` API to create the mouth path. Eye radius varies randomly per face, while other parameters remain constant.

Loading thumbnail…

21. Stylized Line Chart

This stylized line chart visualizes weekly temperature trends for San Francisco using data from the Data Canvas Sense Your City dataset. A smooth natural curve connects time-series points across the SVG canvas, with a teal stroke and minimal axis styling. The React-based implementation leverages d3-scale for time and linear scales, d3-shape’s line generator with curveNatural, and d3.csv for data loading. Axes are custom-rendered as React components using SVG elements.

Loading thumbnail…

20. Working with Time

A scatter plot visualizes temperature readings over a one-week period in San Francisco, using time on the x-axis and temperature on the y-axis. The React-based example employs d3.scaleTime, d3.scaleLinear, and d3.extent to map data from the Data Canvas Sense Your City dataset. SVG circles represent individual measurements, with d3.timeFormat for weekday tick labels and native `<title>` elements for tooltips, demonstrating time-scale handling in D3 v5.

Loading thumbnail…

18. Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, using a horizontal layout with a teal fill and a minimal gray axis. Built with React and SVG, it leverages d3’s `scaleBand` for categorical y-axis positioning and `scaleLinear` for population magnitudes, while custom `AxisBottom` and `AxisLeft` components render ticks and labels from the `d3` API. The chart includes formatted population values (e.g., “1.44B”) via `d3.format` and tooltips provided by SVG `<title>` elements, all styled with the Poppins font.

Loading thumbnail…

19. Stylized Scatter Plot

A stylized scatter plot of the Iris Dataset visualizes petal length against sepal width for 150 flower samples. D3 v5's `scaleLinear` maps the data to screen coordinates, while React components render the SVG marks and axes. The marks are circles styled with a teal fill, and axis lines and labels use a muted gray palette. The code loads data via `d3.csv`, applies number coercion in a row function, and formats tick labels with `format('.2s')`. Tooltips display the abbreviated petal length value for each point.

Loading thumbnail…

17. Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with population on the x-axis and country names on the y-axis. The chart is rendered as an SVG using React components that leverage d3’s `scaleBand` and `scaleLinear` for axis scaling. The `AxisBottom` and `AxisLeft` components render tick marks and labels, while the `Marks` component draws the rectangles. Data is loaded asynchronously from the United Nations World Population Prospects 2019 CSV via d3’s `csv` function.

Loading thumbnail…

16. Axis with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, using SVG rendering with React and D3. It loads UN population data from a CSV file using d3.csv, then uses React hooks (useState, useEffect) to manage the data lifecycle. The chart implements custom axes: a linear x-axis with d3.scaleLinear and a band y-axis with d3.scaleBand, drawing tick marks and labels as React elements.

Loading thumbnail…

15. The Margin Convention

A bar chart displays the ten most populous countries in 2020 using UN population data loaded via `d3.csv`. React renders SVG rectangles scaled by `d3.scaleLinear` for population values and `d3.scaleBand` for country categories. The chart applies the margin convention by translating a `<g>` element with calculated inner dimensions, while the `useEffect` hook asynchronously fetches and parses the dataset.

Loading thumbnail…

14. Making a Bar chart with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using the UN Population dataset loaded as CSV. It pairs React for component rendering with D3 utilities, including `csv` for data loading, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. Each country is drawn as an SVG `rect` whose width reflects the population value, with React managing the state and lifecycle asynchronously. The chart updates once the data arrives, initially displaying a large "Loading..." text.

Loading thumbnail…

13. Visualizing data with React & D3

This example displays a colorful pie chart of CSS named colors in a React application, using SVG for rendering. It loads a CSV file from a GitHub gist with D3 utility functions, then passes the data to React's state management. The code uses D3's `csv` function for parsing and the `arc` and `pie` functions to generate the chart's paths. The resulting visualization shows each color as an equal slice, filled with its corresponding hex value.

Loading thumbnail…

12. Rendering Data with React

This example displays a horizontal stacked bar chart of CSS named colors, with each row’s height fixed and its width spanning the full 960 pixels while the background color is set to the corresponding RGB hex value. The visualization loads the CSS color dataset from a remote CSV file using D3’s `csv` utility, then React’s `useEffect` and `useState` manage the asynchronous data fetching and rendering. The React app maps over each data row to produce a styled `div` element for each color, while the initial state shows a “Loading…” message before the data arrives.

Loading thumbnail…

11. Vega-Lite API

This example demonstrates how to build an interactive scatter plot using the Vega-Lite API, visualizing automobile data from a CSV file. The plot displays fuel efficiency (mpg) on the x-axis and horsepower on the y-axis, with circles colored by country of origin, sized by horsepower, and showing tooltips with car names on hover. The code uses the `vl` API from `vega-lite-api` to construct the visualization declaratively, registers it with `vega` and `vega-lite`, and loads data via `d3.csv`. The chart fits the full window with a custom dark-themed configuration, using SVG rendering and the `vega-tooltip` handler.

Loading thumbnail…

10. Loading Data in React

This example demonstrates the process of loading external data in a React application. It fetches a CSV file containing CSS named colors from a GitHub gist and displays a summary of the dataset. The visualization shows a text-based report with the file size in kilobytes, row count, and column count. The implementation uses React's `useState` and `useEffect` hooks, with the d3 `csv` function to parse the data and `d3.csvFormat` to calculate its size.

Loading thumbnail…

9. Parsing CSV Data using D3

This example demonstrates how to load and parse CSV data using D3’s `d3.csv` method, displaying the file size, row count, and column count of the dataset. It fetches a remote CSV file containing CSS named colors and formats the results in a large `<pre>` element. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`, as well as a nested promise “pyramid of doom” pattern, showing different ways to handle asynchronous data loading with d3.v5.

Loading thumbnail…

8. Interacting with React(Mouse Follower)

A single dark circle tracks the mouse cursor across an SVG canvas. The visualization uses React’s `useState` and `useCallback` to manage the cursor’s coordinates, with an `onMouseMove` event handler updating the circle’s `cx` and `cy` attributes in real time. The circle’s radius is fixed at 30 pixels, and the SVG viewport is 960 by 500 pixels. The code initializes the mouse position to the canvas center before any interaction.

Loading thumbnail…

5. Face Part V using multiple files with ES6 modules

This example shows a smiley face built from modular React components, with a yellow circular background, two black eyes, and a curved mouth rendered as an SVG path. The code separates each facial feature into its own ES6 module, importing them into a main App component that centers everything within an SVG coordinate system. The mouth uses the `d3.arc()` generator to compute its path, while React manages the component hierarchy and props for positioning and sizing. The visualization demonstrates how D3 and React can be combined, with D3 handling geometric calculations and React structuring the UI.

Loading thumbnail…

4. Face Part IV using React Components & ES6

This visualization displays a yellow smiley face composed of a background circle, two black eyes, and a smiling mouth, all rendered as SVG elements. Built with React components and ES6 syntax, the code uses D3’s `arc` API to generate the mouth path, while ReactDOM renders the component tree into the DOM. Positions and sizes are derived from constants like `centerX`, `eyeOffsetX`, and `eyeRadius`, with a central group transform placing elements relative to the face’s center.

Loading thumbnail…

3. Face Part III using React & D3

A React and D3.js (v6) application renders a smiley face as an SVG graphic. The code imports the `arc` function from the `d3` library to construct the mouth, using `innerRadius`, `outerRadius`, `startAngle`, and `endAngle`. The face is drawn with three circles (the head and two eyes) positioned relative to computed center coordinates, and a path element applies the arc. React's `ReactDOM.render` outputs the composed `<svg>` to the DOM.

Loading thumbnail…

2. Face Part II using React

This example uses React to render a smiley face as an SVG graphic. The application calculates the circle positions for the face, eyes, and head using constants derived from the window height and a fixed width, dynamically sizing the SVG to fit the browser viewport. The code imports React and ReactDOM to define an `App` component that outputs SVG elements, including `circle` tags, with properties for center coordinates, radius, fill, and stroke. The head uses a yellow fill with a black stroke, while the eyes are solid black circles positioned symmetrically around the face’s center. The rendering is handled entirely through React’s declarative component model, with the `ReactDOM.render` method inserting the SVG into the page’s root element.

Loading thumbnail…

1. Face Part I using HTML, CSS and SVG

This example shows a simple yellow face with two black eyes drawn on a white background. The face consists of three SVG circle elements: one large circle for the head and two smaller circles for the eyes, all rendered within an HTML page. The code uses inline SVG styling with CSS properties like `fill`, `stroke`, and `stroke-width` to define the colors and outlines. The body margin is set to zero with hidden overflow to remove page spacing, while the SVG canvas has a fixed width and height of 960 by 500 pixels.