Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

✓ Published1🌍 Public
TTulluripallavi
Last edited Mar 6, 2022
Created on Mar 6, 2022

This horizontal bar chart visualizes the number of users of OTT platforms, sourced from a CSV file. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. React manages the data state and updates the visualization. The chart displays the first 12 rows of data, with axis ticks and labels generated via D3's axis functions.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

A bar chart displaying the number of users for various OTT platforms, ranked by population count. The chart uses React to manage component state and D3.js (v5) for data loading and scale generation. Data is fetched from a CSV file using `d3.csv`, with horizontal bars rendered as SVG rectangles scaled by `d3.scaleLinear`. The visualization includes gridlines and labels generated through D3's tick methods.

TTulluripallavi
96% match
Loading thumbnail…

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

This example visualizes the users of OTT platforms as a horizontal bar chart, with each bar’s length encoding the population value. The code uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks using JSX. D3 scales (`scaleBand`, `scaleLinear`) position the bars, while `xScale.ticks()` generates grid lines and tick labels. The data is sourced from a GitHub gist and limited to the first twelve rows.

CCherukuriMilind
85% match
Loading thumbnail…

Fork of Fork of ICE-6 Bar charts: Done with the help of D3

A horizontal bar chart displays the 1890 population of eleven countries according to their bookselling categories, sourced from a CSV file loaded with `d3.csv`. The React component uses `useState` and `useEffect` to fetch and parse the data, then renders an SVG with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Grid lines, axis ticks, and rectangles are generated manually using D3 selection methods and React’s JSX syntax, with bars styled via CSS in a separate file.

TTulluripallavi
84% match
Loading thumbnail…

Fork of ICE-6 Bar charts: Done with the help of D3

This visualization displays information about book sales, presenting a horizontal bar chart that compares the population values for different book categories. The chart uses React with a functional component and the `useState` and `useEffect` hooks to load and process data from a CSV file. D3 v5 functions such as `csv`, `scaleBand`, `scaleLinear`, and `max` are used to parse the data, create the scales, and render the SVG elements, with rectangle widths encoding the data values.

TTulluripallavi
84% match
Loading thumbnail…

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

A bar chart displays population data for the top 11 bestselling books, with each bar’s length encoded by population size and its position on the y-axis by book title. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG `rect` marks. Data is loaded from a CSV file via `d3.csv`, while axes and gridlines are generated manually using `xScale.ticks()` and text elements.

TTulluripallavi
82% match
Loading thumbnail…

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

This visualization displays the size of OTT libraries across 20 countries using a horizontal bar chart. The code leverages React’s `useState` and `useEffect` hooks to fetch CSV data via `d3.csv`, then renders SVG marks with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Blue tick lines and text labels are manually generated from `xScale.ticks()`, while bars are drawn as `rect` elements. The chart sources its data from a gist CSV file containing GDP and library-size metrics.

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

Fork of ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating and labels for anime names on the y-axis. The visualization uses React components and D3 v5 scales (scaleBand, scaleLinear) to position rectangles, with CSV data loaded via d3.csv from a Gist. Axis lines and tick labels are manually rendered using SVG elements, and styling is applied via CSS classes. The chart includes custom text labels for the x- and y-axes.

CCharanPottabathini
81% match