Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a Bar Graph with D3.js

✓ Published0🌍 Public
Ggopiganta
Last edited Mar 7, 2022
Created on Mar 6, 2022

This horizontal bar chart displays sales figures for ten retail item categories. The visualization loads data from a CSV file and renders it as an SVG. Using D3.js version 7, the code employs `scaleLinear` and `scaleBand` for the x and y axes, respectively, and `axisLeft` and `axisBottom` to generate the tick marks. Each category's bar length corresponds to its sales value, with the chart including axis labels for both dimensions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart ranks fruit sales in descending order along a vertical band scale, with horizontal bars extending proportionally to each fruit’s sales value. The visualization loads data from a CSV file, multiplies the sales figures by 10, and renders the result as an SVG using D3 v7. It employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and rectangles, with fixed margins and a steely-blue fill for all bars.

RRadhakrishna246
83% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top ten products by revenue, with each bar’s length proportional to dollar sales, as sourced from a CSV file. It demonstrates customized D3 axes, including a formatted tick label that abbreviates large numbers and removes unnecessary domain lines. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` to render SVG elements. The chart’s title and axis label are added via SVG text.

Sskambhore04
83% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays the number of employees for various service categories, using a horizontal layout where each bar’s length corresponds to the recorded value. The visualization is built with D3.js v7, loading data from a CSV file and rendering SVG rectangles. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes, with data mapped from the “No.of Employees” column.

Tttummala17
82% match
Loading thumbnail…

Fork of Bar Graph

This example visualizes product sales by sale price using a bar graph, with each bar representing a product and its height reflecting the sale price. The chart displays the data from a CSV file, showing product names along the x-axis and sale prices on the y-axis. Built with D3 v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and renders SVG rectangles for the bars. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with hover effects changing bar colors to orange.

Mmukundakrishna.r@gmail.com
82% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart ranking the populations of ten countries, using data loaded from a CSV file. The visualization maps population values to bar widths via a linear scale and country names to band positions on the y-axis. Built with D3 v7, the code uses `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles and axes. The bars are styled with a steelblue fill, and the chart is drawn within an SVG canvas sized 960 by 500 pixels.

XXzou0011
81% match
Loading thumbnail…

Fork of HTML Starter

This D3.js v7 example summarizes a remote Retail Sales CSV dataset and visualizes the first ten records as a bar chart using `d3.scaleBand` and `d3.scaleLinear`. The page also renders two decorative SVG illustrations—a car and a smartphone—drawn with primitive shapes like `rect` and `circle`. The dashboard displays dataset statistics in a styled summary box and uses `d3.axisBottom` and `d3.axisLeft` for chart axes.

Vvijaysaichigullapally1@gmail.com
80% match
Loading thumbnail…

Fork of Retail Sales Bar Chart

This example shows a bar chart of total retail sales aggregated by product category, highlighting the top 15 categories by revenue. It loads a CSV dataset and uses `d3.rollups` to group and sum the “Total Amount” field for each category. The visualization is rendered as an SVG using D3 v7, with a band scale for category positioning, a linear scale for sales values, gridlines, value labels on each bar, and rotated axis tick labels for readability.

KKOLLIPATI NIKHIL
80% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays population figures for ten countries, using horizontal bars sorted by the dataset’s original order. The visualization loads data from a CSV file, multiplies each population value by 1,000, and renders it as SVG rectangles. It uses D3 v7’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to generate the labeled axes. The chart applies margins and a steelblue fill to the bars via CSS.

SSowjanya Devupalli
80% match