Skip to main content
Log in
R

Ravneet Singh Bhatia

@Ravneetsb·22 public vizzes

Loading thumbnail…

A4 - Scatter Plot

This scatter plot visualizes the relationship between total expected goals (xG) accumulated by football teams in home versus away games during a Premier League season. Each circle represents a team, positioned by aggregating home and away xG values via `d3.rollup` and `d3.sum` from CSV data. The visualization uses D3 v7 to create SVG axes with `d3.axisLeft` and `d3.axisBottom`, labels, and labeled circles, with hover effects defined in CSS.

Feb 23, 2026
Loading thumbnail…

A8 - Adjacency Matrix

This adjacency matrix visualizes directed relationships between 34 nodes, using D3.js to render SVG rectangles that represent connections from the dataset’s source-target pairs. Green cells mark edges, while black diagonal cells highlight symmetry, and a mouseover interaction highlights the corresponding row and column by thickening strokes and turning the hovered cell yellow. The code loads data from a CSV file, builds the matrix with fixed cell dimensions, and includes legend headers and labels for student IDs. The visualization effectively reveals network structure through a traditional matrix layout.

Mar 26, 2024
Loading thumbnail…

A8 - Force Directed Network Layout

This example visualizes a network of 34 students in a karate class using a force-directed layout. The code loads edge data from `data.csv` and renders SVG circles and lines with D3 v7, applying `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes. Node fill colors are assigned via `d3.scaleOrdinal` with `schemeCategory10`, and the final layout appears after the simulation’s `end` event updates the title.

Mar 25, 2024
Loading thumbnail…

A7 Small Multiples of Line Chart

This visualization employs a small multiples layout to compare smoking prevalence trends across three countries—China, Pakistan, and India—from the "smoking.csv" dataset. Each panel contains a line chart with time on the x-axis and smoking rate on the y-axis, encoded with a distinct color. The SVG is rendered using D3.js, with each country's data isolated via grouping and plotted in its own cell. The use of small multiples allows for easy comparison of trends over time, while the legend and axes provide context. The design emphasizes clarity through consistent scales and minimal visual noise, enabling viewers to focus on the shape of each line. The example demonstrates the power of small multiples for comparative analysis, though it leaves room for interactive enhancements.

Mar 20, 2024
Loading thumbnail…

A7 - Heatmap

This heatmap visualizes the trend of smoking population percentages across five countries (China, India, Pakistan, Sri Lanka, and the World) over time. Each cell represents a country-year combination, with color intensity mapped from white to red using a linear scale to indicate the percentage of smokers. The visualization includes a color legend titled "Smoking Population %" and provides interactive tooltips on hover, displaying the country, year, and exact percentage. The chart uses D3.js with SVG rendering, featuring labeled axes for year and country, and a smooth color gradient to highlight variations in smoking prevalence across the dataset.

Mar 18, 2024
Loading thumbnail…

A7 Line

This line chart, created with D3, visualizes the trend of smoking prevalence (as a percentage of total population) from 1980 onward across several Asian countries and the World. The x-axis encodes time using a time scale, while the y-axis maps the percentage of smokers. Each line represents a country, distinguished by color via an ordinal scale, with a legend included. The visualization uses a cleaned dataset from the CSV, filtering for countries like China, India, Pakistan, Sri Lanka, and the World, to compare smoking trends. The chart includes labeled axes, a title, and a legend, making it easy to compare the trajectories across these regions. The example demonstrates how to build a multi-series line chart with D3.js, including data loading, nested data grouping, scales, axes, and legends. The visualization is rendered in SVG.

Mar 17, 2024
Loading thumbnail…

A6 - Scatter Plot

This scatter plot visualizes the relationship between culmen length and culmen depth for three penguin species—Gentoo, Adelie, and Chinstrap—using data from a CSV file. Circles are color-coded by species via `d3.scaleOrdinal`, with axes created using `d3.axisBottom` and `d3.axisLeft`. A `d3.legendColor` legend identifies species, while `d3.csv` loads the data. The static SVG rendering is generated entirely through D3.js version 7.8.5, with labels added as SVG text elements.

Mar 4, 2024
Loading thumbnail…

A6 - Diverging Bar Chart

This diverging bar chart visualizes the change in state population from 2020 to 2023, using a diverging color scale to distinguish growth (steelblue) from decline (lightpink). The chart renders the top ten states by population change, with bars extending from a central zero axis. Built with d3.js, it employs `d3.scaleLinear` for the numeric axis, `d3.scaleBand` for categorical states, and `d3.legendColor` for the legend, while an axis is drawn using `d3.axisBottom` and `d3.axisLeft`.

Mar 4, 2024
Loading thumbnail…

A6 Bar

This bar chart displays the average number of forward gears for the top 10 car manufacturers from a CSV dataset, with bars colored by a sequential rainbow scale. It uses D3.js to load and aggregate data with `d3.csv` and `d3.rollup`, then renders horizontal bars via SVG rectangles. The chart includes axes, labels, and a color legend generated with `d3-legend`’s `legendColor`, while the color mapping uses `d3.scaleSequential` with `d3.interpolateRainbow`.

Mar 4, 2024
Loading thumbnail…

A5 - Scatter Plot Matrix

This scatter plot matrix visualizes three penguin measurements—culmen length, culmen depth, and flipper length—from a CSV dataset, with points colored by species. The visualization shows pairwise relationships across three cells, each pairing two variables with labeled axes. Built with D3.js, the code uses d3.csv for data loading, d3.scaleLinear for coordinate mapping, and d3.axisBottom and d3.axisLeft for ticks. Each cell contains circles rendered in SVG, with shared axes reused between adjacent plots to reveal correlations and species clustering.

Feb 27, 2024
Loading thumbnail…

A5 - Line Plot

This visualization displays daily minimum temperatures in Melbourne, Australia, across a year, using a line plot to show temperature trends over time. The chart, rendered as an SVG, uses D3.js version 7.8.5 to load CSV data from a GitHub gist, parse dates with `d3.timeParse`, and scale the time and temperature axes with `d3.scaleTime` and `d3.scaleLinear`. The line itself is drawn via `d3.line` and appended as a path with a steelblue stroke, with axes labeled and styled using D3's `axisBottom` and `axisLeft`.

Feb 27, 2024
Loading thumbnail…

A5 - Bubble plot

This bubble plot visualizes the top 30 Twitch streamers by total followers, plotting followers gained in one year against total followers on linear axes. Each bubble’s radius encodes peak viewership, while color distinguishes mature channels (red) from non-mature ones (steelblue). Built with d3.scaleLinear, d3.axisBottom, and d3.axisLeft, it includes interactive tooltips on mouseover. The chart uses data from a CSV fetched via d3.csv, with SVG rendering and transitions for tooltip opacity.

Feb 26, 2024
Loading thumbnail…

A4 - boxPlot

This example visualizes the total expected goals (xG) accumulated by football teams in home games using a box plot. The chart displays the distribution of these values across all teams, with the box representing the interquartile range and whiskers extending to the minimum and maximum within 1.5 times the IQR. The code loads CSV data from a GitHub gist using `d3.csv`, aggregates values with `d3.rollup`, and computes quartiles with `d3.quantile`. The visualization is rendered as SVG using D3 scales, axes, and shape primitives.

Feb 21, 2024
Loading thumbnail…

A4 - Bar

This bar chart visualizes the average expected goals (xG) for English Premier League teams, comparing home versus away matches. The data is loaded from a CSV file and processed using `d3.csv` and `d3.mean`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, with bars rendered as SVG rectangles. A title and axes are added using `d3.axisLeft` and `d3.axisBottom`. The bars animate a color transition from steelblue to red using `transition`, while the page includes a video tutorial link. The rendering is SVG-based with dynamic interactivity.

Feb 20, 2024
Loading thumbnail…

A3 Strip

This visualization displays a strip plot of total goals scored per game week across an English Premier League season. Each soccer ball emoji represents a single goal, stacked vertically, with weeks arranged along the horizontal axis. The sketch.js code loads the dataset from a remote CSV using p5.js’s `loadTable`, aggregates goal counts by week, and renders the emoji marks via p5.js’s `text()` function within a custom Strip class.

Feb 13, 2024
Loading thumbnail…

A3 Boxplot

This example visualizes the distribution of total goals scored per game week across 38 weeks in the English Premier League using a boxplot. The p5.js sketch loads CSV data via `loadTable` from a GitHub gist, computes the five-number summary and outliers through a custom `Boxplot` class, and renders the plot with Canvas drawing functions like `line`, `rect`, and `circle`. The x-axis displays game weeks, while the y-axis represents goal counts, with outliers flagged individually.

Feb 13, 2024
Loading thumbnail…

A3 Histogram

This example visualizes the total goals scored per game week in a soccer season as a histogram. It uses the p5.js library to create a canvas and render bars representing aggregated goal counts, with mouse hover interactions displaying the exact value per bar. The data is loaded from a CSV file via `loadTable` in the `preload` function, and the bars are drawn using custom drawing logic that maps goal totals to vertical heights.

Feb 12, 2024
Loading thumbnail…

A2 Heat Map

This heat map visualizes residential wood consumption across seven U.S. states over ten years (2010–2019), using orange squares whose opacity scales with the data value. Built with p5.js, it loads CSV data from a GitHub URL, draws axes and labels, and relies on the canvas API (`createCanvas`, `square`, `fill`) for rendering. Hovering over a square displays the specific value and a wood emoji via p5’s `mouseX`/`mouseY` checks and `text` function.

Feb 6, 2024
Loading thumbnail…

A2 - Bar Chart

This bar chart visualizes petroleum consumption in residential areas across U.S. states in 2019, highlighting the top five and bottom five states by usage. The chart uses a logarithmic scale for bar widths, with color intensity (green to red) indicating whether consumption levels are considered good or bad. Interactive hover annotations display exact values. Built with p5.js, the visualization loads data from a remote CSV file and sorts it programmatically, drawing axes, bars, and labels through canvas rendering functions.

Feb 6, 2024
Loading thumbnail…

A2 - Dot Plot

This dot plot visualizes the top ten U.S. states by petroleum expenditure in transportation for 2019, with each blue dot positioned along a scaled x-axis that maps dollar amounts. The chart presents state rankings vertically, using labels and hover interactions that reveal exact values and draw a guide line to the axis. Built with p5.js, the sketch loads CSV energy data from a GitHub gist, processes it into a sorted dataset, and renders custom axes and dot annotations via the Canvas API.

Feb 5, 2024
Loading thumbnail…

CS360-A2-ravneet

This example demonstrates a minimal "Hello World" visualization rendered inside a VizHub V3 container. It uses plain JavaScript and direct DOM manipulation through the `main` function’s `container` argument, setting a large font size and centered text via inline styles. No external libraries or data sources are involved; the code simply assigns an HTML string with a styled `div` to `container.innerHTML`. The example highlights the basic runtime entry point and hot-reloading environment rather than any complex rendering or data processing.

Feb 2, 2024
Loading thumbnail…

p5-starter

This example demonstrates the classic p5.js “Hello World” pattern adapted for the VizHub V3 Runtime Environment, which enables continuous hot reloading with interactive widgets. The sketch renders five pink rectangles of random widths that update once per second on a gray background. Using the p5.js library, the code declares `setup()` and `draw()` functions, with `createCanvas()`, `rect()`, `random()`, and `frameRate()` controlling the canvas and animation. The absence of an `index.html` triggers the V3 runtime, and the entry point is the exported `main` function that receives a container DIV.

Jan 31, 2024