Vamsi Bhargav Sukamanchi

@VamsiSukamanchi·12 public vizzes

Total sales by a publisher every year

A bar chart displays total global videogame sales per year, filtered by selected publishers from the dataset. Users can select one or multiple publishers via a React dropdown menu, and the chart updates to show aggregated sales for those selections. The visualization uses Vega-Lite API with d3.csv to load the videogames sales dataset and renders the chart as SVG. React manages the interactive state, while Vega-Lite's transform for grouping by year and summing global sales powers the aggregation.

Nov 8, 2020

Loading thumbnail…

Genre v/s Regional and Global sales

Using D3's `csv` loader to ingest a video game sales dataset, this visualization plots aggregated sales figures by genre as a bubble plot. The chart encodes total global sales on the x-axis, genre categories on the y-axis, and uses bubble size to represent Japan sales while color encodes European Union sales, all configured through the vega-lite API. The data is first grouped and summed via `vl.groupby` and `vl.sum` transformations, then rendered as circles with tooltips showing the Japan sales total.

Nov 8, 2020

Loading thumbnail…

Interactive Color Legend for game publishers

A scatter plot maps global video game sales against release year, with each point colored by publisher. An interactive color legend on the right highlights a selected publisher by dimming all other points, while the legend itself fades in sync. Built with React and D3 v5, it uses SVG circles for marks, `scaleOrdinal` for color mapping, and a custom `ColorLegend` component with mouse events to toggle the hover state. Data comes from a CSV of videogame sales loaded via `d3.csv`.

Nov 8, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays movie ratings and attributes from a Movies Dataset, allowing users to explore relationships between continuous variables. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, with the chart updating dynamically. The visualization uses React for state management and rendering, D3 v5 scaleLinear for axis scaling, and ReactDropdown for the menu controls. Data loads asynchronously via d3.csv, and circles render in SVG with built-in tooltips showing tick-formatted values on hover.

Oct 28, 2020

Loading thumbnail…

Pointer

A red circle follows the mouse cursor across an SVG canvas, with its position updating in real time via React state. The `App` component listens for `onMouseMove` events on the SVG element, using `useState` to store the pointer coordinates and `useCallback` to handle the event efficiently. The circle is rendered with `cx` and `cy` attributes derived from the cursor's `clientX` and `clientY` values, creating a direct, responsive interaction between the pointer and the visual element.

Oct 7, 2020

Loading thumbnail…

New Voters (Voters v/s State with Month)

This visualization displays the number of newly registered voters across U.S. states, broken down by month. Each bar represents a state’s total new voters, with color encoding denoting the month. The data is loaded from a CSV via d3.csv and rendered using Vega-Lite API (vl.markBar). The chart uses quantitative and nominal fields for bars and tooltips, with axes configured for readability. Custom config adjusts label and title styling, while the visualization autosizes to fit the browser window.

Sep 24, 2020

Loading thumbnail…

Movie Streaming (Rating v/s Year released)

A scatterplot displays the release year of movies on streaming platforms against their IMDb ratings, with the opacity revealing density. Most points cluster after 2000, showing increasing movie releases over time. The visualization uses Vega-Lite API with d3.csv to load the Movie.csv dataset, encoding year on the x-axis and IMDb score on the y-axis, with tooltips revealing movie titles.

Sep 24, 2020

Loading thumbnail…

Videogame sales (Platform v/s Global Sales)

This visualization displays global videogame sales across different platforms, using data from a CSV file listing games with sales over 100,000 copies. Each circle represents a game, positioned by its global sales on the x-axis and platform on the y-axis, with semi-transparent marks to reveal overlapping points. The chart is built with Vega-Lite API, which is registered with Vega and d3, and includes tooltips showing game names. The code applies a custom config and loads data asynchronously via d3.csv, rendering the result as an SVG fitted to the viewport.

Sep 24, 2020

Loading thumbnail…

Availability of movies on streaming platforms

This example loads a CSV dataset of movies and their availability across Netflix, Prime Video, Hulu, and Disney+, then displays a summary of the file’s size, row count, and column count in large text. It uses `d3.csv` to fetch and parse the data, and `d3.csvFormat` to measure the raw file size in kilobytes. The visualization is purely textual, showing only dataset metadata rather than any chart or graph. The code includes commented alternatives using `fetch` and `d3.csvParse` to demonstrate different loading approaches.

Sep 24, 2020

Loading thumbnail…

Videogame sales

This example presents a minimal summary of the Videogame Sales dataset, displaying its size in kilobytes, row count, and column count as large text. It uses D3 v5 to load the remote CSV file via `d3.csv`, converts the data with `d3.csvFormat`, and reports the byte length before updating the page content. The visualization focuses on data loading and parsing rather than graphical representation, showcasing D3’s CSV utilities.

Sep 24, 2020

Loading thumbnail…

Newly registered voters

This example showcases the size of a newly registered voters dataset from a gist, with the display showing the file size in kilobytes, the row count, and the column count of the loaded CSV. The visualization uses the d3.csv function from the D3 library version 5 to fetch and asynchronously parse the remote CSV file, then employs the d3.csvFormat function to compute the data's byte length. The resulting metadata is rendered as large monospace text on a plain HTML page.

Sep 24, 2020

Loading thumbnail…

Smiley Face Part II

This example shows a large, distorted smiley face constructed from layered circles and ellipses. The face includes two eyes with multiple colored rings, a small nose, and a wide mouth, all rendered in a full-window SVG. Built with React and ReactDOM, the visualization uses JSX to define SVG shapes, while JavaScript variables dynamically set dimensions, positions, and styling attributes like stroke width and fill colors. The code hardcodes all shape coordinates, sizes, and colors, with no data source or user interaction.

Sep 2, 2020