Fork of Bar Graph

100%

Fork of Bar Graph

✓ Published1🌍 Public

Last edited Mar 22, 2024

Created on Mar 22, 2024

Forked from Loading and Parcing CSV using d3

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.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar Chart

This example presents a bar chart of global sales data across historical periods, rendered as an SVG with D3 version 6. It shows a default view of steel-blue bars, which transition to orange on mouse hover via D3's selection and transition APIs. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file and mapped to rectangles with explicit width and height attributes.

GGuilinabaoge

83% match

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

82% match

Loading thumbnail…

Product Sales Bar Chart

This bar chart displays product sales figures from a CSV file, with each product’s sales value represented by a steelblue bar. The visualization uses D3.js to create an SVG, scaling the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`. Axis labels are rotated, and a title is added, all rendered via the D3 SVG API. Data is loaded asynchronously from a GitHub gist using `d3.csv`.

Aavvarijayakrishna99@gmail.com

82% match

Loading thumbnail…

Fork of vendas_por_grupo_bar_chart

This bar chart displays the quantity sold for each product group, with horizontal bars sorted by category. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map quantities to bar lengths and groups to vertical positions, respectively. Data from a CSV file is loaded via `d3.csv`, with string values converted to numbers. The SVG rendering includes axis labels, tick lines, and interactive hover titles showing exact values, styled with a custom gradient background and yellow bars.

GGaneshPenumarthi

82% match

Loading thumbnail…

Fork of vendas_por_grupo_bar_chart

This horizontal bar chart visualizes product group sales quantities from a CSV file, ranking categories like footwear and accessories by units sold. The D3 v7 code uses `scaleLinear` and `scaleBand` to map data to SVG rectangles, with `axisBottom` and `axisLeft` generating labeled axes. Hover effects are applied via CSS, and the visualization is styled with a dark gradient background and bold yellow bars, with data loaded asynchronously via `csv()`.

Vvijaygvdr

82% match

Loading thumbnail…

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

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.

Ggopiganta

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

82% match

Loading thumbnail…

Fork of Simple Bar Chart

This example shows the distribution of products across categories in a furniture dataset, using a bar chart to compare category counts. It fetches CSV data from a remote URL, parses it with `d3.csvParse`, and aggregates counts with `d3.rollup`. The visualization renders bars with `d3.scaleBand` and `d3.scaleLinear`, styled in steelblue, and includes axes via `d3.axisBottom` and `d3.axisLeft`. The SVG is created dynamically with `d3.create` and appended to the document body.

Ttejasviteegala@my.unt.edu

82% match