Skip to main content
Log in
V

Varun Eranki

@evarun22·15 public vizzes

Loading thumbnail…

Magnitude vs Depth

This scatterplot visualizes the relationship between earthquake magnitude and depth using data from the Significant Earthquakes from 1965 dataset. Interactive dropdown menus filter data points by magnitude ranges (e.g., 5-6, 6-7) and depth ranges (e.g., 0-250, 251-500 km). Hovering over a circle reveals a tooltip with the country, date, magnitude, and depth. Built with React and D3 v5 (using `scaleLinear` and `extent`), the visualization uses SVG circles, with axes rendered by custom components (`AxisBottom`, `AxisLeft`).

Nov 2, 2020
Loading thumbnail…

Number of Earthquakes across continents

A bar chart displays the number of significant earthquakes per year across continents, colored by continent, with a range slider below to filter the displayed years. The visualization uses the Vega-Lite API with D3.js to load and process earthquake data from a CSV file, aggregating counts per year and continent. A brush selection on the year axis enables interactive filtering, while clicking on continent legend entries highlights specific regions, with opacity adjustments indicating selection state.

Nov 2, 2020
Loading thumbnail…

Earthquakes since 1965

This world map displays significant earthquakes since 1965, using circles sized by magnitude, with tooltips showing country and magnitude. The visualization renders on an SVG canvas using React and D3 v5, employing `geoNaturalEarth1` projection with `geoPath`, `geoGraticule`, and world atlas TopoJSON for land boundaries. Earthquake data comes from a cleaned CSV of the Kaggle USGS dataset. Semi-transparent red circles encode magnitude through a square-root scale, overlaid on light blue oceans and green landmasses.

Nov 2, 2020
Loading thumbnail…

Vega-Lite API Template

This example visualizes earthquake data using a scatter plot, where the magnitude, depth, horizontal distance, year, and country of each earthquake are encoded through position, color, size, and tooltips. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite to render an SVG output. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the chart is configured with custom axis and label styling for improved readability. The code also integrates vega-tooltip for interactive hover details.

Oct 30, 2020
Loading thumbnail…

Most earthquake prone areas by depth (since 1965)

This visualization displays earthquake-prone areas worldwide since 1965, with each firebrick circle sized proportionally to earthquake depth using a square-root scale. The map uses a Natural Earth projection rendered through React and d3.geoPath, featuring land masses, country interiors, graticules, and a sphere background. Earthquake data, preprocessed from a Kaggle dataset, is loaded via d3.csv, while country boundaries come from World Atlas TopoJSON, processed with topojson’s feature and mesh functions. Circle opacity and size emphasize depth variations across regions.

Oct 14, 2020
Loading thumbnail…

Polished Scatter Plot with Menus on Indian Olympic Athletes Dataset

This interactive scatter plot explores the attributes of Indian Olympic athletes, allowing users to dynamically select which variables to plot on the X and Y axes from dropdown menus. The visualization displays each athlete as an orange circle, with axis labels updating to reflect the chosen attributes. Built with React and D3.js (v5), the code uses `scaleLinear`, `extent`, and `csv` from D3 for data processing and scaling, while custom React components render the SVG axes and marks. The dataset, sourced from Kaggle and loaded via a GitHub URL, is parsed and converted to numeric values before plotting.

Oct 3, 2020
Loading thumbnail…

Spiral Intersection Design

A spiral of intersection emerges from concentric black and white circles, with a web of white lines radiating from the center and connecting points around a circular path. The design uses D3 v5 to generate 25 points, map them into spokes, and create wheel-like connections between every ninth point. Built with SVG, the code draws these lines with a stroke width of five, layered over the static circle pattern, all rendered against a black background.

Oct 1, 2020
Loading thumbnail…

Periodex

Periodex renders an L-system-generated sequence as a radial arc diagram. It shows how power-of-two rhythmic subdivisions accumulate over 50 iterations of the Algae production rules, with each generation mapped to a concentric ring. The visualization encodes the symbol A as a black arc segment, positioned by angle and radius. It uses React for the component structure, d3.scaleBand to map string indices to angular and radial ranges, and d3.arc with corner radius for the path geometry. The SVG output is centered on a 960×960 canvas.

Oct 1, 2020
Loading thumbnail…

Tweak a Face - Varun

A stylized face rendered as an SVG drawing, built with React and displayed in a browser. The face, composed of ellipses, polygons, and polylines, includes eyes, hair, and an open mouth with teeth and a tongue, all positioned using hard-coded coordinates. The React component uses the `ReactDOM.render` method to place the `App` element into the page, with the SVG’s width and height set to the window dimensions. The code in `index.js` defines the geometry explicitly, such as the face’s center at (250, 100) and its size parameters.

Sep 18, 2020
Loading thumbnail…

Visualization of India's Olympics Participation in various events by year and season

This visualization maps Indian athletes' Olympic participation across sports and years, with each circle representing an athlete. The x-axis encodes the Olympic year, the y-axis lists the sport, circle size reflects the athlete's age, and color distinguishes between Summer and Winter Games. Hovering reveals the athlete's name. The chart is built using the Vega-Lite API on top of D3, pulling data from a CSV of Indian Olympic athletes originally sourced from Kaggle. Styling is customized via a configuration object that adjusts axis labels and fonts.

Sep 18, 2020
Loading thumbnail…

Visualization of Earthquakes since 1965 by position and magnitude

This visualization displays global earthquakes since 1965, with each event marked by a small triangle whose height encodes magnitude and color encodes country. The map uses a natural Earth projection rendered with d3.geoPath, while D3 scales control triangle geometry and color assignment. React manages the component structure, and the dataset comes from the Significant Earthquakes from 1965 Kaggle dataset. Hovering a triangle reveals a tooltip with coordinates, magnitude, and date.

Sep 18, 2020
Loading thumbnail…

Visualization of Global Video Games Sales by Year and Genre

This visualization shows global video game sales by year, with bars colored by genre to reveal sales trends across categories over time. It uses the Vega-Lite API with D3’s CSV loader to fetch data from a GitHub-hosted dataset originally sourced from Kaggle. The chart encodes years on the x-axis, global sales on the y-axis, and genre as color, with tooltips displaying genre names. Custom styling via a config object improves label and title readability, while Vega-Lite’s automatic rendering handles the bar marks and scales.

Sep 18, 2020
Loading thumbnail…

Loading data - vgsales.csv

This example loads the Video Games Sales dataset from a GitHub-hosted CSV and displays its size, row count, and column count in large text. It demonstrates two approaches to fetching and parsing data: the primary method uses `d3.csv` to load and parse the file, while an alternative commented implementation uses `fetch` with `async`/`await` and `d3.csvParse`. The page also includes a commented “pyramid of doom” example showing nested promise callbacks. All results are rendered into a `<pre>` element via `document.getElementById`.

Sep 18, 2020
Loading thumbnail…

Loading data - earthquakes.csv

This example demonstrates how to load and parse a CSV file containing significant earthquake data from 1965 onward, sourced from Kaggle. It displays the dataset’s file size in kilobytes, row count, and column count in large text. The code uses `d3.csv` to fetch and parse the remote CSV URL, then computes the formatted output length with `d3.csvFormat`. It also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`.

Sep 18, 2020
Loading thumbnail…

Loading data - Olympic_Athletes_India.csv

This example displays loading and parsing statistics for a CSV file containing Olympic performance records for Indian athletes, showing the file size in kilobytes, row count, and column count in large text. The code uses D3 v5’s `d3.csv` to fetch and parse the data from a GitHub gist, with commented alternatives demonstrating `fetch` and `async/await` with `d3.csvParse`. The dataset originates from Kaggle’s 120 years of Olympic history, filtered to Indian athletes.

Sep 18, 2020