Skip to main content
SimilarExport ZIP
100%

Fork of MIAGE base

✓ Published0🌍 Public
Eemilienbf
Last edited Sep 26, 2022
Created on Sep 19, 2022
Forked from MIAGE base

A bar chart ranks 234 countries by 2022 population, drawn as vertical bars using D3 v5's `scaleBand` and `scaleLinear`. A button click sorts the data ascending by population and re-renders the bars, while hovering shows a tooltip with the exact value. It loads data via `csv` from a local `data.csv` file and renders as SVG with animated transitions.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of MIAGE base

A bar chart displays the 2022 population for countries worldwide, sorted alphabetically by country name along the x-axis. The chart reads population data from a local CSV file and renders it as SVG rectangles using D3 v4. The y-axis uses a linear scale, and the x-axis is a band scale with rotated labels for readability. A button triggers sorting of the bars by country name.

JJShellBach
93% match
Loading thumbnail…

Fork of MIAGE base

A bar chart displays 2022 population figures for countries from a CSV dataset, with bars sorted by country name. Users can click "Croissant" or "Decroissant" buttons, though the sorting logic is not implemented. The visualization uses D3 v5 with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG rectangles. Hovering over a bar triggers a tooltip showing the country name and population. The page also imports a local ES6 module and includes styling from an external CSS file.

JJuliette
93% match
Loading thumbnail…

Fork of MIAGE base

This example loads a CSV file of global population data, showing a bar chart where each country is represented by a static rectangle of fixed width and height. It imports D3 v5 functions like `select` and `csv` and renders shapes in an SVG. The code builds a single group element with rectangles, while the console logs each country’s name and 2022 population, demonstrating basic data import and SVG rendering with D3.

Aabdeldev504
85% match
Loading thumbnail…

Fork of barGraph

This bar chart displays the 2022 population for countries worldwide, with bar height mapped to population values and blue circles marking each data point. Users can re-sort the countries in ascending or descending order via two buttons. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, `transition()` for animated updates, and `mouseover` events to show population details in a tooltip. Data comes from a CSV file containing population figures across multiple decades. The SVG rendering includes rotated country labels for readability.

Ppatricknicholas27@gmail.com
84% match
Loading thumbnail…

Fork of barGraph

This visualization combines a bar chart and scatterplot overlay to display 2022 population data for countries, with interactive sorting buttons that reorder the data ascending or descending. The bars and circles transition smoothly using D3’s `.transition().duration()` methods, while hovering reveals tooltips with country and population details. Data is loaded via `d3.csv` from a local CSV file and rendered as SVG, with axes constructed using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`.

Jjmkdev9
83% match
Loading thumbnail…

Fork of barGraph

A bar chart displays each country's 2022 population, loading tabular data from a CSV file. Hovering over a bar triggers a tooltip showing the country name and population value. Clicking a button re-sorts the bars by population using a transition on x positions. The visualization is built with D3 v5, using `csv`, `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and positional transitions.

GGinnWG
82% match
Loading thumbnail…

Fork of barGraph

This bar chart displays the 2022 population for each country, sorted alphabetically on the x-axis with population values on the y-axis. It uses D3 v5 (d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisBottom) to render SVG rectangles, with a tooltip showing country name and population on hover. A button triggers `orderCountry()` to re-sort the bars in descending population order. Data comes from a local CSV file.

Ffkara09
82% match
Loading thumbnail…

MIAGE base

This example displays a bar chart of country populations for 2022, sourced from a CSV file. It uses D3 v5 to render the chart as an SVG, with a band scale for the x-axis and a linear scale for the y-axis. Mouseover interactions reveal a tooltip showing the country name and population. The code also imports a local ES6 module for a message, demonstrating VizHub’s capability to load D3 from UNPKG and use local modules.

BBerangerIcart
82% match