Skip to main content
SimilarExport ZIP
100%

Make a bar chart

✓ Published2🌍 Public
PPulkit Rohilla
Last edited Sep 28, 2019
Created on Sep 26, 2019

This example displays a horizontal bar chart comparing the populations of five countries, using data from a local CSV file. It reads the data with `d3.csv`, scales the population values by 1000, and renders SVG rectangles with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axes are generated using `d3.axisLeft` and `d3.axisBottom`. The chart is styled with CSS, and the bars are colored steelblue.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a bar chart

A horizontal bar chart displays the population of five countries, using steel-blue rectangles to encode values from a CSV file. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to render ticks. Data is loaded via `csv`, with population numbers converted from thousands, and the SVG is appended to a 960x500 viewport.

PPulkit Rohilla
95% match
Loading thumbnail…

Make a bar chart

This bar chart displays the population of the top five countries from a CSV file, using horizontal bars scaled linearly to population values. The chart renders in SVG and employs d3.csv, d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom. The y-axis labels show country names, while the x-axis uses tick formatting to abbreviate numbers (e.g., "1.42B"). Axis lines and domain paths are removed, and custom text elements label the chart and axis.

PPulkit Rohilla
91% match
Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of country populations using D3 v5, with the data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, rendering SVG rectangles with a steelblue fill. Axes are added with `d3.axisLeft` and `d3.axisBottom`, and the population values are incremented by a constant before rendering, as shown in the code.

Oonika123
91% match
Loading thumbnail…

Making a Bar Chart

A bar chart displays population data for five countries using horizontal bars. The example builds the chart through D3.js version 5, using `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` with padding for the y-axis categories. Rectangles are appended to an SVG element, with bar widths proportional to each country's population. The code marks a basic introduction to D3's data-binding and scale functions.

DDaniel Hug
91% match
Loading thumbnail…

Making a bar chart with D3.js

This example shows a horizontal bar chart of country populations using D3.js v5, with data loaded from a CSV file and rendered as SVG rectangles. The chart uses `d3.scaleLinear` for the x-axis population scale and `d3.scaleBand` for the categorical y-axis, with `d3.axisLeft` and `d3.axisBottom` to draw the axes. Population values are formatted by multiplying the raw CSV numbers by 1000, and the bars are styled with a steelblue fill.

Ppcbt1125
91% match
Loading thumbnail…

Making a Bar Chart!

This example displays a horizontal bar chart of country populations, with values read from a CSV file and scaled by 1,000. Using D3 v5, it employs `d3.csv` to load the data, `scaleLinear` and `scaleBand` to map population and country names to positions, and `axisLeft` and `axisBottom` to render axes. Rectangles are appended to an SVG group with margins, sized by the scales, and styled with a steelblue fill.

Vvsapro
90% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for five countries, with horizontal bars sorted by country name and scaled proportionally to population values loaded from a CSV file. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map data to SVG rectangles, while the `csv` method parses the data and converts population strings to numbers. The chart populates a static SVG canvas with a steelblue fill and clear axis labels.

BBatkhongor Chagnaa
90% match
Loading thumbnail…

Making a bar chart

A horizontal bar chart displays country populations from a CSV file, with bars colored steel blue and axes labeled. The visualization is built with D3 v5, using `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisBottom` with tick formatting. SVG elements are appended and transformed via D3 selection methods.

Nnikeshkv
90% match