Skip to main content
Log in
M

manasishrotri

@manasishrotri·26 public vizzes

Loading thumbnail…

Bar graph of covid deaths

A bar chart displays COVID-19 deaths across selected countries for each day of May, with a slider to change the date. It uses D3 v5 scales (`scaleBand`, `scaleLinear`) with React for rendering SVG rectangles. Data comes from a CSV of COVID-19 statistics, filtered by location and day. The chart sorts countries by death count and uses native SVG `<title>` elements for hover tooltips.

Nov 3, 2020
Loading thumbnail…

Bar graph of covid deaths

This bar chart tracks daily COVID-19 deaths across ten countries throughout May 2020. A slider allows viewers to select a specific day of the month, updating the bar lengths to show new deaths reported that day. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear`, rendering SVG rectangles via the `Marks` component. Data comes from the COVID May Dataset, filtered by country and month day, with hover tooltips displaying country names and death counts.

Nov 3, 2020
Loading thumbnail…

Box Plot

This box plot visualizes the distribution of daily new COVID-19 cases across countries, showing minimum, quartiles, and maximum values. The chart uses React to render SVG elements with d3.scaleBand and d3.scaleLinear for axes, while d3.nest() and d3.quantile compute the statistical summaries from the CSV data. The code manually draws each box, median line, and whisker using React components, with d3.csv loading the source data.

Nov 3, 2020
Loading thumbnail…

Bar graph of covid deaths

A horizontal bar chart visualizes COVID-19’s new deaths on May 31 for ten selected countries, using a green fill for each bar and sorting the locations by death count. The visualization is built with React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, with SVG rendering. Tooltips, created via the `<title>` element, display the country name and total cases, while the data is sourced from the COVID MAY Dataset on GitHub.

Nov 3, 2020
Loading thumbnail…

Total covid cases on 31st May

A world map shows total COVID-19 cases on May 31, 2020, for ten selected countries. Red circles sized with a square-root scale (`d3.scaleSqrt`) represent case counts, while `d3.geoNaturalEarth1` and `d3.geoPath` render the sphere, graticules, landmasses, and country borders. Data from a CSV file is filtered by month and date, then merged with coordinates. The visualization is built with React, D3 v5, and TopoJSON, rendering marks as SVG circles with hover titles showing country names and totals.

Nov 2, 2020
Loading thumbnail…

Covid cases with interaction with country

A line chart displays new daily COVID-19 cases for ten countries from a CSV dataset, with each country’s trend as a colored curve. Hovering over a country name in the legend highlights that specific line and fades the others, implemented via React state and `onMouseEnter` handlers. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`), the `d3.line` generator with `curveNatural`, and custom React components for axes and the interactive legend, rendering to SVG.

Oct 29, 2020
Loading thumbnail…

Covid cases with menu to select country

A multi-line chart shows COVID-19 new cases over time for ten countries, revealed through an interactive menu that allows users to select a country of interest. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, while the `d3.line` and `curveNatural` functions draw smooth paths for each nation’s data. The SVG rendering includes custom axis components and a color legend, with data sourced from the COVID MAY Dataset on GitHub.

Oct 28, 2020
Loading thumbnail…

Scatter Plot for Covid data with Menus

This interactive bar chart displays total COVID-19 cases across ten countries for May 31st, using a vertical scale with country names and a horizontal linear scale for case counts. Built with React and D3 v5, the visualization renders SVG rectangles whose widths encode case numbers, with tooltips revealing exact values. Data comes from a CSV dataset loaded via D3's `csv` function, and the chart filters rows in `useData.js` to include only specified countries while sorting by location.

Oct 28, 2020
Loading thumbnail…

Box Plot

This box plot visualizes the distribution of sepal length across three iris species: setosa, versicolor, and virginica. Each box displays the quartiles and median, with whiskers extending to the minimum and maximum values, using data from a CSV file loaded via the d3.csv function. The visualization is built with React and rendered as SVG, using d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. Statistical summaries are computed on the fly using d3.nest, d3.quantile, and d3.rollup, with separate React components handling the boxes, median lines, whiskers, and axes.

Oct 14, 2020
Loading thumbnail…

Scatter Plot for Covid data with Menus

A React-based scatter plot visualizes COVID-19 metrics from a May 2020 dataset, with dropdown menus controlling which two attributes (e.g., new cases, total deaths) map to the x- and y-axes. Points are colored by continent using a d3.scaleOrdinal color scale and a custom color legend. Built with d3.v5 for scales, axes, and SVG rendering, the chart uses React hooks (useState, useEffect) to manage state and load data via d3.csv, with interactive axes formatted using d3.format.

Oct 12, 2020
Loading thumbnail…

Covid cases with menu to select country

This interactive visualization displays COVID-19 case data for selected countries, allowing users to filter by country and case metric (new, total, smoothed cases/deaths). Built with React and D3 v5, it renders a line chart using SVG paths with the `d3.line` and `curveNatural` functions. Menus are implemented via `react-dropdown`. The data comes from the COVID MAY Dataset and updates the chart based on user selections, with axes generated by custom components.

Oct 7, 2020
Loading thumbnail…

Data with React and D3

This example shows how to load and summarize COVID-19 case data from a CSV file using React and D3. The code fetches a May 2020 dataset from a GitHub gist via the `d3.csv` method, then displays basic metadata about the file, including its size in kilobytes, number of rows, and number of columns. The React app manages the loading state with the `useState` and `useEffect` hooks, rendering a loading message until the data arrives and then presenting the computed statistics. The visualization relies on `d3.csvFormat` to calculate the data size and ReactDOM to mount the component.

Oct 6, 2020
Loading thumbnail…

Clock with React & D3

This example shows an analog clock face with twelve, three, six, and nine labeled, rendered as SVG elements within a React component. Three rotating rectangular hands indicate hours, minutes, and seconds, using D3’s `rect` and React’s JSX syntax. The clock uses native SVG `<animateTransform>` elements to rotate each hand continuously, with durations of 60, 3600, and 216000 seconds, while D3 v5 and React 16 manage the rendering and structure.

Sep 30, 2020
Loading thumbnail…

React Starter

This example demonstrates how to integrate React with D3 to render animated SVG rectangles. The React component `App` defines an SVG canvas with a group element containing multiple blue rectangular bars positioned at varying x and y coordinates. An SVG `<animateTransform>` element animates the group by translating it vertically from 0 to 500 pixels over a one-second loop. The code imports `React`, `ReactDOM`, and the `rect` function from D3, though only the SVG rendering is used, without data binding.

Sep 29, 2020
Loading thumbnail…

Covid countrywise total cases on 1st May vs 31 st May

This visualization compares COVID-19 total cases across countries on May 1st against May 31st, 2020, using two horizontal bar charts stacked vertically. It highlights which nations had high case counts at the month’s start and end, filtering to countries with over 20,000 cases. The charts are built with the Vega-Lite API, which compiles specifications to Vega, and data is loaded from a CSV file hosted on GitHub using d3.csv. The code uses vl.vconcat to align the two plots and vl.markBar for the bars, with x- and y-encodings sorting by case count.

Sep 23, 2020
Loading thumbnail…

US Senate Data: Which political party is more popular? State vs Vote count aggregated from year 1976-2018

This bar chart compares the popularity of U.S. political parties by state, aggregating vote counts from 1976–2018 Senate elections. Each bar represents a state, with its length encoding total votes and its color encoding the party category, allowing a direct visual comparison of party support across states. The visualization uses the Vega-Lite API with d3 for data loading from a Harvard Dataverse CSV source, and configures the visual appearance through a custom config object.

Sep 22, 2020
Loading thumbnail…

Covid May 2020: Date Vs New Cases countrywise

This visualization tracks daily new COVID-19 cases per country during May 2020, with each country rendered as a colored line over time. The data comes from a Kaggle-hosted CSV and is loaded using `d3.csv` via the `getData` function. The chart is built with the Vega-Lite API, calling `vl.markLine()` with temporal x-axis and quantitative y-axis encodings, while country names drive the color channel. Tooltips display exact case counts and locations. The visualization uses vega-lite-api’s `register` method with vega and vega-lite, and renders as an SVG fitted to the viewport.

Sep 21, 2020
Loading thumbnail…

Bank Campaign Data: Who said yes? Age vs job

This visualization uses a scatterplot to show which bank campaign respondents said "yes," mapping age against job title, with point size indicating education level and color representing the campaign outcome. The data comes from the UCI Machine Learning Bank Campaign dataset, fetched via `d3.csv`. Built with Vega-Lite API, the chart encodes age and job as positional fields, color by the categorical response variable, and size by education, with a category20 color scheme and custom axis styling for readability.

Sep 21, 2020
Loading thumbnail…

COVID MAY2020 Data

This example displays basic statistics about a COVID-19 dataset from May 2020, showing the file size in kilobytes, row count, and column count in large text. It loads the CSV data using `d3.csv`, then reports the total character size via `d3.csvFormat` and the parsed array’s length and column names. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`, highlighting different ways to load and parse CSV data. The dataset originates from a gist URL containing worldwide COVID case numbers.

Sep 21, 2020
Loading thumbnail…

Senate Voting Data

This example presents a text-based summary of the Senate Voting Data CSV file. It uses D3 v5 to load and parse the remote CSV via `d3.csv`, then displays the file size in kilobytes, the total row count, and the column count inside an HTML `<pre>` element. The code also demonstrates alternative loading methods—using `fetch` with async/await and `d3.csvParse`, plus a commented-out "pyramid of doom" fetch chain—though only the primary `d3.csv` path is active. The visualization is purely informational, showing dataset dimensions rather than graphical plots.

Sep 21, 2020
Loading thumbnail…

Bank Campaign Data

This example loads a CSV file of bank campaign data and displays a minimal text summary of its contents, including file size, row count, and column count. The visualization uses D3 v5’s `d3.csv` method to fetch and parse the remote dataset, then computes the formatted size with `d3.csvFormat`. It also demonstrates an alternative approach using the Fetch API and async/await with `d3.csvParse`, though the commented-out code is not executed. The output is rendered as plain text in a large `<pre>` element.

Sep 21, 2020
Loading thumbnail…

Frog Face by Manasi

A friendly cartoon frog face fills the browser window, built entirely from layered SVG ellipses and circles rendered with React elements. The code uses ReactDOM to mount an `<svg>` that scales to the viewport, with all facial features positioned relative to the center. Green shapes form the head and eye bumps, white and black circles create the eyes, firebrick and green ellipses compose the mouth, and black ellipses serve as nostrils. The implementation relies on JSX and React's rendering API, with no external visualization libraries.

Sep 1, 2020
Loading thumbnail…

Smiley Face Part II

A smiling face is rendered as a yellow circle with two black eyes, centered in the browser window and scaled to the viewport dimensions. Using React and ReactDOM, the SVG is constructed declaratively with circle elements whose positions and sizes are calculated from the window width and height. The code defines constants for eye offset, eye radius, and mouth width, though it only renders the face and eyes, omitting an explicit mouth shape.

Sep 1, 2020
Loading thumbnail…

Frog Face Part I

A whimsical SVG of a frog face uses concentric green, white, and black circles to build the head and eyes. The code draws overlapping circles with varying radii and fill colors on a fixed 960 by 500 canvas, layering shapes to create the final character. This pure SVG example relies on direct element attributes rather than a JavaScript library.

Sep 1, 2020
Loading thumbnail…

Let's Make a Face Part I

This half-finished smiley face uses raw SVG circles to build the start of a face: a large green head, two ear-sized green circles, and two dark eye centers, all with thick black strokes. The code defines the face parts explicitly with hard-coded `cx`, `cy`, `r`, `fill`, and `stroke` attributes on `<circle>` elements, leaving the mouth and other details out. A minimal HTML page with inline CSS hides any overflow, while the SVG canvas is set to 960 by 500 pixels.

Sep 1, 2020
Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible web-based visualization using plain HTML and JavaScript. It displays a centered "Hello HTML" heading with large text, styled through inline CSS. The page also includes a JavaScript console log statement that prints "Hello JavaScript!" to the browser’s developer tools. The code uses no external libraries or frameworks, relying solely on the native Document Object Model (DOM) and standard browser APIs. The example serves as a minimal starting point for building more complex visualizations.

Sep 1, 2020