Untitled

100%

✓ Published0🌍 Public

Last edited Jan 28, 2022

Created on Jan 12, 2022

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive 3D bar chart visualizes the basic monthly cost of Netflix in the first ten countries, sorted in descending order. Each country is represented by a cube whose height encodes the subscription price, with labels showing the numeric value. The visualization uses the d3-3d library to render and rotate the cubes in SVG, and d3-drag enables mouse-based rotation of the scene. Data is loaded from a remote CSV file via the Fetch API and parsed with d3.csvParse.

DDan Waters

81% match

Loading thumbnail…

Untitled

This animated bar chart compares the number of movies available on various OTT platforms, using data from a CSV file. Rendered with D3 v4 as SVG, the chart features a transition animation where bars grow sequentially on load. Interactive mouseover events highlight a bar and append a text label showing its exact value, while mouseout removes the label and resets the bar’s appearance. Axes are scaled with `d3.scaleBand` and `d3.scaleLinear`, and the chart includes a title and axis labels.

SSaahithi49

78% match

Loading thumbnail…

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

This bar chart shows Netflix subscription prices across different countries, plotting the number of movies available in each country against a horizontal axis. The visualization is rendered as an SVG using React components that leverage D3's `scaleBand` for the categorical country axis, `scaleLinear` for the continuous movie-count axis, and `csv` to load data from a GitHub-hosted CSV file. The code manually constructs axis ticks and gridlines, and uses `rect` elements to draw the bars.

TTejaswicmandava

77% match

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart visualizes Netflix subscriber growth from 2003 to 2021, sourced from a CSV file fetched via `d3.csv`. The chart uses `d3.scaleTime` and `d3.scaleLinear` to map years and subscriber counts, with `d3.area` and `d3.line` generators rendering smooth curves via `d3.curveBasis`. SVG output includes labeled axes, grid lines via tick marks, and an orange filled area beneath the black line. The React-based code imports D3 functions directly and applies CSS styling for fonts and colors.

Nnsatyaprakash22

77% match

Loading thumbnail…

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

This visualization displays the number of movies available on Netflix across different countries, using a horizontal bar chart rendered as SVG. The React app loads CSV data from a GitHub gist and uses D3’s `csv` parser, `scaleBand` for the categorical country axis, and `scaleLinear` for the numeric movie count. Bars are drawn as `rect` elements, with D3-generated tick marks and labels for both axes. The chart is limited to the top 15 countries by movie count, providing a quick comparison of content library sizes.

TTejaswicmandava

76% match

Loading thumbnail…

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

This visualization displays the basic cost of Netflix subscriptions across the top 15 countries, using a horizontal bar chart where bar lengths encode cost values. The chart is built with React and D3 v5, with the React component managing state and rendering SVG elements, while D3’s `scaleBand` and `scaleLinear` handle positioning, and `csv` loads the data. The code manually generates axis ticks and grid lines instead of using D3’s axis components, and updates the visualization reactively when new data arrives.

99176371431

76% match

Loading thumbnail…

line chart visualization

This line chart visualizes Netflix user growth from 2001 to 2011, with the year on the x-axis and user count on the y-axis. The SVG chart uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to generate the path and axes. Data is loaded as CSV from a GitHub gist using d3.csv, with the date parsed via `new Date()` and user values converted to numbers. Styling includes colored tick lines, axis labels, and a title, with grid lines created through negative tick sizes.

HHarishma Nallala

76% match

Loading thumbnail…

Fork of D3 Starter

This interactive visualization displays Netflix subscriber growth over time using an area chart with a smooth basis curve. The chart, built with D3.js v7, loads CSV data from a GitHub gist and renders year on the x-axis and subscriber counts on the y-axis. The code demonstrates creating scales with `scaleTime` and `scaleLinear`, generating axes with `axisBottom` and `axisLeft`, and drawing the line and area paths using `line`, `area`, and `curveBasis`. Grid lines, bold axis labels, and a yellow filled area highlight the trend.

Nnsatyaprakash22

76% match