creating barchart

100%

creating barchart

✓ Published0🌍 Public

Last edited Mar 5, 2022

Created on Mar 4, 2022

Forked from dataset

This example shows a horizontal bar chart of cricket players’ career runs, with bars scaled linearly by run count and player names on a band scale. The code imports D3 v5 functions like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, then renders SVG rectangles from `data.csv`. It multiplies run values by ten, removes axis domain lines, and adds custom axis labels and a title.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

creating a barchart

This example creates a static bar chart visualizing cricket players’ career runs using a CSV dataset. The code loads data with `d3.csv`, parses the `RUNS` field as a number, and appends SVG `<rect>` elements using D3’s selection and data-join methods. It defines a linear scale with `d3.scaleLinear` (using a typo, `scaleLiner`) to map the maximum run value to the chart width. The React-based setup relies on UMD builds from unpkg, though the chart is rendered imperatively with D3 rather than through React components.

Vvidhyanamini

90% match

Loading thumbnail…

custom chart v2.0

This custom chart visualizes cricket batting performance, showing each player’s innings as a horizontal bar positioned along the ball count, with bar height representing runs scored and vertical offset reflecting cumulative team runs before that batsman. The SVG rendering uses d3.scaleLinear for both axes, d3.csv for data loading, and d3.select to bind CSV data to rectangles. The chart encodes individual innings length, start ball, and runs in a single coordinated view.

PPabloEscargot

79% match

Loading thumbnail…

Fork of CSCE-5320 ICE-6

This example shows a horizontal bar chart of the top ten cricket players by total runs, with green gridlines and labeled axes. It loads CSV data from a GitHub gist, slices the dataset to the first ten rows, and renders the bars as SVG rectangles using React. The visualization uses `scaleBand` for the player categories and `scaleLinear` for the run values, with `axisBottom` and `axisLeft` omitted in favor of manual tick generation via `xScale.ticks()`. Styling is applied through inline SVG attributes and CSS in the HTML file.

Cchandrakalavanukuri

79% match

Loading thumbnail…

Barchart Tutorial

This example shows a horizontal bar chart of amounts per person, with red bars scaled linearly along the x-axis and categorical names on a band scale along the y-axis. The visualization renders as SVG using D3 v5, loading data from a local CSV file via `d3.csv` and converting the numeric amounts with `+d.amounts`. Scales, axes, and rectangles are created with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `selection.enter().append('rect')`, with margins applied through a group transform.

Aahemdalssafi

79% match

Loading thumbnail…

barchart customization using d3

This example demonstrates a customizable bar chart using D3 v6, rendering data from a CSV file as SVG rectangles. It uses `d3.scaleLinear` and `d3.scaleBand` to map numeric values and categorical names, with `d3.axisLeft` and `d3.axisBottom` for labeled axes. The chart features a formatted tick scale via `d3.format`, a customized grid with removed domain lines, and styled bars with steelblue fill. The code imports specific D3 functions and applies margins, padding, and axis labels to produce a polished visualization.

RRITUZZ

79% match

Loading thumbnail…

Making a Barchart

This example shows a horizontal bar chart of population counts for ten countries, using data loaded from a CSV file. The visualization maps population values to bar widths via a linear scale and country names to vertical band positions with a band scale. The code relies on D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering the bars and axes as SVG elements. Styling is applied through CSS, with bars filled in steel blue and axis text enlarged.

Rryandebattista

78% match

Loading thumbnail…

custom chart v2.2

This chart displays cricket batting data, mapping each player’s innings as a horizontal bar positioned by their first ball faced and height by runs scored before them. The SVG rendering uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for scales, and d3.csv to load the dataset. Rectangles encode innings length, runs, and cumulative runs, with axis ticks showing balls faced.

PPabloEscargot

78% match

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values read from a CSV file and displayed on a linear scale while country names appear on a band scale. It demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending a group for margins, and binding data to rectangle elements. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart with steel-blue bars and labeled axes.

RRiccardo Pressiani

78% match