Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
CChandrashekharRamamuthi
Last edited Mar 12, 2023
Created on Mar 12, 2023
Forked from Hello Package.json

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.

AI-generated description
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
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-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 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
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
81% match
Loading thumbnail…

ICE6

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family structure, with green and blue bars representing different meter readings. The code uses React with d3-scale-band and d3-scale-linear scales, d3.stack for stacking, and SVG rendering to display the data. The chart loads CSV data from a GitHub gist and includes labeled axes, a legend, and a vertical y-axis label. It employs d3.csv for data loading and d3.max for computing the domain, with the visualization showing account-specific usage patterns over time.

SSnigdha6698
80% 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
79% 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
79% match