Gist 86292bd89584613190b0d96b634a1531

Fork of Vertical Bar Chart - Volkskrant

This bar chart displays the populations of ten countries, with steel-blue bars that turn red and gain a blue stroke on mouseover while a text label appears showing the country name and its population in billions. The chart uses D3 v6's `scaleBand` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for scales, and a custom `format-india` function for number formatting. Data is loaded from a CSV file via `csv()`, and the SVG renders responsively to the window size.

Lluckylaksh0

Bar Chart

A bar chart displays population counts for ten countries, using horizontal bars sorted by descending value with China and India leading. The visualization loads data from a CSV file, parses population figures, and renders SVG rectangles via D3 v5. It uses `d3.csv`, `scaleLinear` for the quantitative x-axis, `scaleBand` with padding for categorical y-axis placement, and configures `axisLeft` and `axisBottom` for ticks. Steelblue bars are drawn on a 960×500 canvas with explicit margins.

Nneydareh

Hharisankarakeluth@my.unt.edu

7

This example displays a bar chart comparing total COVID-19 deaths across 14 countries, with steel-blue bars sorted by country name and labeled with their precise totals. Built with D3 v7 and SVG, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and D3's `axisBottom` and `axisLeft` to render the axes, with bars and labels appended directly to the SVG elements.

Making a Bar Chart

A bar chart ranks ten countries by population from a CSV dataset, using horizontal bars to compare values like China's 1.4 billion against Nigeria's 196 million. The chart relies on D3's `scaleLinear` and `scaleBand` to map population and country names, with `axisLeft` and `axisBottom` generating the axes. Bars are drawn as SVG rectangles, filled steelblue, and the population values are converted from thousands via `d3.csv` and JavaScript's `+` operator. The visualization uses an SVG canvas of 960 by 500 pixels.

MMuhammad Jarir Kanji

rakshitharao27

This horizontal bar chart displays the number of deaths in 2019 for the top 12 countries, with each bar's length representing the death count. The chart uses a React component that loads data from a CSV file via the `d3.csv` function. It employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. The visualization renders as an SVG with axes and bars constructed using React primitives, styled with simple CSS.

RRakshithaRao27

Making a bar chart

A horizontal bar chart displays population figures for nine countries, using data from a CSV file. The chart ranks countries by population along a linear scale, with country names on a band scale for bar positioning. Built with D3 v6, the visualization loads CSV data, converts population values to numbers, and renders SVG rectangles. It uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and bars, with steelblue fills and margins for layout.

YYanda Qu

Making a bar chart

This bar chart ranks the populations of ten countries in 2018, showing China and India as the most populous. The visualization uses D3 version 6 with an SVG rendering. The code imports `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 to construct the axes and scales. It reads population data from a CSV file, multiplies each value by 1000, and draws steel-blue rectangles with widths proportional to population, using margins and a padded band scale for country labels.

WWayne716

presentation bar chart

This horizontal bar chart displays deaths per country, with each bar’s length proportional to the death count. The chart uses D3 v7’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The computed values are multiplied by 1000, and bars are styled maroon with a 0.3 padding between bands.

RRobindj2000