Skip to main content
SimilarExport ZIP
100%

demo

✓ Published1🌍 Public
Vvenkatabhaskaratetali@my.unt.edu
Last edited Apr 27, 2024
Created on Apr 25, 2024

This interactive D3.js visualization displays GDP per capita trends from 1960 to 2023 for multiple countries using a dataset loaded from a GitHub CSV file. It renders grouped bar charts for each country-year combination, with axes, dashed grid lines, and hover tooltips to highlight values. The code uses D3 v7’s `d3.csv`, `d3.scalePoint`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeCategory10` for color encoding, producing an animated SVG view of economic changes over time.

AI-generated description
MIT Licensed

Similar vizzes

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

GDP

This visualization displays GDP values by country as horizontal bars. Built with D3 v7, it loads CSV data from a GitHub repository using `d3.csv`, then maps country names to the x-axis and GDP values to the y-axis with linear and band scales. Bars change color on hover, and a tooltip shows the country name and GDP value. The SVG chart is rendered with rotated x-axis labels for readability, with axes styled via CSS classes.

Aadithiarikatla@gmail.com
81% match
Loading thumbnail…

Untitled

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.

Ppriyankab23
81% match
Loading thumbnail…

assignment 6

This interactive D3.js visualization explores relationships between GDP per capita, CO2 emissions per capita, population, and renewable energy adoption across countries from 2018–2023. Three modes—a 2D scatterplot, small multiples by region, and animated year-by-year transitions—allow comparison of temporal trends. The SVG rendering uses d3.scaleOrdinal, d3.scaleSqrt, and d3.extent for consistent scales, with tooltips featuring configurable delay and a race timer animation. Data comes from a CSV file loaded via d3.csv.

Rrithwikjadala2003@gmail.com
81% match
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
80% 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
79% match
Loading thumbnail…

6th visualisation 1

A responsive scatter plot visualizes the relationship between population and GDP across countries, coloring each point by region and providing hover tooltips with country details. It uses d3.csv to load an external dataset, then d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and a d3.scaleOrdinal with d3.schemeCategory10 for regional colors. The SVG output includes labeled axes, a title, and a legend, with all elements rendered via standard D3 data joins.

Vvenkatabhaskaratetali@my.unt.edu
79% match
Loading thumbnail…

Activity6_tutorial3

This interactive scatter plot visualizes the relationship between GDP per capita and life expectancy, with each circle representing a country and color encoding the country’s identity. Built with D3 v7, it loads a gapminder CSV, uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring, and renders axes via `d3.axisBottom` and `d3.axisLeft`. The SVG is sized at 800×600 pixels, with circles plotted using `xScale` and `yScale` mappings.

Cchandrikachowdary867@gmail.com
79% match