Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
Kkartik900
Last edited Mar 11, 2023
Created on Mar 11, 2023
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
89% 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
89% match
Loading thumbnail…

ICE-6 Bar Graph

This example displays a horizontal bar chart of total revenue for twelve countries, loaded from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with gridlines and axis tick labels generated via `xScale.ticks()` and custom text elements. The data is fetched asynchronously using `d3.csv` and processed with a row function to convert revenue values to numbers.

Ggayathrikavya
86% 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
85% match
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
84% match
Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu
83% match
Loading thumbnail…

ICE-6 Country Sales Bar Chat

This example shows a horizontal bar chart of sales figures for the top ten countries from a CSV dataset. Each green bar represents total sales per country, with axes labeled and tick marks rendered. The code uses React with hooks to manage loading data via d3.csv, and d3.scaleBand and d3.scaleLinear for positioning. It renders SVG elements directly in JSX, constructing the chart with d3’s scale functions and max helper. The dataset is fetched from a GitHub gist, and the layout includes custom margins for the left-aligned country names.

Aarchanagoli@my.unt.edu
83% match
Loading thumbnail…

ICE-6-DS-BarGraph

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.

Mmukundakrishna.r@gmail.com
83% match