ICE-6-DS-BarGraph

100%

ICE-6-DS-BarGraph

✓ Published0🌍 Public

Last edited Mar 22, 2024

Created on Mar 21, 2024

This bar graph displays iPhone sales data, showing the sale price for each product name using vertical bars. It uses D3.js v7 to load a CSV file from a GitHub gist and render an SVG chart. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Rectangles are drawn for each data point, with hover effects changing the bar color to orange.

AI-generated description

An example showing the capabilities of VizHub: to represent the Bar plot for IphoneSales

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar Graph

This bar chart visualizes iPhone sales figures across countries for the year 2020, with each bar’s height encoding the sales value. The chart uses D3 v7 to load a CSV dataset from GitHub Gist, then creates an SVG with a band scale for the x-axis and a linear scale for the y-axis. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while bars are appended as `rect` elements with a steel blue fill. The code includes hover effects defined in CSS, though no interaction is implemented in the JavaScript itself.

Ssriram.official9@gmail.com

93% match

Loading thumbnail…

Barchart

This visualization displays iPhone sales data as a set of grouped bar charts, with each chart representing a different year and bars showing sales figures across countries. The code uses D3 v7 to fetch data from a CSV file, then creates separate SVG charts per year, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while hover effects change bar fill color to orange via CSS. The rendering approach is SVG, with a clean layout featuring dashed gridlines and clearly labeled axes.

Ssriram.official9@gmail.com

85% match

Loading thumbnail…

ICE-6

This bar chart displays total sales values by year, with each year’s revenue encoded as a bar’s height and a dollar-formatted y-axis for reference. Built with D3 v4, it loads CSV data from a GitHub gist via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles. Axis labels for “Year” and “Total Sales Value” are appended directly to the generated axes.

Kkartik900

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

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

82% match

Loading thumbnail…

ICE-6: Marks and Channels with D3

This horizontal bar chart displays the 2018 sales figures for the top 20 mobile sales entries from a CSV file. Built with React and D3 v5, it uses d3.csv to load data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the quantitative x-axis. Orange rectangles represent sales values, with green tick lines and labels from xScale.ticks().

KKande2011

81% match

Loading thumbnail…

Fork of ice

A horizontal bar chart displays the top 20 records of iPhone sales by year, with each bar’s length proportional to sales figures loaded from a CSV file. The chart uses React with hooks for state management and D3 v5’s `scaleBand` and `scaleLinear` to map years to vertical positions and sales values to bar widths. SVG rectangles render the bars, while x-axis ticks and y-axis labels are generated manually using D3’s `ticks()` and scale domains. Data comes from a remote GitHub Gist URL, fetched asynchronously via `d3.csv`.

Ppavankalyan1507

81% match

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch

80% match