Skip to main content
SimilarExport ZIP
100%

Fork of Vertical Bar Chart - Volkskrant

✓ Published0🌍 Public
Lluckylaksh0
Last edited Jan 28, 2021
Created on Jan 28, 2021

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.

AI-generated description

This is on Bar Chart which can change color when mouseover.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vertical Bar Chart

This vertical bar chart displays population data for ten countries, using D3 v6 (d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisBottom) and SVG rendering. The bars, initially steelblue, turn red with a blue stroke and show a text label with the population count (formatted using d3.format) on mouseover, which disappears on mouseout. The chart’s dimensions adapt to the window size, and a custom format-india function is available for Indian number formatting, though not used in the main rendering.

Lluckylaksh0
93% match
Loading thumbnail…

Vertical Bar Chart - Volkskrant

This example presents a vertical bar chart comparing the populations of ten countries, rendered as SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. The bars initially appear steelblue, and on `mouseover` events, the chart highlights the hovered bar in red with a blue stroke and displays a text label inside it showing the country name and population in billions, formatted using D3’s `format` function. The `mouseout` handler removes the label and restores the original fill. Data loads from a CSV file, with population values multiplied by 1000.

Ddavidvanr21
90% match
Loading thumbnail…

Vertical Bar Chart

This vertical bar chart displays population estimates for ten countries, sourced from a CSV file and rendered as SVG using D3.js version 6. The bars, colored steelblue, are sized with `d3.scaleBand` and `d3.scaleLinear`, and show values on a logarithmic y-axis formatted with a custom Indian number-formatting function. Hovering a bar triggers `mouseover` and `mouseout` events, changing the bar’s fill to red and adding a temporary text label that names the country and its population.

GGiosec
89% match
Loading thumbnail…

Fork of Making a Bar Chart22

This bar chart displays population figures for ten countries from a CSV file, using horizontal bars sorted by country name. The visualization is built with D3 v5 and rendered as SVG, employing `scaleLinear` for the population axis and `scaleBand` for categorical spacing. The code loads data via `d3.csv`, transforms population values to numbers, and draws axes with `axisLeft` and `axisBottom`. Bars are appended as rectangles with widths proportional to population, styled with steelblue fills and a custom margin layout.

Ggaowxx@qq.com
87% match
Loading thumbnail…

Fork of Making a Bar Chart22

This bar chart displays population figures for ten countries from a CSV file, using horizontal bars sorted by country name. The visualization is built with D3 v5 and rendered as SVG, employing `scaleLinear` for the population axis and `scaleBand` for categorical spacing. The code loads data via `d3.csv`, transforms population values to numbers, and draws axes with `axisLeft` and `axisBottom`. Bars are appended as rectangles with widths proportional to population, styled with steelblue fills and a custom margin layout.

Ggaowxx@qq.com
87% match
Loading thumbnail…

Fork of Making a bar chart

This bar chart displays the population of ten countries in 2018, using a horizontal layout where bar length encodes population value. The chart is rendered as an SVG using D3 v7, with a linear scale for the x-axis and a band scale for the y-axis. It employs the `csv` function to load data from `data.csv`, `scaleLinear` and `scaleBand` for scales, and `axisLeft` and `axisBottom` for axes. Bars are styled with steelblue via CSS.

KKaleb LaBarrie
87% match
Loading thumbnail…

Fork of Fork of Making A Bar Chartbmnvmnvm

This bar chart displays the populations of ten countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. It reads population data from a CSV and renders it as SVG rectangles with a steelblue fill. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to map data to scales and axes. The chart includes margins and padding between bars, with the y-axis containing country labels and the x-axis positioned at the bottom.

NNigel
87% match
Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays population figures for ten countries in 2018, ordered alphabetically along the vertical axis with horizontal bars sized by population. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map the CSV data, with populations converted from thousands to absolute values. The SVG renders steelblue rectangles, and axes are appended to a translated group element. The page is styled with a plain CSS reset, and the chart loads data asynchronously via `d3.csv`.

NNukaShravanKumar
87% match