Fork of Theme River

100%

Fork of Theme River

✓ Published0🌍 Public

Last edited Dec 11, 2023

Created on Dec 11, 2023

This fork of Theme River visualizes movie ratings data across years, using a streamgraph to show revenue contributions from G, PG, PG-13, and R categories. The visualization employs d3.stack with a silhouette offset to create layered areas, rendered as SVG paths with d3.area and curveCardinal interpolation. Interactive tooltips display stream details on mouse movement, while a separate dashboard panel provides a compressed view of the data. The code uses d3.scaleOrdinal with schemeCategory10 for color encoding and d3.scaleLinear for both x and y axes.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Theme River

A theme river visualizes the change in box office ratings categories (G, PG, PG-13, R) over time from 1983 to 2016. Streams are stacked with the `d3.stack()` API using a silhouette offset, rendered as filled SVG paths with cardinal curve interpolation via `d3.area()`. Hovering over a stream shows a tooltip displaying the category, year, and value, while a small dashboard appears in the corner. The color scale uses `d3.scaleOrdinal` with `d3.schemeCategory10`, and data comes from the CSV file `ratings.csv`.

方方顗棠

87% match

Loading thumbnail…

Fork of Fork of Movie ratings

This stacked bar chart shows the distribution of movie ratings across six genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5.” The chart reveals that documentaries and dramas have higher proportions of strong ratings, while action films skew toward lower scores. Using D3 v7, the visualization applies `d3.stack()` to compute stacked segments, `d3.scaleOrdinal` to map rating categories to colors, and `d3.scaleBand` for the genre axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment. The data is loaded from a CSV file and rendered as SVG.

SSiyu Shen

78% match

Loading thumbnail…

Fork of IMDb Movie ratings example

This stacked bar chart visualizes the distribution of movie ratings across six genres, with each bar segment representing the percentage of films falling into one of five rating bands. Hovering over a segment reveals the exact percentage via a tooltip. The chart uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to build the SVG visualization from CSV data, with custom tooltip handling and axis labels.

Pprudhvi

77% match

Loading thumbnail…

Fork of Movie ratings

This stacked bar chart shows the percentage distribution of five rating categories across six movie genres, highlighting how genre influences audience scores. Each bar segment represents a rating range from below 5.0 to above 8.5, with genre names listed on the y-axis and percentage values on the x-axis. The visualization uses d3.stack() to compute the stacked data, d3.scaleOrdinal for color encoding, and d3.scaleBand for the categorical axis. Interactive tooltips display the exact percentage and rating category when hovering over any segment.

SSiyu Shen

76% match

Loading thumbnail…

Fork of q2

This visualization shows the distribution of movie ratings across six genres using a horizontal stacked bar chart. Each genre’s bar is divided into five rating categories, from below 5.0 to above 8.5, with segment lengths proportional to the percentage of movies in that category. The chart uses d3.stack to compute the stacked segments, d3.scaleLinear for positioning, and d3.scaleBand for genre spacing. SVG rectangles render the bars, with hover tooltips revealing exact percentages via mouse events. The data comes from a CSV file, and colors are assigned via d3.scaleOrdinal.

Rrushithareddyy

75% match

Loading thumbnail…

Fork of Fork of IMDb Movie ratings

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, segmented into five rating brackets from below 5.0 to above 8.5. The visualization uses d3.stack() to layer the rating categories and d3.scaleOrdinal with a custom color scale for the segments. Hovering over any bar segment triggers a tooltip displaying the exact percentage for that genre and rating bracket via d3.select and mouse event handlers. Data comes from a local CSV file, rendered as SVG with axes created using d3.axisBottom and d3.axisLeft.

Pprudhvi

75% match

Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart shows the percentage of movie ratings across six genres, with each bar partitioned into five rating levels from “below 5.0” to “above 8.5.” Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses D3 v7’s `d3.stack` to compute the stacked proportions and `d3.scaleOrdinal` for color encoding, rendering as SVG with axes from `d3.axisBottom` and `d3.axisLeft`. Data comes from a local CSV file summarizing IMDb rating distributions.

IIan Mac Moore

75% match

Loading thumbnail…

Fork of IMDb Movie ratings

This visualization uses a stacked bar chart to show the percentage of movies within six genres across five rating bands, from below 5.0 to above 8.5 on IMDb. Each bar is segmented into colored strips representing a rating category, with the full bar totaling 100% for the genre. The chart is built with D3 v7, using `d3.stack()` on the CSV data to compute the stacked segments, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the percentage x-axis. Hovering over any rectangle triggers a tooltip that displays the exact percentage for that genre-rating combination via `d3.select` and event handlers. Text labels are rendered as SVG elements, and the chart is styled with custom CSS importing the Yanone Kaffeesatz font.

Jjingwg3@163.com

75% match