Creating a Rectangle Chart

100%

Creating a Rectangle Chart

✓ Published1🌍 Public

Last edited May 8, 2021

Created on May 8, 2021

This example demonstrates a horizontal bar chart from the `products.csv` dataset, ranking products by their numeric attribute values. The chart uses an SVG canvas with a linear scale for bar lengths and a band scale for categorical product names, rendered via D3 v6’s `scaleLinear`, `scaleBand`, and `axisLeft`/`axisTop` APIs. Bars are drawn directly as SVG rectangles, with steelblue fills and compact axis labels. The setup processes CSV data and maps product names to the vertical axis while attribute values determine bar heights, producing a straightforward comparison of product metrics.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of yearly values from 2011 to 2015, with each bar’s length representing a numerical value. The chart uses an SVG rendering with D3 v6, applying `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` to draw the axes. Data is loaded from a CSV file via `d3.csv`, and rectangles are appended to the SVG to form the bars.

Ssumaiyamahin

78% match

Loading thumbnail…

chart exercise

This example displays a bar chart of five product prices from a local CSV file. The visualization uses D3 version 5 to render SVG rectangles, with the y-axis scaled linearly from zero to the maximum price and the x-axis using a band scale for categorical item names. The chart includes labeled axes and steel-blue bars, with all text styled to a large size via CSS. The code manually applies margins and uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the plot.

Llinkshady

78% match

Loading thumbnail…

Ejercicio#2

This horizontal bar chart displays the heights of six products, using a linear scale for the x-axis and a band scale for the y-axis. The visualization loads data from a CSV file with d3.csv, then renders SVG rectangles with computed attributes. It employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to generate axes with formatted tick labels and adds a title and axis label.

MMerceEscalante

77% match

Loading thumbnail…

Making bar chart

This example demonstrates how to build a horizontal bar chart from a CSV dataset using D3 version 6. The chart displays the `detailnumber` values for each country, with blue rectangles sized proportionally to the data. The code uses `d3.csv` to load the dataset, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis positioning. The SVG is pre-selected, and the `enter()` selection appends the rectangles directly to the rendered chart.

Mmgl12432

77% match

Loading thumbnail…

Making Bar chart with D3

A bar chart displays monthly values from a CSV file, using horizontal bars where length encodes value and vertical position encodes date. The visualization is built with D3 v5, using `scaleLinear` for the value axis, `scaleBand` for the categorical date axis, and `axisLeft`/`axisBottom` for tick marks. SVG rectangles are rendered from the loaded data, with axes simplified by removing domain and tick lines.

JJuan David Bolaños Rojas

77% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of country sizes, using D3 v5 with an SVG rendering approach. The chart maps country names to the y-axis and size values to the x-axis using `scaleBand` and `scaleLinear`, with axes added via `axisLeft` and `axisBottom`. Data is loaded from a CSV file and parsed with `d3.csv`, and bars are rendered as rectangles with a steelblue fill.

Jjf1978

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

77% match

Loading thumbnail…

Creating a Bar Chart with real data

This example displays a horizontal bar chart of product closing values, using real CSV data loaded from a GitHub gist. The visualization maps each product name to a band scale on the y-axis and its closing integer to a linear scale on the x-axis, rendering rectangles as bars. React state manages the fetched data via `useState` and `useEffect`, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data parsing and scaling. The chart is drawn as an SVG, with the first ten rows of the dataset shown.

GGayan Priyadarshana

77% match