Skip to main content
SimilarExport ZIP
100%

Simple bar graph in v6

✓ Published0🌍 Public
Dd3noob
Last edited Sep 12, 2020
Created on Sep 12, 2020

This example shows a simple bar graph of sales figures per salesperson, rendered as an SVG using d3.js v6. It loads data from a CSV file with `d3.csv`, maps the data to a `d3.scaleBand` for the x-axis and a `d3.scaleLinear` for the y-axis, and draws rectangles for each bar. Axes are added with `d3.axisBottom` and `d3.axisLeft`. The chart uses a fixed margin layout and steel-blue bars.

AI-generated description

This is a simple bar graph written using d3.js v6.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.

mit Licensed

Similar vizzes

Loading thumbnail…

Simple bar graph in v4

This example shows a simple bar chart of sales figures per salesperson, rendered as SVG rectangles. It uses D3 v4 with a `d3.scaleBand` for the x-axis and a `d3.scaleLinear` for the y-axis, pulling data from an external CSV file. The chart includes bottom and left axes via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously with `d3.csv`, and bar heights are calculated relative to the maximum sales value.

Dd3noob
93% match
Loading thumbnail…

Simple bar graph in v5

This example shows a simple bar chart of sales figures by salesperson, with steel-blue bars and labeled axes on both sides. The data comes from a CSV file containing names and numeric sales values. The code creates a band scale for the x-axis and a linear scale for the y-axis, then uses `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to render the axes. Bars are appended as SVG `rect` elements, with widths and heights computed from the scales. The chart uses D3 v5 and is rendered entirely in SVG.

Dd3noob
93% match
Loading thumbnail…

Simple bar graph in v7

A simple bar graph displays sales totals for thirteen named salespeople, with steel-blue bars sorted alphabetically along a band scale. The chart loads sales data from an external CSV file using `d3.csv` and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added with `d3.axisBottom` and `d3.axisLeft`, while margins position the plot within the fixed 960x500 viewport. The visualization serves as a basic example for the D3 Tips and Tricks book, demonstrating standard data binding and enter selections with d3.v7.

Dd3noob
91% match
Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey
82% match
Loading thumbnail…

d3NoobV5 Reusable Examples - Bar Chart

A reusable bar chart built with D3 v5 renders sales data from a CSV file, displaying a categorical x-axis of salesperson names and a linear y-axis for sales values. The chart uses `d3.scaleBand` and `d3.scaleLinear` for positioning, with `d3.axisBottom` and `d3.axisLeft` for axes, and draws bars as SVG `rect` elements. The code follows a modular pattern based on Mike Bostock’s reusable charts approach.

JJimMaltby
82% match
Loading thumbnail…

Basic bar chart

This basic bar chart displays yearly values from a CSV file, with bars colored blue and highlighted on hover. It uses D3 v4 to load the data via `d3.csv`, scales with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles. The chart is configured as a reusable template, where users can edit column names, axis labels, and colors in a designated section. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with labels positioned manually. The example is a fork of Mike Bostock’s original bar chart block, adapted for CSV input.

EEndNight95
81% match
Loading thumbnail…

Simple Bar Chart

This simple bar chart displays the count of values associated with six named categories, with each bar’s height proportional to its numeric value. The visualization uses D3.js v5, loading data from a CSV file via `d3.csv` and rendering SVG rectangles appended to a prepared SVG container. The code sets bar positions and dimensions using linear calculations based on each data point’s index and value, with no axes or labels present. The chart is static, with fixed width and height attributes defining the viewBox.

Nneetusingla12(Neetu Singla)
81% match
Loading thumbnail…

Simple Bar Chart

This simple bar chart displays the count of values associated with six named categories, with each bar’s height proportional to its numeric value. The visualization uses D3.js v5, loading data from a CSV file via `d3.csv` and rendering SVG rectangles appended to a prepared SVG container. The code sets bar positions and dimensions using linear calculations based on each data point’s index and value, with no axes or labels present. The chart is static, with fixed width and height attributes defining the viewBox.

Nneetusingla12(Neetu Singla)
81% match