Skip to main content
Log in
R

Ruba Khan

@rkhan570·16 public vizzes

Loading thumbnail…

Bubble Chart of Highest Grossing Movies

This interactive bubble chart displays the top 10 highest-grossing movies from an IMDB dataset, with circles sized by gross revenue and colored on a gradient from light pink to dark red. The visualization uses D3’s `forceSimulation` with charge, center, and collision forces to position the bubbles, and includes draggable circles with labels showing each film’s title. A dropdown filter allows users to select a director, updating the simulation with only that director’s movies. Tooltips and dynamic styling enhance the exploration of the data.

Dec 6, 2024
Loading thumbnail…

Heatmap of Certification Trends over Time

This heatmap displays the distribution of movie certificates across decades, using data from the IMDB Top 1000 dataset. It shows how many films of each certificate type (e.g., A, U, UA) were released per decade, with color intensity representing movie counts. The visualization uses d3.scaleBand for axes, d3.scaleLinear for the color scale, and d3.axisBottom/axisLeft for ticks. Interactive features include a hover tooltip and click-to-highlight functionality that emphasizes cells sharing the selected decade or certificate.

Nov 22, 2024
Loading thumbnail…

Stacked Bar Chart IMBD Ratings vs. Meta Score for Top 20 Movies

This stacked bar chart compares IMDb ratings and Meta scores for the top 20 movies from a CSV dataset, with each bar segment representing one metric. The visualization uses D3.js `scaleBand` and `scaleLinear` for axes, with mouseover legend interactions to highlight either IMDb or Meta bars. Data is sourced from `imdb_top_1000.csv` and rendered via SVG rectangles.

Nov 15, 2024
Loading thumbnail…

Bar Chart of Number of Movies Released per Year

This bar chart displays the number of movies released per decade from the IMDB Top 1000 dataset, with hover tooltips revealing the decade's exact count and top-rated film. The visualization uses d3's `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes and bars, with a custom tooltip div for interaction. Data is aggregated in `index.js` by filtering on `Released_Year` and grouping into decades, while the `viz.js` component handles all SVG drawing and styling.

Nov 15, 2024
Loading thumbnail…

Bar Chart of Average Ratings per Genre

This bar chart visualizes the average IMDb rating for various movie genres, computed from the imdb_top_1000.csv dataset. Each bar represents a genre with its corresponding average rating on a linear scale. The visualization uses D3.js, employing `scaleBand` for the categorical x-axis, `scaleLinear` for the numeric y-axis, and `axisBottom`/`axisLeft` for the axes. Interactive tooltips appear on hover, displaying the genre and its average rating.

Oct 31, 2024
Loading thumbnail…

Time Series Plot of Movie Ratings

This time series plot visualizes daily surface air temperature for each year, with 2024 prominently highlighted in red while all other years are rendered as semi-transparent plasma-colored lines. The visualization uses `d3.select` for SVG creation, `d3.scaleLinear` and `d3.scaleSequential` for axes and color mapping, `d3.flatGroup` to group data by year, and `d3.line` to generate the paths. Data comes from the `@curran/daily-surface-air-temperature` package, with axis rendering handled by the `@curran/responsive-axes` library.

Oct 31, 2024
Loading thumbnail…

World Map with Movies

A world map visualizes the global distribution of Netflix movie production by country, with individual nations colored on a blue sequential scale based on the count of titles associated with them. The example uses d3-geo’s `geoNaturalEarth1` projection and `geoPath` to render world boundaries, while `topojson-client` converts the TopoJSON atlas data into GeoJSON features. Movie counts are aggregated from a bundled CSV file, and interactive tooltips display the exact number per country on hover.

Oct 24, 2024
Loading thumbnail…

Scatter Plot of Runtime vs. Ratings

This scatter plot visualizes the relationship between movie runtime and IMDB ratings for the top 1000 movies in the provided dataset. Each point represents a film, colored by its primary genre, with a legend and dropdown filter for interactive genre selection. Hovering over a point reveals a tooltip showing title, runtime, rating, and director. The visualization is built using D3.js, employing `scaleLinear`, `scaleOrdinal`, `schemePastel1`, `axisLeft`, and `axisBottom` to create the chart, axes, and color encoding.

Oct 13, 2024
Loading thumbnail…

Wealth Distribution Overtime

Wealth Distribution Overtime uses d3.line, scaleLinear, axisBottom, axisLeft, and scaleOrdinal to render three multi-series line charts tracking the wealth of Elon Musk, Mark Zuckerberg, and Jeff Bezos from 2020 to 2024. The code defines the data inline, with values in hundreds of millions, and draws each person’s trajectory as an SVG path with stroke and circle marks. A color-coded legend and labeled axes clarify the comparison, while the x-axis shows years and the y-axis displays wealth magnitude.

Sep 25, 2024
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between attendance rate and final grade for a student performance dataset, with each circle representing a student. The code uses D3’s `scaleLinear` and `extent` functions to map the data to screen coordinates, while axis labels are generated through the `@curran/axis-labels` package. The plot includes a light gray background rectangle and semi-transparent circles, configured via options like `innerRectFill`, `circleRadius`, and `circleOpacity`. Data is loaded directly from a local CSV file with fields converted to numbers.

Sep 15, 2024
Loading thumbnail…

MAMAA Company Market Caps

This animated visualization displays the relative market capitalizations of six major tech companies—Meta, Apple, Microsoft, Amazon, Google, and Netflix—using circles sized by a square-root scale. Data comes from Forbes. D3 transitions animate each circle’s radius and labels fade in sequentially, while a second, faster transition handles updates. The code uses `scaleSqrt` for radius scaling, `transition` with `easeLinear`, and `selectAll().join()` to manage enter, update, and exit selections for both circles and text labels.

Sep 7, 2024
Loading thumbnail…

Student Performance

This visualization displays a preview of student performance data, showing the first record's attributes such as attendance rate, study hours, previous grade, and final grade. It loads data from a CSV file containing ten students with demographic and academic metrics, converting quantitative fields to numbers. The example uses plain JavaScript to parse the data and render the first entry as formatted JSON text in a container, providing a simple template for inspecting dataset structure before building more complex charts.

Sep 7, 2024
Loading thumbnail…

Mental Health

This example visualizes the first record of a mental health survey dataset from Kaggle, showing parsed survey responses as a JSON string. The code loads `MentalHealthSurvey.csv` via a data import statement, then converts quantitative fields like age, CGPA, sleep hours, and Likert-scale ratings (depression, anxiety, isolation) from strings to numbers using unary plus and `parseFloat`. The parsed object is displayed in a `<pre>` element with a fixed font size, providing a quick reference for the data structure. The visualization relies on the CSV parsing and string interpolation in JavaScript, without additional libraries.

Sep 7, 2024
Loading thumbnail…

Olympic Medals

This example displays the raw contents of the Paris 2024 Olympics medals dataset loaded from a CSV file. It parses the medal counts (gold, silver, bronze, and total) into numbers and renders the first record as a formatted JSON string inside a preformatted HTML element. The visualization uses plain JavaScript with the CSV import syntax from VizHub and the standard `JSON.stringify` method to inspect the data structure. The dataset originates from Kaggle and includes medal tallies for each participating country.

Sep 7, 2024
Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example displays the raw contents of the Palmer Penguins dataset, parsed from a CSV file and shown as a formatted JSON object for the first row of data. It loads the data using an ES module import, converts the quantitative fields into numbers by applying unary plus operators, and renders the output as a styled `<pre>` element. The visualization serves as a template for importing and inspecting new datasets in VizHub.

Sep 2, 2024
Loading thumbnail…

Fork of Circles with D3

This example generates an animated underwater scene using D3.js, depicting a group of colorful fish rendered as rectangles, along with white bubbles and green seaweed elements set against an ocean-blue background. The visualization demonstrates the D3 General Update Pattern through the `select`, `selectAll`, `data`, and `join` methods to create and bind SVG elements to data arrays. The code defines static positions and sizes for each element type—fish, bubbles, and seaweed—using hardcoded coordinate and color data. All shapes are drawn as basic SVG primitives without any simulation or interactive features.

Aug 27, 2024