Skip to main content
SimilarExport ZIP
100%

Barplot

✓ Published0🌍 Public
MMauradion
Last edited May 17, 2021
Created on May 17, 2021

This example shows a horizontal bar plot ranking the ten most populous countries, with population values read from a local CSV file and displayed on a linear scale. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG chart. Population numbers are formatted using `format('.3s')` with a custom replace for billions, and the chart includes a title and axis label styled via CSS, with grid lines drawn from the x-axis ticks.

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…

Making a bar chart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values on the x-axis and country names on the y-axis. The code uses D3 v5’s `csv` loader to parse `data.csv`, then constructs the chart with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Bars are rendered as SVG `rect` elements, with dashed grid lines from a custom tick size and a formatted population axis using `format('.3s')`. Styling is applied via external CSS.

IIsabel
92% match
Loading thumbnail…

Bar Chart

This bar chart visualizes the top 10 most populous countries, with population values read from a CSV file. It uses a D3 v5 linear scale for the horizontal axis and a band scale for the vertical country categories, rendered as SVG rectangles. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with custom tick formatting to abbreviate large numbers. A title and axis label are added as SVG text elements, and the chart is styled via CSS classes.

Ssploitfun
91% match
Loading thumbnail…

Making a bar chart

This horizontal bar chart ranks the ten most populous countries using population data from a CSV file, with bars scaled linearly by population size and country names on the categorical y-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render axes and bars as SVG rectangles, while `csv` loads the data and `max` computes the domain. Population values are multiplied by 1,000 to reflect actual figures, and the chart is styled via CSS with steel-blue bars and large text.

RRod Potter
91% match
Loading thumbnail…

Bar Chart Axes

This example shows a horizontal bar chart ranking the ten most populous countries, with population values formatted in billions and a labeled x-axis. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map population and country names, while `axisBottom` and `axisLeft` generate the axes. The chart reads from a CSV file, renders as SVG, and removes default axis domain lines for a cleaner look.

AAjit Singh
91% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values converted to billions and labeled accordingly. It uses D3 v6’s `csv` loader to parse the data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` with `axisBottom` for the axes. The SVG rendering includes a custom tick formatter that replaces “G” with “B,” gridlines via negative tick sizes, and styled text for the title and axis labels.

HHenryJulienDesgranges
91% match
Loading thumbnail…

Bar Chart

This example displays a horizontal bar chart ranking countries by population, using a CSV dataset of ten nations. The visualization is built with D3.js v5, using `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles. The axes are generated with `axisLeft` and `axisBottom`, and the bars are rendered as SVG `rect` elements. Data is loaded via `d3.csv` and converted from raw values to thousands.

NNanok09
91% match
Loading thumbnail…

Bar chart

This example displays a horizontal bar chart ranking the top 10 most populous countries, using population data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and renders bars as SVG `rect` elements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with tick formatting applied through `d3.format` to abbreviate numbers. The visualization is built with React, D3 v6, and SVG rendering.

JJordy Fronik
91% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries, with each bar’s length proportional to population and countries ordered along the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, while `csv()` loads the data and `selectAll` appends SVG rectangles. Population values are multiplied by 1000, and the chart is rendered in an SVG canvas with steelblue bars.

Mmatthewfresh
91% match