Skip to main content
SimilarExport ZIP
100%

Barchart

✓ Published0🌍 Public
Ssriram.official9@gmail.com
Last edited Mar 18, 2024
Created on Mar 18, 2024
Forked from Simple Bar Chart

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.

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

Area chart

This area chart shows the total annual iPhone sales over time, with a single steelblue filled path representing the sales trend. The visualization loads data from a remote CSV file, aggregates the quarterly figures per year, and uses D3 v7’s `d3.area()` generator to create the shape. Axes are added with `d3.axisBottom` and `d3.axisLeft`, while time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) map years and sales values. The SVG rendering includes labeled axes for clarity.

Ssriram.official9@gmail.com
79% 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
78% match
Loading thumbnail…

Fork of ice

This example shows a horizontal bar chart of iPhone sales by year, with the top 20 records displayed as green bars scaled against the sales value on the x-axis and year labels on the y-axis. The visualization uses React with the `useState` and `useEffect` hooks to load data asynchronously from an external CSV file via `d3.csv`, then renders SVG elements generated with `d3.scaleBand` and `d3.scaleLinear`. Gridlines and tick labels are manually mapped from the scales, while bar heights derive from the band scale’s bandwidth, and the chart is drawn inside a 960×500 SVG canvas with a 200-pixel left margin.

Ppavankalyan1507
78% match
Loading thumbnail…

Iphone Sales

This line chart shows iPhone sales from 2015 to 2021, with years on the x-axis and sales numbers on the y-axis. The data is loaded from a CSV file hosted on GitHub Gist using d3.csv. The visualization uses D3 v5 with SVG rendering, employing d3.scaleTime and d3.scaleLinear for axes, d3.extent and d3.max to compute domains, and d3.line to generate the path. Grid lines are added via axis ticks, and the chart includes axis labels and a title, all styled with custom CSS classes.

RRadhakrishna246
77% match
Loading thumbnail…

Barchart

This bar chart visualizes the yearly stock prices of XYZ Foods from 2011 to 2020, loaded from a local CSV file. It uses D3 v4 to create an SVG with pink bars, positioning them with a band scale and a linear scale. The chart includes labeled axes with a rotated y-axis title and currency-formatted ticks, plus custom CSS styling.

SSwapna1915
77% match
Loading thumbnail…

Barchart

A horizontal barchart displays the population of China, India, and the United States, with each country’s bar length proportional to its population value. The SVG chart is built using D3 v5, with `scaleLinear` mapping population counts to pixel widths and `scaleBand` positioning categories along the y-axis. Data is loaded from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. Bars are rendered as SVG `rect` elements, with a steelblue fill applied through CSS.

Aases1996
77% match