ICE-6

100%

✓ Published0🌍 Public

Last edited Mar 6, 2023

Created on Mar 6, 2023

This bar chart displays the cocoa percentage for various chocolate companies, ordered along the y-axis with horizontal bars extending to represent each value. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleLinear` and `scaleBand` to map the data from the CSV file. Interactive tooltips appear on mouseover, and the bars are colored brown with a darkening effect on hover. The chart includes axis labels and a title, all rendered within a 960×500 SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Q1

This stacked bar chart shows the distribution of cocoa percentages across chocolate companies, with each bar representing a company and colored segments showing the proportion of ratings within different percentage bands. The visualization uses d3.csv to load data and d3.stack to compute stacked segments, with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Hover interactions trigger tooltips revealing exact percentage values via d3.format, while a legend maps colors to rating categories. The SVG rendering uses explicit margin-based layout and custom styling from the linked stylesheet.

117761A04F1

93% 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

81% match

Loading thumbnail…

ICE6-BarChart

This bar chart displays the sum of a numeric column aggregated by a categorical column from a CSV file, automatically detecting the appropriate columns and sorting categories in descending order. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.rollup` with `d3.sum` for aggregation. Bars are rendered as SVG rectangles with tooltips showing category and value, while grid lines and axis labels aid readability.

Ssahasrakaturi91@gmail.com

80% match

Loading thumbnail…

ICE-6 BARCHART

This bar chart visualizes sales figures for 100 products, with each bar’s height mapped to the product’s sales units. The visualization uses D3 v7 to load a CSV file from a GitHub gist, then renders an SVG with steel-blue bars that turn orange on hover. A band scale positions categorical products along the x-axis, while a linear scale maps sales values to the y-axis. The chart includes axis labels, a rotated x-axis to accommodate product names, and a title, with horizontal grid lines for readability.

Uuguggila@gitam.in

80% match

Loading thumbnail…

ICE-6

This example shows a bar chart of value by category using D3 v7 in SVG. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bars and gridlines drawn via `d3.axisLeft` and `d3.axisBottom`. A gradient fill is defined with `linearGradient` stops, and bars include a `<title>` for hover text. The data comes from a local CSV file.

Vvydeeshm@gmail.com

80% match

Loading thumbnail…

Ice-6

A bar chart displays the sales of various coffee products from a CSV dataset. It uses D3.js v3, loading data with `d3.csv` and rendering the chart with SVG. The x-axis uses `d3.scaleBand` for product categories, while the y-axis uses `d3.scaleLinear` for sales values. Bars are drawn as `rect` elements filled with steelblue and labeled with rotated text on the bottom axis. The visualization directly shows comparative sales figures across the coffee product lineup.

GGorantla Vishnusai

80% 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

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

79% match