Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Vvegurusaiprathyusha
Last edited Mar 7, 2022
Created on Mar 7, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This visualization displays the top 10 highest-grossing films in USD using horizontal bars rendered as SVG rectangles. The React component loads CSV data via d3.csv, then uses d3.scaleBand for the y-axis film labels and d3.scaleLinear for the x-axis gross values. Ticks and axis labels are generated from xScale.ticks(). The bar chart updates asynchronously, showing a loading state until data arrives.

RRamakanth771
91% 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
86% 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
85% 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
85% match
Loading thumbnail…

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

This visualization displays the IMDb ratings of ten movies as a horizontal bar chart. Built with React and D3 v5, the app fetches data from a CSV file using `d3.csv` and renders SVG marks. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and manually maps ticks and rectangles from the data array. React state and `useEffect` manage the asynchronous data loading.

Nnikitamakkena
84% match
Loading thumbnail…

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

This interactive bar chart displays the top 10 most profitable countries from a sample sales record dataset. The visualization uses React with D3.js v5 to render SVG marks and channels, with the chart loading data from a GitHub-hosted CSV file. Rects encode profit values through their width along a linear scale, while country names are positioned on a band scale. The implementation leverages React's state management and useEffect for data fetching, alongside D3's scaleBand, scaleLinear, and csv parsing utilities.

Mmanvithareddykarra
84% match
Loading thumbnail…

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

This example displays a horizontal bar chart of the top 15 movies by their Metascore, using React to manage the component state and D3 version 5 for data processing and scales. It loads a CSV file from a GitHub Gist, parses the numeric score values, and renders the bars as SVG rectangles. The code uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to handle data loading, axis positioning, and scaling, with React’s `useState` and `useEffect` to fetch and store the data before rendering.

TTejaswicmandava
84% match
Loading thumbnail…

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

This example shows the cost of Netflix in 15 different countries as a horizontal bar chart, ranked on the y-axis, with bar lengths encoding the movie_name value. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data to SVG rectangles, with axes drawn manually via `.ticks()`. The data comes from a CSV file loaded using `d3.csv`, and the chart renders bars and tick labels entirely as SVG elements within a React component.

Nnsatyaprakash22
84% match