Skip to main content
SimilarExport ZIP
100%

Fork of Vanilla D3 Vibecoding Template

✓ Published0🌍 Public
AAnurup Reddy
Last edited Oct 20, 2025
Created on Oct 19, 2025

This page displays country-level trends in Population, GDP, and Internet Users over time for a selected country (China), shown in two charts. The first is a multi-series line chart, and the second combines bar and line mark types for comparison. Both are rendered as SVG. The example uses d3.tsv to load the data, and defines scales, axes, and marks via the d3.v7 API, including `scaleLinear`, `scaleBand`, `axisBottom`, and `line`. A legend is drawn manually with SVG elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Example

A small multiples line chart shows population growth from 1950 to 2015 for China, India, and the U.S. It uses D3 v3 with SVG, `d3.svg.line`, `d3.time.scale`, and `d3.legend.color`, rendering colored strokes per country. The y-axis uses a custom SI format (B for billions), and data loads from a CSV via `d3.csv`.

Pprincit
78% match
Loading thumbnail…

Fork of Activity_7.2

This stacked area chart shows population trends for China, India, the USA, and Indonesia from 1960 to 2020. It uses d3.stack, d3.area, and d3.scaleTime with annotated dots at five-year intervals on a light gray grid. Data is loaded as CSV from a GitHub gist and rendered as SVG with d3-axis for tick marks and a legend. Each country is assigned a distinct fill color with 70% opacity.

TThai Ha Dang
78% 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
78% match
Loading thumbnail…

D3

A horizontal bar chart displays population estimates for ten countries, sorted from China to Mexico, with bars extending from a linear scale and country names on a band scale. Data is loaded from a CSV and multiplied by 1,000 to reflect full population figures. The SVG is rendered using D3 v5, employing `d3.scaleLinear`, `d3.scaleBand`, and axes with custom tick formatting that abbreviates large numbers (e.g., “1.42B”). Grid lines and axis labels are styled via CSS and D3’s `axisBottom` and `axisLeft`.

KKyllVis
77% 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
77% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This area chart displays population trends for the world and major regions from 1750 to 2150, using an SVG rendered with D3.js. The code imports D3 via ES6 modules, loads CSV data from a GitHub gist, and parses years with `d3.timeParse`. It applies `d3.area` with a monotone curve, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleOrdinal` for categorical coloring. Legends and a title are appended as SVG elements, demonstrating modular chart configuration with D3 methods.

Aamulyabhagwat1999@gmail.com
77% match
Loading thumbnail…

Fork of Line Chart

This visualization presents a line chart of population over time for different countries, with the year on the x-axis and current population on the y-axis. The code uses d3.csv to load population data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data, and d3.line to generate the path. The SVG rendering includes axis labels and a title, with the line path styled in red via CSS. The example demonstrates a straightforward data-driven chart using D3 v5.

0057SatvikDamera
76% match
Loading thumbnail…

Fork of Fork of Fork of Customizing Axes

This bar chart displays the populations of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, building on a tutorial by Curran Kelleher. It demonstrates customizing axes by applying a `scaleBand` for country labels and a `scaleLinear` for population values, using `axisBottom` and `axisLeft` with custom tick formatting that abbreviates numbers (e.g., converting “G” to “B” for billions). The chart also removes default grid lines and adds styled axis labels and titles via CSS.

WWangJiaCheng1999
76% match