Skip to main content
SimilarExport ZIP
100%

Making a horizontal bar chart

✓ Published0🌍 Public
Ddeepak jangid
Last edited May 30, 2020
Created on May 23, 2020
Forked from Hello VizHub

This example shows a horizontal bar chart comparing two values (`val_1` and `val_2`) for five beverage brands, with each bar colored green or red based on whether `val_1` meets a threshold (`mark_val`), and a vertical black line marking that threshold. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map data to coordinates, appends rectangles and lines to an SVG, and animates a rotation of the chart’s coordinate system. Data is loaded from a CSV file via `csv()` and parsed into numeric fields.

AI-generated description

Creating a horizontal bar chat.

  1. Representing a data table in javascript.
  2. Creating rectangles for each row.
  3. Using linear and band scales.
  4. The Margin Convention.
  5. Adding Axes and Brand names.
  6. Fill the color in rectangle, if(val_1 >= mark_val) 'green' else 'red'.
  7. Add small vertical line representing mark_val data.
MIT Licensed

Similar vizzes

Loading thumbnail…

Making Vertical Bar chart with D3

This example shows a vertical bar chart of monthly date-value pairs from a CSV file, with bars animating upward over two seconds to their final heights. The D3 v5 code uses `scaleLinear` for the y-axis, `scaleBand` for categorical x-axis positioning, and `axisLeft`/`axisBottom` for tick marks. The SVG rendering is driven by a custom transition on `rect` elements, which grow from the baseline to the scaled value, while the chart title and axis labels are added as SVG text.

JJuan David Bolaños Rojas
81% match
Loading thumbnail…

Fork of Making a Bar Chart

This example displays a horizontal bar chart of brand ratings from a CSV dataset, with each bar’s length proportional to the rating value. It uses D3 v5’s `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for axes. The SVG is rendered via D3 selections, with margins and labels for the axes. Data is loaded asynchronously with `csv`, and ratings are converted to numbers before rendering. The chart highlights brand comparison, with blue bars and a clean layout.

SSwapna1915
80% match
Loading thumbnail…

making a horizontal bar chart

A horizontal bar chart displays the distribution of values across letters, with green bars drawn in an SVG canvas. The visualization uses d3-scale's scaleLinear and scaleBand to map data values and letter categories to pixel positions, while d3-axis renders the left and bottom tick marks. Data loads from a local CSV file, and the bars are appended as SVG rect elements, with widths proportional to each letter's value.

VVvgupta
79% match
Loading thumbnail…

HTML Starter

This example demonstrates horizontal and vertical bar charts built with D3 v5, rendering SVG elements with animated transitions. The visualization reads data from a CSV file and displays multiple series with customizable colors, selection highlights, and optional area fills. Users can toggle between bar and line representations per series, with axis ranges configurable for both left and right sides. Hovering over chart sections reveals tooltips showing weekly values via mouse events, while invisible selection rectangles enable interactive node highlighting. The code leverages d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom, and axisRight for data binding and chart construction.

Mmauryaamit
79% match
Loading thumbnail…

making a vertical bar chart

This example shows a vertical bar chart of lettered categories (a–m) and their corresponding numerical values, with red bars and labeled axes. The chart uses D3 v5 to load comma-separated data via `d3.csv`, then applies `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, and the bars are appended as SVG `<rect>` elements. The layout uses a fixed margin and inner dimensions, with the y-axis range inverted to align zero at the bottom.

VVvgupta
79% 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
78% match
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…

D3 Example

This example presents a horizontal bar chart comparing revenue figures across named categories, with an additional vertical reference line and a separate bar strip on the right side. Built with D3.js (version 3.5.5) and rendered as SVG, it uses two CSV data files—one containing revenue and prior-year values, the other containing revenue and other metrics. The chart employs ordinal and linear scales, along with D3’s axis and selection APIs, to map category names to bar heights and revenue values to bar widths, while the standalone line and rectangles are placed manually via SVG coordinates.

RRatnar
78% match