Skip to main content
SimilarExport ZIP
100%

Test

✓ Published0🌍 Public
GGoomble
Last edited Feb 13, 2017
Created on Feb 13, 2017

A bar chart displays count values from a CSV file across a categorical axis. The chart uses D3 v4 to load the data with `d3.csv`, scales the counts with `d3.scaleLinear` and the category positions with `d3.scaleBand`, and renders axes via `d3.axisBottom` and `d3.axisRight`. The SVG plot is positioned with margins, and the code includes calls to `getBoundingClientRect` to determine the available space. The visualization is built as a static SVG graphic with no interactive features.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Test

This example uses a dataset of bicycle-related crimes to render a bar chart in SVG, plotting categories from a CSV file along a band scale against their counts on a linear scale. The chart displays the values from the `numbers.csv` data as vertical bars, with axes positioned on the right and bottom using `d3.axisRight` and `d3.axisBottom`. The visualization is built with D3 v4, using `d3.scaleLinear` for the count axis and `d3.scaleBand` for categorical spacing, all within a single SVG element selected via `d3.select`.

GGoomble
86% match
Loading thumbnail…

Basic bar chart

This basic bar chart displays categorical year-based values as vertical bars, with each bar’s height encoding the numeric value from a CSV file. The chart loads data from `test-data.csv` using `d3.csv`, then renders SVG rectangles via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the code includes configurable labels and margins. The design emphasizes simplicity and reusability, adapting a prior block by mbostock into a customizable template.

EEleonore9
86% match
Loading thumbnail…

Test

A bar chart displays the frequency of different theft-related incidents, with counts ranging from 14 to 1800. The visualization uses D3 v4 with `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis count scale. Data is loaded from a CSV file using `d3.csv`, then rendered as SVG rectangles with a yellow fill. Axis ticks and labels are generated using `d3.axisBottom` and `d3.axisLeft`.

GGoomble
83% 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
82% match
Loading thumbnail…

csv using d3

This example displays a bar chart of categorical data from a CSV file, mapping names to numbers. It loads D3 v6 via UNPKG and an external CSV, parsing the data with `d3.csv` and `+` conversion. The chart uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` with `d3.max` for the x-axis, rendered entirely as SVG elements. `d3.axisLeft` and `d3.axisBottom` generate the axes, while D3 selection API appends the rectangles.

RRITUZZ
82% 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
82% match
Loading thumbnail…

Bar chart TT

This example displays a vertical bar chart of yearly values from a CSV file, using D3 v4 (loaded via both a CDN link and the `d3.v4.js` script). The visualization uses SVG rendering with the `d3.select` and `d3.scaleBand`/`d3.scaleLinear` APIs to map years and values to bar positions, while `d3.axisBottom` and `d3.axisLeft` generate the axes. The bars are drawn as `rect` elements, styled with a class from the provided CSS.

Hhanulik.ondrej@gmail.com
81% match
Loading thumbnail…

Data Visualization with D3

This example displays a bar chart of categorical data from a CSV file, comparing numeric values across named categories. The visualization uses an SVG canvas with axes, mapping the data's numeric values to horizontal bar lengths and category names to vertical positions. The implementation relies on D3 v5 utilities for data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis generation with `axisLeft` and `axisBottom`, while the chart is rendered as SVG rectangles within a React-based HTML page.

Ssvensonneveld
81% match