Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Nnabeel.ahmed2003.na@gmail.com
Last edited Oct 6, 2025
Created on Oct 6, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
87% 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
86% match
Loading thumbnail…

Fork of HTML Starter

This example shows a horizontal bar chart of population data for 20 countries from 2010, using React with D3 v5 for scales and axes. It loads CSV data via `d3.csv` and renders SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The chart includes formatted tick labels using `d3.format` and displays a custom tooltip on each bar through SVG `<title>` elements. The visualization demonstrates a basic data-loading workflow with `useEffect` and `useState`.

Ssahithya.voleti@gmail.com
86% match
Loading thumbnail…

Fork of Fork of HTML Starter

This bar chart displays country populations with a mouseover effect that highlights the bar in red with a blue stroke and displays a text label showing the country name and formatted population (e.g., "China has Population of 1.42B"). The visualization uses D3 v6 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` for interactivity. Data loads from a CSV via `d3.csv`, with populations multiplied by 1000, and renders as SVG rectangles sized from the scales.

HHaowenWeiJohn
86% match
Loading thumbnail…

HTML Starter

This example shows a horizontal bar chart of population by country using a small CSV dataset. The code loads data with `d3.csv`, scales the population values, and renders SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It uses `axisLeft` and `axisBottom` for tick marks, with a steelblue fill for bars. D3 v6 is imported from the npm package, and the chart is built imperatively by appending elements to an SVG container.

Nnouralkhoury
86% 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
85% 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
85% match
Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter demonstrates a minimal bar chart that displays population data for several countries, sourced from a local CSV file. The visualization maps each country to a rectangle, with the height and width fixed while the data is read and logged. Built with d3.v7, the example uses `csv`, `scaleLinear`, `max`, and `select` APIs to parse data and prepare scales, though the rendered rectangles do not yet reflect the data values. The chart is drawn as SVG within a 960x500 canvas, with the data population values multiplied by 1000 during preprocessing.

SSudipta-15
85% match