Marks and Channels

100%

Marks and Channels

✓ Published0🌍 Public

Last edited Mar 25, 2022

Created on Mar 6, 2022

This example displays the top 5 movies by lifetime gross earnings as a horizontal bar chart, with each bar’s length encoding the numerical value. Built with React and D3 v5, it uses `d3.csv` to load the data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The SVG rectangles are rendered directly via React, with axes drawn using custom ticks and gridlines.

AI-generated description

Webpage that displays Top 5 movies from 50 other movies with respect to Life Time Gross earnings in bar graph.

MIT Licensed

Similar vizzes

Loading thumbnail…

Marks and Channels

This bar chart displays the types of movies released in a particular year, using horizontal bars to compare counts across categories. The visualization loads CSV data from a GitHub gist, parsing numeric year values, and renders the top 20 records as an SVG. Built with React and D3 v5, the chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and maps each movie type to a filled rectangle whose length encodes the year’s value. The chart includes custom axes and grid lines drawn with SVG elements.

Hharika-1929

86% match

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the lifetime gross earnings of ten popular movies, using D3.js within a React framework. The SVG-based visualization animates bars on hover, highlighting the selected movie and displaying the percentage divergence from others. The chart employs D3’s scaleBand, scaleLinear, axis functions, and transition effects for interactive feedback, with data hardcoded in JavaScript and styled via CSS.

Ssumitradevipolina

80% match

Loading thumbnail…

Rendering Marks and Channels with React & D3

This example shows the IMDB ratings of the top 15 movies by number of votes as a horizontal bar chart. The visualization uses React to manage state and render SVG elements, while D3.js provides the scale functions (`scaleBand`, `scaleLinear`) and data loading via `d3.csv`. The bars encode the vote count through their width, with axis ticks and labels generated manually. Movie titles appear on the y-axis, and the data comes from a GitHub-hosted CSV file fetched asynchronously.

Ssiddu7147

80% match

Loading thumbnail…

Movie Ranks

This bar chart shows the top 50 highest-grossing movies by lifetime gross, with each bar representing a movie title ordered by rank. The chart uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file and processed using `d3.csv`, with ranks scaled to thousands. The visualization customizes axes with `axisLeft`, `axisBottom`, and custom tick formatting, and highlights the data with green rectangles.

SSharmilaChowdhari

79% match

Loading thumbnail…

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

This example displays the top 20 movies from an IMDB dataset as a horizontal bar chart, where bar length encodes movie rank and each bar is labeled with its numeric rank. Built with React for component state and rendering, it uses D3 v5 APIs such as `csv` for data loading, `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and manual SVG elements for axes and grid lines. The chart updates reactively after the CSV is fetched asynchronously.

Nnsatyaprakash22

79% match

Loading thumbnail…

Marks and Channels

This bar chart shows the monthly basic cost of movie streaming subscriptions across twelve countries. The visualization uses rectangular bars as marks, with vertical position encoding country and horizontal bar length encoding cost. Built with React and D3 v5, the code uses `scaleBand` and `scaleLinear` for axes, renders SVG elements, and loads data from a CSV file via `d3.csv`.

KkannamAmulyachowdary

79% match

Loading thumbnail…

Scientific Data Visualisation Assignment Rendering Marks and Channels with React & D3

This bar chart displays the gross earnings of twelve movies, with movie titles on the y-axis and their corresponding dollar values on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv`, scales with `scaleBand` and `scaleLinear`, and generates axis ticks. The data is fetched from a remote CSV URL, and the chart draws blue rectangles for each movie's gross value.

SSravyaAnnadi

79% match

Loading thumbnail…

Fork of Movie Ranks

This horizontal bar chart displays the top 50 highest-grossing films by lifetime gross revenue. Each bar’s length corresponds to the film’s rank, using a linear scale for the x-axis and a categorical band scale for the y-axis. The visualization is rendered as an SVG using D3 v5, with axes customized via `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file using `d3.csv`, and the chart includes a title and an x-axis label.

Ssumitradevipolina

78% match