Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ppriyankab23
Last edited Dec 16, 2022
Created on Dec 16, 2022
Forked from HTML Starter

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
95% match
Loading thumbnail…

Untitled

This example shows GDP per capita for a selection of countries as a bar chart. Bars initially render in the order they appear in the data, with a transition animating their height on load. Users can hover over bars to highlight them in orange, and a checkbox below the chart sorts the bars in descending order by value. The visualization is built with React and D3 v4, using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering to SVG with mouseover event handlers.

Ppriyankab23
94% match
Loading thumbnail…

Untitled

This example visualizes the GDP per Capita of a selection of countries as animated bar charts, with interactivity provided by hovering over bars to see tooltips and clicking a checkbox to sort the values in descending order. The visualization is built using D3 v4 (loaded via UNPKG), rendering SVG elements, and fetching data from the Wasabi API. The code demonstrates importing from the `d3` module and local ES6 modules, using `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart.

EEklavya Jain
90% match
Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for Spain and Morocco. It uses D3.js v4 with an SVG rendering and React integration, featuring hover effects that highlight bars and display country and value labels, plus a checkbox that sorts the data in descending order. The chart animates bar transitions using D3 transitions with easing and includes axis labels formatted with dollar signs.

UUtsav Vachhani
88% match
Loading thumbnail…

Untitled

This example visualizes U.S. Gross Domestic Product data from 1947 to 2015 as a bar chart, with each bar representing a quarterly GDP value. The code fetches JSON data from a freeCodeCamp repository and uses D3 v7 scales, axes, and selection methods to render an SVG directly to the page. Bars are colored navy, with tooltips showing the date and value, while the x-axis displays dates and the y-axis shows GDP amounts. The visualization fills the entire browser window and dynamically scales based on viewport dimensions.

Aadventuresenglish.info@gmail.com
85% match
Loading thumbnail…

Untitled

This bar chart displays the population of eight countries, using a horizontal layout where each bar’s length corresponds to the population value. Built with D3 v7 and React, it renders to SVG via the `select` and `csv` APIs, scaling the x-axis with `scaleLinear` and the y-axis with `scaleBand`. Each bar is assigned a distinct color from a fixed array, with axes added using `axisLeft` and `axisBottom`.

Hharshb863
83% match
Loading thumbnail…

Untitled

A bar chart displays the 2022 population of countries from a CSV dataset, with each country represented as a vertical bar along a band scale. The chart uses D3 v4 to load the data, create SVG elements, and render axes. Hovering over a bar triggers a tooltip that shows the country name and population, using D3 event handling to position and populate the tooltip dynamically.

MMaeva B
82% match
Loading thumbnail…

Untitled

This example uses a bar and dot plot to rank countries by a single numeric value. The chart displays horizontal bars with overlaid circles, sorted in descending order, with a left axis for country names and a bottom axis for values. Built with React and D3 (v6.6.1), the code leverages `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG elements. Data is loaded asynchronously via `d3.csv` from a remote GitHub dataset, with bars and circles drawn using D3's `.join` operations.

Ssubratanp
82% match