Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6

✓ Published0🌍 Public
CChandrashekharRamamuthi
Last edited Mar 12, 2023
Created on Mar 12, 2023
Forked from ICE-6

This example displays a bar chart of the top 10 credit card clients by credit limit, rendered as SVG rectangles. The code uses React for component structure and D3 v5 scales (`scaleBand`, `scaleLinear`) and the `csv` loader to fetch data from a GitHub-hosted CSV file. Axes are drawn as custom React components, with the bottom axis using `xScale.ticks()` and the left axis mapping categorical client numbers. The chart intentionally omits axis labels and titles, showing raw values with minimal styling.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

A horizontal bar chart displays the credit limits of the first twenty clients from a CSV dataset, with each client identified by their CLIENTNUM on the y-axis. The chart uses React with D3 v5, employing d3.csv for data loading, scaleBand for the categorical y-axis, and scaleLinear for the numeric x-axis. SVG rectangles render the bars, while custom AxisLeft and AxisBottom components provide tick labels and grid lines. The visualization focuses on comparing credit limits across individual clients.

CChandrashekharRamamuthi
87% match
Loading thumbnail…

ICE-6

The visualization displays the credit limit for ten clients as a horizontal bar chart. Each bar’s length encodes the `Credit_Limit` value, with clients listed on the y-axis. The chart is built with React and D3 v5, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering is generated manually with React elements.

CChandrashekharRamamuthi
87% match
Loading thumbnail…

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

This example renders a horizontal bar chart of the top 10 most populous countries in 2019. It uses React to manage the component state and render the SVG, while D3 is used for data loading with `csv` and for constructing the scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart displays axis ticks and labels generated from the D3 scale domains, alongside rect marks whose widths encode each country's population. Data is fetched from a CSV file hosted on GitHub.

Ggayathri
84% match
Loading thumbnail…

Fork of ICE-6

This is a bar chart of supermarket sales data, showing the unit price for the first ten product lines from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles for each bar. Data is loaded asynchronously via `d3.csv` and limited to ten entries before being displayed. The chart includes custom axes with gridlines and labels, all rendered as SVG elements within a React component.

SsreepavanKothapalli
83% match
Loading thumbnail…

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

This example displays a horizontal bar chart of the top 10 most populous countries in 2019, sourced from a CSV file. The visualization renders the chart as an SVG, using React for component structure and state management, while D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling. The code draws axis ticks and labels directly, alongside the bars, within a single SVG `<g>` element.

SSrilekha24
83% match
Loading thumbnail…

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

This example displays a horizontal bar chart of laptop sales for the top ten companies, rendered as SVG elements using React. The code loads CSV data with `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and manually creates axis ticks and gridlines. The bars and labels are generated as React components, with styling applied via CSS in the HTML file.

Kkalyanikotha
83% match
Loading thumbnail…

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

This example displays a horizontal bar chart of laptop sales for the top ten companies, rendered as SVG elements using React. The code loads CSV data with `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and manually creates axis ticks and gridlines. The bars and labels are generated as React components, with styling applied via CSS in the HTML file.

Kkalyanikotha
83% match
Loading thumbnail…

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

This example visualizes laptop sales data for the top ten companies using a horizontal bar chart rendered as SVG. The visualization loads data from a CSV file and displays each company’s sales as a green rectangle bar. Built with React and D3 v5, the code uses `csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and React’s `useState` and `useEffect` hooks to manage state. The chart includes axes with blue tick lines and company labels.

Rrohinikotha
83% match