Fork of barGraph

100%

Fork of barGraph

✓ Published0🌍 Public

Last edited Apr 6, 2023

Created on Apr 6, 2023

Forked from barGraph

This example shows a bar chart of country population data, where users can sort bars in ascending or descending order by clicking buttons. The visualization reads population figures from a CSV file and renders them as SVG rectangles using D3 v5. The code also includes an HTML tooltip div for potential hover interactions. Data spans multiple years and includes country metadata like continent and capital, though only the population values are currently displayed.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of barGraph

This example shows a bar chart of country populations, which can be sorted in ascending or descending order via buttons. The chart uses D3's `scaleBand` and `scaleLinear` for axes, and displays tooltips with population and country names on hover. Data is loaded from a CSV file using `csv`, and the SVG rendering uses D3's `select`, `axisBottom`, and `axisLeft`. The code is written as an ES6 module, importing functions like `max` and `scaleBand` directly from D3.

IIndira120

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

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

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

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

90% match

Loading thumbnail…

Fork of barGraph

This visualization combines a bar chart and scatter plot overlay to display 2022 population data for countries, with each circle positioned atop its corresponding bar to highlight population values. Users can sort the data ascending or descending via buttons, triggering animated transitions. The chart uses D3 v5 with `scaleBand` and `scaleLinear` axes, `axisLeft` with negative tick sizes, and `transition` for smooth updates. Data comes from a CSV file, rendered as SVG with tooltips showing country and population on mouseover.

Zzeyneb.mhamedi@gmail.com

90% match

Loading thumbnail…

Fork of barGraph

This interactive bar chart displays the 2022 population for each country listed in a CSV file, with controls for ascending or descending sort. Built with D3.js v5, it renders SVG rects and circles, and includes tooltips on mouseover. The animation uses D3's `transition().duration(500)` to update the visual when sorting, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

BBomkerss

89% match

Loading thumbnail…

Fork of barGraph

This fork of a bar chart visualizes population data from a CSV file, displaying each country as a circle on an SVG canvas. The chart uses D3 v5, loading data via the `csv` function and manipulating SVG elements through the `select` API. Hovering over a circle turns it black, as defined in the CSS. The visualization presents the dataset without additional encoding, showing raw data points for each country.

MMathieuZenone

89% match