Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSravyaAnnadi
Last edited Jun 26, 2022
Created on Jun 25, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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
83% 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
82% match
Loading thumbnail…

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
82% match
Loading thumbnail…

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

This bar chart displays the titles and ratings of 15 movies, fetched from a remote CSV file. Built with React and D3 v5, it renders an SVG with horizontal bars and axes. The code uses `d3.csv` to load and parse data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and maps data to SVG `rect` elements for the bars.

AAISWARYAMARAPATLA1999
81% match
Loading thumbnail…

Rendering Marks and Channels with React & D3

This example shows the top 10 films by category and sales from a Superstore dataset, rendered as a horizontal bar chart using React and D3. It loads CSV data from a GitHub gist and maps sales values to bar widths via `d3.scaleLinear`, with categories positioned by `d3.scaleBand`. The SVG output marks axes with `scaleBand.ticks` and renders each bar as a `rect` element created through React components. The chart updates dynamically when the data loads, demonstrating a hybrid approach where React manages the DOM while D3 handles scales and data parsing.

Ssrivalliwuyyuru
80% match
Loading thumbnail…

Assignment 6

A horizontal bar chart displays the top 15 movies by rank within a year, with movie titles labeled on the y-axis and rank values on the x-axis. Built with React and D3.js, the visualization loads data from a CSV file using `d3.csv`, scales axes with `d3.scaleBand` and `d3.scaleLinear`, and renders the ranking bars as SVG rectangles. Gridlines mark each tick value on the x-axis, while the axes are drawn manually without dedicated axis components.

BBaswa Sathvika Reddy
80% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This example visualizes the 2022 populations of movies in the "RICH" dataset as a bar chart using React and D3.js. The chart displays each movie’s runtime as a vertical bar, with movie names on the x-axis and runtime values on the y-axis. The code uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.csv` to load data from a remote CSV file. SVG elements render the bars, axis ticks, and gridlines, with margins and dimensions explicitly defined. React’s `useState` and `useEffect` hooks manage asynchronous data fetching and re-rendering.

Rrohithannadurai@my.unt.edu
80% match
Loading thumbnail…

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

This example shows a horizontal bar chart of the top 15 Netflix movies by score, with red gridlines and labeled axes. It uses React to manage state and render the SVG, while D3 v5’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions handle data loading and scaling. The code builds custom axis ticks and rectangles instead of using D3’s axis generators, and the raw data comes from a gist-hosted CSV file. The chart updates when new data is fetched via the `useEffect` hook.

SSravaniPosina
80% match