ICE-6

100%

✓ Published1🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of 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.

CChandrashekharRamamuthi

87% match

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA

83% match

Loading thumbnail…

ICE-6-Q1

A horizontal bar chart displays the top 10 customers by credit amount from a German credit dataset, with steel-blue bars and customer IDs on the y-axis. The visualization uses D3 v5's `scaleLinear` and `scaleBand` to map the data, while `axisLeft` and `axisBottom` generate the axes. Credit amounts are formatted using D3's `format` function, and the chart is rendered as an SVG with a title and axis labels. Data is loaded asynchronously via `csv` and truncated to the first ten records.

Hhossaphul

82% match

Loading thumbnail…

ICE-6

This visualization displays the top 20 companies by value using a horizontal bar chart, with company names on the y-axis and numerical values on the x-axis. It loads data from a CSV file via `d3.csv` and renders SVG elements using React. The chart leverages `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with manually drawn tick lines and labels. Data is transformed with a row function that ensures value fields are parsed correctly before rendering red rectangular bars.

RRupeshGandham

82% match

Loading thumbnail…

ICE 6 Marks and Channels

A horizontal bar chart displays the sales figures for the top 15 supermarket customers. Each bar’s color alternates between red and light blue based on its array position. The chart uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while axis ticks are generated manually from the scales. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles.

SSai Kaushik

81% match

Loading thumbnail…

ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating. The visualization loads CSV data via `d3.csv`, sorts by rating, and renders SVG bars, axes, and labels using React components. It uses D3 scales (`scaleBand`, `scaleLinear`), axis ticks, and text elements for annotation. The chart is styled with CSS in the HTML file, and the React app updates state after data retrieval.

RRaajithaSabbineni

81% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

81% match