Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published4🌍 Public

Last edited Jan 9, 2021

Created on Jan 9, 2021

This bar chart displays population estimates for ten countries, with each bar colored steel blue by default. Hovering a bar highlights it in red with a blue outline and displays a text label showing the country’s population in billions, using the `format` function from d3. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for ticks, with a custom Indian digit-grouping function in `format-india.js`.

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

89% match

Loading thumbnail…

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

86% match

Loading thumbnail…

Fork of SVG Starter

This bar chart displays population estimates for ten countries, ordered along the y-axis with population sizes extending horizontally. The visualization uses a CSV data source loaded via d3.csv, with d3.scaleLinear and d3.scaleBand for positioning. SVG rectangles are drawn and styled with steelblue, while d3.axisLeft and d3.axisBottom render the axes. The code leverages D3 v6 modules imported through ES6 syntax, applying margins and padding to structure the chart layout.

Rrajan1508

86% 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

85% match

Loading thumbnail…

Fork of Fork of Making A Bar Chart

This example displays a horizontal bar chart of country populations, with China and India leading and the remaining countries descending in size. The chart uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to generate axes. Rectangles are appended to an SVG and sized proportionally to population values, which are multiplied by 1000. The visualization is rendered entirely in SVG with a steelblue fill.

NNikithakatta30

84% match

Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays the population of ten countries, using horizontal bars where length corresponds to population size. Built with D3 v7, the visualization loads data from a CSV file and scales the population values by a thousand. The code employs d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and renders the chart as SVG with steelblue rectangles.

NNikithakatta30

84% match

Loading thumbnail…

Fork of Basic bar chart - data population India estimated 2019

This example shows estimated population data for Indian states and territories in 2019, displaying the last ten entries as a horizontal bar chart. The bars are rendered as SVG rectangles using D3 v6, with their widths scaled by a linear scale (`d3.scaleLinear`) mapping population values to pixel space. The data is loaded asynchronously from a CSV file via `d3.csv` from a GitHub gist, and the chart dimensions adapt to the browser window size. The code uses `d3.select`, `d3.extent`, and Promise-based async/await to handle data loading and rendering.

NNita

83% match

Loading thumbnail…

Fork of Q1.1

A horizontal bar chart shows the population of ten countries in the year 2000, using static SVG rectangles colored in steel blue. The visualization ranks countries by population value, with China and India leading the dataset. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis categories, and d3.axisBottom and d3.axisLeft to render the axes. The chart displays hardcoded population data and includes a title and x-axis label, with styling applied via external CSS.

Rragasrikakarla27@gmail.com

83% match