Skip to main content
Log in
P

Parth Shroff

@parth-1023·22 public vizzes

Loading thumbnail…

Line Chart Visualization for Each Match

This interactive visualization displays line charts for cricket matches, showing runs scored per over across each match in a selected city. Users choose a city and match details from dropdown menus, and the chart updates accordingly with scaled axes and a gray background. The code uses D3’s `select`, `line`, and `scaleLinear` APIs to generate the lines and axes, with data from an imported dataset. Axis labels are added via the `@curran/axis-labels` library, and the visualization dynamically filters and redraws the chart based on user selections.

Dec 12, 2024
Loading thumbnail…

Final version - Globe

This interactive globe visualization displays cricket match data for cities worldwide, with each city marked by a circle. Users can pan and zoom the SVG-based globe, which uses the D3.js `geoOrthographic` projection. The visualization plots match details, including teams and winning information, into an interactive tooltip when a city is hovered. It leverages `d3.geoPath` for geographic shapes and displays data from a CSV file containing specific match statistics.

Dec 12, 2024
Loading thumbnail…

Fork of Final version - Globe

This interactive globe displays cities with populations over 100,000 as circles, using pan and zoom to explore geographic distribution. Hovering over a point reveals a tooltip table listing cricket match details from the linked dataset, including teams and winning outcomes. Built with D3.js, it uses `d3.geoOrthographic` projection and `d3.geoPath` for landmasses, with city coordinates plotted from GeoNames data. The visualization incorporates SVG rendering and custom tooltip positioning to handle viewport constraints.

Dec 12, 2024
Loading thumbnail…

final_data

This example previews the first row of a cleaned and geocoded World Cup cricket dataset. It displays the data as a formatted JSON object within an HTML `<pre>` tag, showing fields such as the city, its coordinates, the two competing teams, the over number, runs scored in that over, the winning details, and the full match description. The visualization uses the JavaScript `index.js` file to import the `merged_data.csv` file, convert string values for over number, runs, and coordinates to numeric types, and then render the entire record. This approach provides a static, text-based view of the raw data structure and its content.

Dec 10, 2024
Loading thumbnail…

Simple Scatter Plot

This simple scatter plot visualizes the Penguins Dataset, mapping distance on the x-axis and radius on the y-axis. Built with D3, it uses `scaleLinear` for axes, `xAxis` and `yAxis` for ticks, and custom axis label helpers. The plot draws gray circles with fixed radius and opacity, over a light gray inner rectangle, within margins defined by `marginTop`, `marginBottom`, `marginLeft`, and `marginRight`. Data comes from a referenced external dataset, and the code is structured for easy modification to display new data.

Dec 10, 2024
Loading thumbnail…

star dataset

This example visualizes the first row of the Stars Dataset from Kaggle, showing parsed values for attributes like Distance_ly, Luminosity, Radius, and Temperature_K. The code loads CSV data, coerces numeric fields with unary plus operators, and displays a single record as formatted JSON in a pre element. It uses plain JavaScript with inline template literals to set the container’s innerHTML, and exports the parsed data array for further use in a visualization gallery context.

Dec 10, 2024
Loading thumbnail…

Pseudo-Visualization

This example shows a pseudo-visualization: a hand-crafted line chart plotting runs versus overs for two cricket data series, rendered with hard-coded coordinates rather than a scale or data transformation. Red and blue polygonal lines represent the two datasets, drawn over a light gray plot area with black axes and axis labels. The code uses D3.js APIs including `d3.line` and selections like `selectAll(...).join(...)` to create SVG path elements, with styling applied via `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin`. It also imports and uses `xAxisLabel` and `yAxisLabel` from `@curran/axis-labels` to annotate the chart.

Dec 10, 2024
Loading thumbnail…

Fork of Fork of v1

This interactive globe visualizes cricket World Cup match data, with circles positioned at city locations and colored to represent teams. The orthographic projection supports pan and zoom navigation. The visualization uses `d3.geoOrthographic` and `d3.geoPath` to render world geography from TopoJSON data, while city coordinates from the merged CSV file are projected onto the globe. Tooltips display match details and winning information.

Dec 7, 2024
Loading thumbnail…

Fork of v1

This interactive visualization presents a rotatable and zoomable globe displaying cricket World Cup match data across cities. Each location is marked with a steelblue circle, and hovering over a point reveals a tooltip with the winning team and match details. Built with D3.js, the visualization uses `d3.geoOrthographic` for the projection and `geoPath` to render world map outlines from TopoJSON data. City coordinates come from a local CSV file containing match statistics, with drag and zoom interactions controlled through D3's drag and zoom behaviors.

Dec 7, 2024
Loading thumbnail…

final_data

This example visualizes over-by-over scoring data from the ICC Cricket World Cup, showing individual over performance with runs scored and wicket outcomes. It focuses on a single match, presenting the sequential progression of runs and wickets as the innings unfold. The visualization uses a simple text-based display, rendering the first data record as formatted JSON within an HTML `<pre>` element, with a font size of 36 pixels. The code imports the dataset from `merged_data.csv` and parses numerical fields such as `RunsScoredinover` and `OverNumber` using JavaScript’s unary plus operator.

Dec 4, 2024
Loading thumbnail…

Second Iteration of project

This interactive globe visualization displays geographic data points overlaid on a world map, allowing users to pan and zoom through drag and scroll interactions. Built with D3.js, it uses a geoOrthographic projection to render country boundaries from TopoJSON data and circles for coordinates, with a visibility tester streaming projection checks to display only points on the visible hemisphere. The code leverages D3’s drag and zoom behaviors to update rotation and scale state, enabling smooth navigation. The underlying dataset is dummy data with latitude and longitude columns, rendered as red circles for each unique coordinate pair.

Nov 23, 2024
Loading thumbnail…

world cup score

This visualization displays the first row of the World Cup Score dataset, showing match details such as teams, scores, wickets, and over-by-over run data. It highlights the relationship between the batting team, bowling team, and match outcome, with fields like TotalScoreforTeam1 and TotalWicketforTeam2 visible. The data is parsed from a CSV file using a custom loader and rendered as formatted JSON text via the `main` export, which sets the container’s inner HTML with a `<pre>` element. The code uses standard JavaScript array methods for type conversion and relies on the fetched dataset structure directly.

Nov 22, 2024
Loading thumbnail…

World cup score with coordinates

This example displays the first record from a CSV of ICC Cricket World Cup match data (2007–2023), showing over-by-over scoring details with geographic coordinates for the host cities. The visualization parses the CSV using a bundled data import and converts string values to numbers. It renders the JSON representation of the first data row into a preformatted text block, using the container’s innerHTML property. The code relies on the imported dataset and plain JavaScript string interpolation rather than any visualization library, making it a minimal structural preview of the raw data structure.

Nov 1, 2024
Loading thumbnail…

Second iteration of final project

This interactive globe visualization displays cities with populations over 100,000 as circles sized by population, projected onto an orthographic globe that supports panning, zooming, and rotation. Using d3.geoPath with d3.geoOrthographic, it renders country boundaries from the world-110m and world-50m TopoJSON datasets, switching to lower-resolution shapes during drag interactions for performance. City data originates from preprocessed Geonames data, with tooltips provided via d3-tip and interaction handled through d3.drag and d3.zoom.

Oct 29, 2024
Loading thumbnail…

Fist Iteration of final project

This interactive globe visualization displays geopolitical boundaries and stadium locations using an orthographic projection. Users can pan by dragging and zoom by scrolling, with d3-geo and d3-zoom handling the interaction and projection math. The map renders TopoJSON country outlines via d3.geoPath, while a custom visibility tester from d3-geo ensures point markers only appear on the visible hemisphere. Red circles mark stadium coordinates filtered through the projection’s stream interface, demonstrating how to handle off-screen geographic points in a rotating globe context.

Oct 25, 2024
Loading thumbnail…

Fork of Fist Iteration of final project

This interactive globe visualizes the locations of submarine cables and stadiums using an orthographic projection. Users can drag to rotate the globe and scroll to zoom, with the projection updating in real time based on the current rotation and scale. The visualization is built with d3-geoOrthographic, d3-geoPath, and d3-geoGraticule, and fetches world country data from the visionscarto-world-atlas package. The underlying cable data originates from TeleGeography's Submarine Cable Map, though the dataset is noted as not up to date.

Oct 23, 2024
Loading thumbnail…

Fork of Simple World Map

This example shows an interactive world map that loads geographic data and renders country boundaries, graticules, and an outline using an equirectangular projection. It fetches TopoJSON data from the `visionscarto-world-atlas` package and converts it to GeoJSON features with `topojson.feature`. The visualization uses React state management to handle data loading and rendering, while D3’s `geoPath`, `geoEquirectangular`, and `geoGraticule` APIs draw the map elements as SVG paths.

Oct 18, 2024
Loading thumbnail…

Pseudo Visualization

This example demonstrates fundamental D3 visualization concepts by encoding a simple array of five values through multiple mark types and channels. The visualization presents the same data points as circles varied by x-position, y-position, and size, as bars with varying length, and as distinct SVG path symbols, with one view using a red hue. The implementation uses D3's `select`, `join`, and `.each()` methods, along with SVG attributes like `transform` and `fill`, and the `d3.symbol()` function to generate shapes.

Sep 26, 2024
Loading thumbnail…

Horse survival data

This example visualizes the Horse Survival Dataset, exploring relationships between clinical measurements such as packed cell volume, total protein, pulse, and respiratory rate. The visualization highlights how lesion types correlate with blood values and assesses the importance of hospital number in the dataset. Using a table-like rendering, the code displays the first data row in JSON format with a customizable font size, while parsing all CSV values into numeric types. The implementation relies on a custom CSV import and displays the structured data through a simple HTML `<pre>` element.

Sep 12, 2024
Loading thumbnail…

Fork of Solar System

This animated visualization displays six stars—Earth, Mira, Antares, Betelgeuse, Rigel, and Deneb—with their relative sizes scaled proportionally while distances are normalized for visibility. Each star is rendered as a circle with a distinct fill color, and labels fade in sequentially above each body. The code uses D3’s `select`, `transition`, and `easeLinear` APIs to animate circle radii and positions, with data sourced from a Kaggle dataset of star properties. The animation runs on an SVG canvas with a black background, smoothly expanding each circle and fading in its name.

Sep 12, 2024
Loading thumbnail…

Horse Survival Dataset

This example demonstrates the "Hello World" starting point for the VizHub V3 Runtime Environment. It renders a centered text string whose font size is controlled by an interactive widget that supports hot reloading, allowing the number to be adjusted via Alt-drag. The code defines a `main` function that takes a `container` DIV element and sets its `innerHTML`. The concrete API highlighted is the exported `main` function and the use of `container.innerHTML`.

Sep 5, 2024
Loading thumbnail…

Fork of Circles with D3

This visualization displays a collection of colorful circles arranged on a light green background, creating a playful, abstract composition reminiscent of a field of confetti. Using D3.js v3, the code creates an SVG canvas sized to its container, then applies data-driven attributes to render each circle with specific x, y coordinates, radius, and fill colors, including various shades of orange and yellow. The `select`, `selectAll`, `data`, and `join` methods manage SVG element creation, while opacity is uniformly set to 0.708 across all circles, giving the overall image a slightly translucent, layered appearance.

Aug 28, 2024