Skip to main content
SimilarExport ZIP
100%

ICE6-barchart

✓ Published0🌍 Public
HHariniPotla@my.unt.edu
Last edited Mar 6, 2026
Created on Mar 6, 2026
Forked from HTML Starter

This example shows daily sales performance as a static bar chart, with each bar representing one day’s sales value in steel blue on an SVG canvas. It loads CSV data from a GitHub gist, parsing numeric fields for Day, Sales, Profit, Orders, and Visitors. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Only every fifth day is labeled on the x-axis to reduce clutter, and titles for the chart and axes are added as SVG text elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6-combinedchart

This combined chart displays sales as steelblue bars and profit as a red line across 28 days, using a band scale for the x-axis and a linear scale for the y-axis. The code loads CSV data via `d3.csv`, converts numeric fields with unary plus operators, and renders the visualization with SVG. It constructs the bar layer with `selectAll('rect')` and the line path using `d3.line`, then adds axes through `d3.axisBottom` and `d3.axisLeft`. The chart highlights the relationship between daily sales volume and profit trends.

HHariniPotla@my.unt.edu
88% 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
88% 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
85% match
Loading thumbnail…

Fork of ICE6 - Marks and Channels

This example shows a bar chart of sales revenue per product from January through May 2024. It uses D3 v6 with SVG rendering, loading CSV data from a GitHub gist and aggregating it with `d3.rollup` to sum revenues by product. Horizontal bars are drawn as `rect` elements with a steelblue fill that turns orange on hover, using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are generated with `d3.axisLeft` and `d3.axisBottom`.

Bbhargavinalamothu@gmail.com
84% 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
84% match
Loading thumbnail…

ICE6

This interactive bar chart shows monthly sales figures, with each bar representing a month’s sales value from the `Sales.csv` dataset. The chart supports clicking on a bar to highlight it, visually distinguishing the selected month by changing its fill to white with a black stroke. The visualization is built with React and D3 v7, using `d3.csv` to parse the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes, all rendered as SVG within a responsive container.

GGuntupalli Mohan kalyan
83% match
Loading thumbnail…

ICE6-multiline

This multi-series line chart displays Sales and Profit trends over time, with two lines drawn in steel blue and green on a shared axis. The visualization uses D3.js v7, loading CSV data from a GitHub gist and mapping numeric Day, Sales, and Profit fields. The code employs `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the SVG rendering, including labeled axes and a title.

HHariniPotla@my.unt.edu
83% 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
82% match