Semiotic Test

Fork of ICE-6: Rendering Marks and Channels with React & D3_Ramakanth

This visualization displays the top 10 highest-grossing movies in USD as a horizontal bar chart, with movie titles on the y-axis and weekend gross earnings on the x-axis. The React app fetches CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` to map film names and gross values, and renders SVG rectangles for bars with tick lines and labels. It relies on React's `useState` and `useEffect` hooks to load and sort the data, while D3 v5 handles the scales and chart layout.

Vvegurusaiprathyusha

68% match

Multiple movie legs

The chart tracks the weekly box-office performance of four blockbuster movies—Titanic, Avatar, Frozen, and Star Wars: The Force Awakens—as a percentage of their total domestic gross. Each film is drawn as a separate orange, red, blue, or green line. The data is loaded from a TSV file and parsed with d3.timeParse. A time-scaled x-axis shows release weeks, while a linear y-axis displays the weekly share of total domestic gross. Dashed grid lines aid comparison, and each line is labeled directly near its starting point.

68% match

movie legs

The visualization tracks weekly box-office earnings for the movie *Titanic*, showing the decline in gross revenue over roughly five months. A single orange line, drawn with a 10-pixel stroke, connects the data points, with time on the x-axis and earnings on the y-axis. The code uses D3 v4’s `d3.line` and `d3.scaleTime`/`d3.scaleLinear` to construct the chart, loading data from a tab-separated file. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the SVG is positioned within a margin-defined area.

Multiple Movie Legs

This example shows a single orange line chart tracking the weekly closing values of the movie *Titanic* from late December 1997 through late May 1998, revealing a sharp decline in reported box-office or sales figures over that period. The visualization uses D3.js v4 to load a TSV dataset, parse dates with `d3.timeParse`, and render an SVG path via `d3.line`. Axes are added with `d3.axisBottom` and `d3.axisLeft`, while the line’s styling is set through a CSS class. The data source is embedded in the `newtitanic.tsv` file, and the chart is built entirely with SVG elements.

Multiple Movie Legs

Bubble Chart Experiment

This bubble chart experiment visualizes 2017 box-office performance for the top 50 films, encoding domestic gross by circle area, Rotten Tomato ratings by color, and opening-weekend earnings by vertical position. Animated transitions compare each film's opening versus final box office totals, with circles drifting and scaling as the view toggles between metrics, using SVG and d3.v4 transitions to reveal studio dominance and the relationship between critic scores and revenue.

record-movies

A scroll-driven visualization tracks the top-grossing movies of all time, showing how their box office earnings grow over their first 26 weeks of release. As the user scrolls through a timeline from 1993 to 2019, the chart updates to highlight the current top three films with pink lines, using D3’s nested data and scale functions to bind the scroll position to the year domain. The data comes from Box Office Mojo via Axios, rendered as SVG paths with d3.line and a Canvas-free DOM-based tooltip.

11wheel

Untitled

This visualization compares Netflix subscriber growth across global regions with box office revenue and audience sentiment data to explore whether streaming services are displacing movie theaters. It combines a grouped bar chart showing regional subscriber counts from Q1 2018 to Q2 2020, a line chart of box office metrics, and a sentiment analysis timeline, all rendered as SVG with animation using D3.v4 within a React framework. Interactive tooltips provide hover details on bar values, and a dropdown menu allows toggling between different Netflix growth metrics.

NNithish John Paull