Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This example shows the top 12 countries by total capital-city population, aggregated from four data parts and displayed as a sorted bar chart. It uses D3 v7 APIs including `d3.tsv` to load tabular data, `d3.rollups` to group rows by country and sum their population values, and `d3.scaleBand`/`d3.scaleLinear` for the axes. SVG rectangles render the bars, with value labels and a title/subtitle, all within an 900×520 viewport. The chart is built with a single blue color (`#3b82f6`) and includes tooltips via appended `title` elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This D3.js v7 example visualizes country population and area data from a GitHub-hosted CSV file. It shows a bar chart of populations with value labels, alongside a data summary and a data table. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the SVG chart, plus `d3.format` for number formatting. The visualization also provides a computed summary of total population and the largest country by area.

Nnabeel.ahmed2003.na@gmail.com

83% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter 2

This example displays a horizontal bar chart of population by country for the top 10 countries, using data from the UN Population 2019 CSV. Built with React and D3 v7, it renders SVG elements including rectangles for bars, with axes created using `scaleBand` and `scaleLinear`. The chart includes a custom `AxisTop` with `d3.format` for tick labels and an `AxisLeft` for country names. Data is loaded via `d3.csv` and parsed in a `useData` hook.

LLeonardo Baron

82% match

Loading thumbnail…

Fork of HTML Starter

A horizontal bar chart displays population figures for ten countries in the year 2000, using yellow bars with green tick labels on a red axis grid. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles through reusable components. Axis formatting uses `d3.format` to abbreviate large numbers, and tooltips appear via SVG `<title>` elements.

Ssahithya.voleti@gmail.com

82% match

Loading thumbnail…

HTML Starter

This example displays a horizontal bar chart of country populations using D3 v5. It loads data from a CSV file and appends SVG rectangles scaled by population values. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` to render the country labels. A margin-based layout shifts the bars via an SVG `<g>` transform, with a 1000-person offset added to each population value before rendering.

Ttheodasilva

81% match

Loading thumbnail…

HTML Starter

Ttheodasilva

81% match

Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM

81% match

Loading thumbnail…

Fork of HTML Starter

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`.

Rrahool001

81% match

Loading thumbnail…

Fork of HTML Starter

This example visualizes the top 10 most populous countries using a simple bar chart-like layout, though the code snippet provided only shows the HTML structure and styling, not the JavaScript implementation. It relies on standard web technologies—HTML, CSS, and JavaScript—with the actual visualization likely rendered using a library like D3.js or similar, as indicated by the script reference to `bundle.js`. The page presents a clean, centered container with a title and a `#root` div where the chart is dynamically injected. The data source appears to be a hardcoded dataset of country populations, though the rendering logic is not shown in this fragment.

NNandini Maddula

80% match