N

Nikhil Reddy Manda

@NikhilReddyManda·38 public vizzes

Loading thumbnail…

Loading Data with Fetch, Promises, Async & Await

This example demonstrates loading external data in the browser, specifically fetching a CSV file of CSS color names and values from a GitHub gist, and then displaying the raw text output in the console. The page itself is minimal, showing only a title and a message instructing the user to open the browser’s developer console to view the retrieved data. The core functionality uses JavaScript’s native `fetch` API combined with `async`/`await` constructs and Promises to handle the asynchronous request; the code also includes a commented-out alternative using nested `.then()` calls for comparison. The styling incorporates Google Fonts’ Roboto and Poppins via CSS `@import`.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top 10 countries as horizontal bars, arranged in descending order along a categorical y-axis. The chart is rendered as an SVG in a React component, using D3 version 5’s `scaleBand` and `scaleLinear` for positioning. A tooltip, generated with an SVG `<title>` element, reveals each population value on hover. Data comes from a CSV file of UN population estimates for 2019, with numeric values formatted using D3’s `format` function.

Loading thumbnail…

Making a Choropleth Map

This choropleth map visualizes global HIV prevalence rates among adults aged 15-49 for the year 2017, using a yellow-to-red sequential color scale to encode the percentage of the population infected. The map renders country polygons via `d3.geoPath` with a `geoNaturalEarth1` projection, overlaid with graticules and interior boundaries. Missing data appears in gray. The visualization uses React for component structure, `useWorldAtlas`, `useData`, and `useCodes` hooks to load TopoJSON and CSV datasets, and `d3.scaleSequential` with `interpolateYlOrRd` to map values to colors.

Loading thumbnail…

Log Scales

This log-scale scatterplot visualizes the total number of dead and missing migrants over time, using a logarithmic y-axis to better show the wide range of values. The data comes from a CSV file, processed with D3's `csv` and `scaleLog` functions, and is rendered as SVG circles via React. The chart includes time-formatted x-axis ticks and a y-axis with automatically generated labels.

Loading thumbnail…

React Performance Optimization

This interactive visualization combines a world map and a time-series histogram to explore migration incidents. The map displays circles sized by the total number of dead and missing migrants, while the histogram shows monthly totals, with a brush tool to filter the map’s data by date range. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleTime` and `histogram` for binning, and `brushX` for interaction, with `useMemo` caching to optimize rendering.

Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a world bubble map and a time-series histogram to explore migrant deaths and disappearances. Users can brush over the date histogram to filter the map, dynamically updating the displayed circles. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, while the histogram uses `d3.bin` and `d3.brushX`. Data comes from a CSV of Missing Migrants Global records, rendered as SVG circles with `d3.scaleSqrt` sizing.

Loading thumbnail…

Multiple Views Cleanup

This visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. The map uses a natural Earth projection with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to render land, graticules, and proportional circles sized by `d3.scaleSqrt`. Below it, a date histogram bins monthly totals via `d3.histogram` and `d3.timeMonths`, with axes drawn from provided CSV data of missing migrants. The React framework manages SVG rendering, with `d3.csv` loading the dataset.

Loading thumbnail…

Multiple Views

This example combines a bubble map and a date histogram to visualize missing migrants globally. The map uses a natural Earth projection with `d3.geoNaturalEarth1` and `d3.geoPath`, where circle radii scale with the square root of death counts via `d3.scaleSqrt`. Below it, a time-series histogram aggregates monthly totals using `d3.histogram` and `d3.timeMonths`, with bars rendered as SVG rectangles. Both views share data from a CSV file, loaded via `d3.csv` in React.

Loading thumbnail…

Missing Migrants Part II: Aggregation by Month

This interactive bar chart visualizes the total number of dead and missing migrants aggregated by month over time. The chart uses D3’s scaleTime and histogram binning functions to group the data into monthly intervals, with bar heights representing the summed monthly totals. Rendered as SVG within a React application, the visualization includes tooltips on each bar that display the exact count. The data comes from a CSV file containing reported dates and death counts for migrants globally.

Loading thumbnail…

Missing Migrants Part III: On a Map

This map visualizes missing migrant incidents worldwide, with each location plotted as a translucent circle whose radius encodes the total number of dead and missing. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country borders from TopoJSON data. The data, sourced from a CSV file, is joined to geographic coordinates and scaled using `scaleSqrt`.

Loading thumbnail…

Missing Migrants

This scatterplot visualizes reported dates versus total dead and missing migrants, with each circle representing a data point and hovering to reveal the exact date. The visualization is built with React and renders as an SVG using D3 v5’s `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` functions for axes and ticks. Data is loaded via `d3.csv` from a GitHub-hosted subset of the Missing Migrants dataset, and the circles are colored teal with a Poppins font for labels.

Loading thumbnail…

Using Size

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude with area. The map renders landmasses, interiors, graticules, and the sphere via d3.geoNaturalEarth1 and d3.geoPath, while d3.scaleSqrt maps population values to circle radii up to 15 pixels. Data comes from a CSV of world cities loaded with d3.csv, and the map uses TopoJSON from world-atlas. React manages the SVG rendering, with circles styled semi-transparent teal.

Loading thumbnail…

Points on a Map

This visualization displays cities as semi-transparent points on a natural Earth projection map. The map is rendered as SVG using React, with geographic features generated via `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3. Country landmasses are drawn from TopoJSON data loaded with `feature` and `mesh`, while city coordinates come from a CSV file processed with `csv`. The points are positioned by projecting each city's longitude and latitude through the projection function.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris flower dataset, mapping petal length and sepal width on the axes while coloring each point by species. A custom color legend uses d3.scaleOrdinal to encode species categories, and hovering over a legend item highlights only the corresponding points while fading the rest. The visualization is built with React and d3.v5, rendering to SVG, with a d3.scaleLinear for axes and a d3.csv data loader.

Loading thumbnail…

Making a Color Legend

This scatterplot of the Iris dataset visualizes petal length against sepal width, with points colored by species using an ordinal color scale. An interactive color legend maps species names to colors using circles and text within an SVG canvas. Built with React and D3 (v5), the visualization uses d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and custom React components for rendering axes, marks, and the legend.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each point is colored by species using a D3 ordinal scale mapping to three distinct hues, with SVG circles rendered as marks. The React app uses D3’s scaleLinear for axes, scaleOrdinal for color, and format for tick labels, while tooltips reveal exact values on hover. The plot integrates custom axes and marks components within a single SVG canvas, demonstrating a clean, reusable React-D3 pattern.

Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot explores the Iris flower dataset, using dropdown menus to select which of four numeric measurements appears on each axis. The chart renders as an SVG with React components, where each circle represents a flower specimen. The visualization relies on `d3.scaleLinear` and `d3.extent` to map data values to pixel coordinates, while `ReactDropdown` manages user selections. Axis ticks are generated with `xScale.ticks()`, and tooltips display formatted values using `d3.format`.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to dynamically select which measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via two dropdown menus. The React application uses D3 v5 functions like `scaleLinear`, `extent`, and `csv` to fetch and scale the data, rendering SVG circles for each flower with hover tooltips. Axis components are built from D3 scales, and state management in React handles attribute changes, re-computing scales and re-rendering the marks accordingly.

Loading thumbnail…

Menus with React

A React example demonstrates building a dropdown menu using the `useState` hook to manage selected values. The app renders a list of pet options, with the initial selection set to "Rabbit". It uses the `Dropdown` component, a reusable `<select>` element that takes `options`, `id`, `selectedValue`, and `onSelectedValueChange` props. The code relies on React's `ReactDOM` for rendering and the `useState` hook for state management, with the selected value logged to the console.

Loading thumbnail…

Making a World Map with React & D3

This example shows a world map rendered as an SVG using React and D3. It displays landmasses, country borders, graticules, and a sphere outline, with data loaded from the world-atlas TopoJSON file via `d3.json`. The visualization uses `geoNaturalEarth1` for projection, `geoPath` for drawing paths, and `geoGraticule` for the grid, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries. React components manage the data-fetching hook and SVG markup, with styling applied through CSS classes.

Loading thumbnail…

Making a Line Chart

This example demonstrates how to build a line chart in React, showing temperature over time for a week in San Francisco. The chart uses D3’s scales (`scaleTime`, `scaleLinear`) and line generator (`line()` with `curveNatural`) to draw a smooth path, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG axes and the curve. Data is loaded asynchronously via `d3.csv` from a remote URL.

Loading thumbnail…

Working with Time

This visualization displays the change in temperature over the course of a week in San Francisco, using a line of circular marks along a time-series scatter plot. The React-based application uses D3 v5 utilities like `scaleTime` and `scaleLinear` to map timestamps and temperatures to SVG coordinates. Data is loaded from a CSV file via `csv`, with the x-axis formatted to show abbreviated day names using `timeFormat`. The custom SVG components (`AxisBottom`, `AxisLeft`, and `Marks`) render gridlines, axis labels, and tooltips that display the day on hover.

Loading thumbnail…

Making a Scatter Plot

This example visualizes the relationship between petal length and sepal width for iris flowers. The interactive scatter plot uses circle marks positioned by linear scales, with axes and labels created through reusable React components. The code loads the Iris dataset from a CSV file and renders it as an SVG. D3's `scaleLinear`, `extent`, and `format` utilities handle the data transformations and tick formatting, while React manages the component structure and state.

Loading thumbnail…

Refactoring a Bar Chart

This example shows a horizontal bar chart ranking the populations of the top 10 countries from a UN population dataset, loaded via `d3.csv` and rendered with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements for the bars. Axis labels and ticks are generated by custom React components that map over the scales’ domain and tick values.

Loading thumbnail…

Margins and Axes

This visualization displays the 2020 populations of ten countries as horizontal bars, with a left-side y-axis listing country names and a bottom x-axis providing population tick marks and gridlines. Built with React and rendered as an SVG, the chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and `max` to set the axis domain. Data loads from a CSV hosted on GitHub via D3's `csv` method, and the axes are manually constructed by mapping over tick values and domain elements to draw lines and text labels.

Loading thumbnail…

Making a Bar Chart with React & D3

This example demonstrates a bar chart that displays the top ten countries by population for the year 2020, sourced from a CSV file by Curran. The visualization is built using React for component structure and D3.js for scaling and rendering, with the chart drawn as SVG rectangles. The code uses D3's `csv` parser to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis.

Loading thumbnail…

Visualizing Data with React & D3

A full-screen color wheel displays every named CSS color as a single pie slice, with each path filled by its corresponding hexadecimal value from an MDN dataset loaded via `d3.csv`. Built with React hooks (`useState`, `useEffect`) and D3 v5, the visualization uses `d3.pie()` to compute angles and `d3.arc()` for the radial geometry. All slices share equal values, so the wheel’s proportions directly reflect the dataset’s composition. The SVG renders seamlessly within React’s declarative component structure.

Loading thumbnail…

Parsing CSV Data with D3

This example demonstrates how to load and parse a remote CSV file using D3’s `d3.csv` method, then reports basic dataset statistics in a large `<pre>` element. The fetched data, sourced from a GitHub gist containing CSS color names and values, is processed to display the formatted data size in kilobytes, the total row count, and the number of columns. The implementation uses the `d3.csvFormat` function to calculate the data’s string length and relies on the promise-based `d3.csv` API.

Loading thumbnail…

Loading Data in React

This example demonstrates how to load CSV data in a React application using D3’s `csv` method within a `useEffect` hook, storing the result in state via `useState`. It displays a text summary of the dataset, showing file size in kilobytes, row count, and column count from the CSS color table hosted on GitHub. The code uses React 16.9, D3 v5, and the `d3.csvFormat` API to compute the statistics.

Loading thumbnail…

Iterating Fast with Vega Lite API

This example demonstrates an interactive scatterplot of the classic auto-mpg dataset, plotting horsepower against miles per gallon, with color encoding by origin and size by weight. The visualization is built using the Vega-Lite API, a JavaScript wrapper that constructs Vega-Lite specifications programmatically. The code registers the API with vega and vega-lite, configures a custom tooltip via vega-tooltip’s Handler, and loads the CSV data using d3.csv. The plot renders directly into the document body, sized to the browser window, with stylistic adjustments for axis labels and overall readability.

Loading thumbnail…

Interaction With React

A React application renders an SVG circle that follows the mouse cursor across a 960 by 500 canvas. The component tracks pointer movement via the `onMouseMove` event and updates its state with the current client coordinates. React 16.9 manages the circle's position through the `useState` and `useCallback` hooks, re-rendering the SVG element as the pointer moves. The example demonstrates state-driven interactivity without a data source, relying solely on user input to drive the visualization.

Loading thumbnail…

Let's Make a Face Part IV (React Components & ES6)

This example shows a yellow smiley face built from SVG primitives—a background circle, two eye circles, and a mouth arc—centered on a 960-by-500 canvas. The face is composed entirely of React components, with the `BackgroundCircle` defined as a reusable component and the `App` component rendering the full SVG. The mouth’s crescent shape is generated using D3’s `arc` generator, which supplies the `d` path data. The code imports React, ReactDOM, and D3’s `arc`, and renders the result into a `#root` div, demonstrating how to combine React’s component model with D3’s geometric utilities for declarative, ES6-based visualization.

Loading thumbnail…

Let's Make a Face Part VI (Compartmentalizing Complexity)

The example renders a grid of eighteen cartoon faces, each assembled from reusable React components for the background circle, eyes, and mouth. A semiring of D3’s arc generator forms the mouth, while random values for eye offset, radius, and stroke width vary each face’s expression. The composition is drawn as SVG within a transformed group, demonstrating how compartmentalizing visual elements into modular components simplifies complex, repetitive data-driven graphics.

Loading thumbnail…

Let's Make a Face Part V multiple files with ES6 modules

This gallery example shows a stylized cartoon face rendered as SVG, composed of three separate React components for the background circle, eyes, and mouth. The face is centered on a 960x500 canvas, with the yellow circular head outlined in black and positioned using a translate transform. The code uses React 16.9 and ES6 modules to import each facial feature as a component. The mouth is drawn using a D3 arc generator with specified inner and outer radii and angle ranges, while the eyes are simple positioned circles.

Loading thumbnail…

Assignment: Tweak The Face!

A simple, animated face rendered in SVG. The face consists of a yellow circle with black outlines, two white eyes with pupils, and a mouth drawn as a half-circle arc. The left pupil is positioned statically, while the right pupil animates horizontally across the eye using a D3 v5 `transition` and `duration`. The code constructs each shape with D3 selections and attributes, using the `arc` generator for the mouth.

Loading thumbnail…

Let's Make a Face Part III (React & D3)

This interactive SVG depicts a cheerful yellow face composed of simple geometric shapes: a large circle for the head, two smaller circles for eyes, and an arc for the mouth. Built with React and D3 v6, the code leverages ReactDOM to render the SVG and D3’s `arc` API to generate the mouth path with specified inner and outer radii and angle ranges. All coordinates are computed relative to the center, making the face’s layout responsive to the 960x500 viewport.

Loading thumbnail…

Let's Make a Face Part II (React)

A yellow face rendered with SVG circles, drawn using computed dimensions from the browser viewport. It displays a head, two eyes, and a mouth, all positioned relative to the center of the window. The visualization uses React 16.9, ReactDOM, and JSX to declaratively define the SVG elements. The face is built from a yellow circle with a black stroke, plus smaller circles for the eyes, with the mouth radius defined but not rendered in the current code.

Loading thumbnail…

Let's Make a Face Part I (HTML, CSS, SVG)

A simple line-drawing exercise builds a face from three SVG circles: a yellow head with a black outline and two smaller black eyes. The example demonstrates basic SVG geometry and styling using hard-coded coordinates and attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The HTML file references an external CSS file that resets the page margin and hides overflow. A linked YouTube video provides a tutorial for recreating the face, while the code itself uses only native SVG elements without any JavaScript libraries.