Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 1, 2026

Created on Oct 1, 2026

This D3.js (v7) visualization shows the relationship between movie runtime, rating, and votes, with genre as a categorical color channel. It presents a scatterplot of movie data loaded from a GitHub-hosted CSV file, with axes for runtime and rating. The code uses D3 APIs including `d3.csv`, `d3.extent`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.select` to build the SVG chart. It also computes summary statistics like mean and median rating using `d3.mean` and `d3.median`. The page includes a summary box with data dimensions and field ranges.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This scatterplot visualizes the evolution of movie genres over time by plotting IMDb ratings against release years for a dataset of over 100 films. Each circle is color-coded by genre, with its position determined by the film’s release year and rating. The visualization is built using D3.js (v7) with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Interactive features include hover tooltips that appear after a delay and click-to-select highlighting.

SSaba Siddiqi

85% match

Loading thumbnail…

Fork of HTML Starter

A bar chart displays the number of movies per genre from a 100-sample CSV dataset, with genres on the x-axis and counts on the y-axis. The chart is rendered as scalable vector graphics (SVG) using D3.js v7. The code loads the data with d3.csv, aggregates counts via d3.rollup, and constructs scales with d3.scaleBand and d3.scaleLinear, with axes drawn using d3.axisBottom and d3.axisLeft.

AAbhiram-Janagama

83% match

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes South Indian movie data, displaying total count, average IMDB rating, and average box office earnings in a text summary, alongside a full data table and a bar chart of box office collections. The bar chart uses d3.scaleBand and d3.scaleLinear to map movie titles and revenue, with axes generated via d3.axisBottom and d3.axisLeft. The code loads a CSV dataset with d3.csv, cleans the data, and renders the SVG chart with blue rectangles, rotated x-axis labels, and custom title text.

Ddeepthinaidu2001@gmail.com

82% match

Loading thumbnail…

Fork of HTML Starter

This interactive scatterplot visualizes hours played versus rating for video games, with each point representing a game and color-coded by genre. A summary panel displays dataset statistics, while five version buttons allow switching between different mark and channel configurations. The visualization uses D3 v7 with SVG rendering, loading CSV data from a gist, and implements linear scales, axes, and interactive UI controls to explore the data.

SSri Sruthi Khyathi Boggaram

82% match

Loading thumbnail…

Fork

This example visualizes the distribution of ratings across movie genres as a percentage, with each bar representing a genre and its height indicating the proportion of a specific rating level. It shows the data as a stacked bar chart where hovering over a bar reveals the exact percentage via a tooltip. Built with D3 v7, the visualization loads data from a CSV file and uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and interactive mouse events to trigger tooltip transitions. The chart is rendered as an SVG with animated hover effects and lightweight styling.

Ssathvik0311@gmail.com

81% match

Loading thumbnail…

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes movie data from a CSV file, encoding each film’s runtime on the x-axis and its vote average on the y-axis. The chart uses SVG paths generated by `d3.symbol` to differentiate genres via a `scaleOrdinal` mapping to `d3.symbols`. Built with D3 v7, it loads data via `d3.csv` and dynamically creates scales and axes within a reusable `scatterPlot` function defined in the script.

TTarun Kumar Bosupally

81% match

Loading thumbnail…

Fork of Activity6_q6

This scatter plot visualizes the relationship between movie rating percentages in the 5.0-6.5 and 6.5-7.5 ranges, with each circle representing a genre from the Data.csv dataset. The code loads data via d3.csv, maps values to positions using scaleLinear with domains from d3.extent, and renders colored circles with genre-specific fills through an ordinal color scale. Axes are generated with axisLeft and axisBottom, while d3.selectAll and .join add SVG circles that include tooltip titles showing exact coordinates. The visualization uses a margin-based SVG layout with custom axis labels.

Aabjalshaik02@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

This network graph visualization maps Hulu movie data by genre, revealing connections between movies, their genres, and the overarching category. Using d3.forceSimulation, the visualization positions nodes representing movie titles, genre groupings, and a central category, with links styled as arrows to indicate hierarchy. The code loads CSV data, filters for movies only, and groups up to three titles under Romance, Drama, and Thriller genres. The SVG rendering uses a color scale to distinguish node types, with hover states and directional markers enhancing readability.

Ppavan vasamsetti

81% match