Exercise Module 4

100%

Exercise Module 4

✓ Published0🌍 Public

Last edited Apr 7, 2015

Created on Apr 7, 2015

This chart compares GDP per capita (left) and the top 1%'s share of income (right) for five countries in 2010, using side-by-side horizontal bar charts. The bars are sorted by GDP per capita, with a shared ordinal y-axis for country names. Built with D3 v3 and rendered as SVG, it encodes each measure with a linear scale and provides hover tooltips.

AI-generated description

Similar vizzes

Loading thumbnail…

Exercise Module 2

This example compares GDP per capita and the top 1%’s share of income for five countries using two side-by-side bar charts rendered as SVG. Each bar’s width encodes the respective measure, and hovering reveals a tooltip with the country name and value. The data, loaded from a CSV file, is sorted by GDP per capita before rendering. The visualization uses D3 v3 to bind data, create rectangles with rounded corners, and append title elements for interactivity.

Aamerval

92% match

Loading thumbnail…

GDP Average Chart

This D3.js bar chart visualizes the 2023 GDP per capita for the top 50 countries, using a green circle for each nation plotted along a categorical x-axis and a linear y-axis. Circles are positioned using `d3.scaleBand` and `d3.scaleLinear`, with interactive tooltips revealing the country name and GDP on hover. The SVG chart, built with `d3.svg` and `d3.axisBottom`/`d3.axisLeft`, reads data from the included `TopGDPCountries.csv` file, rotating x-axis labels for readability. Data originates from Worlddata.info.

Mmhzahdeh@dons.usfca.edu

82% match

Loading thumbnail…

Pie Chart of top 10 countries in terms of GDP

This pie chart visualizes the GDPs of the top 10 countries, with each slice labeled by its value in thousands and a legend listing country names and corresponding figures. The chart uses d3.pie() and d3.arc() to generate the SVG paths, with d3.scaleOrdinal assigning colors to each segment. Data is loaded via d3.csv from a GitHub gist, and d3.format is applied to abbreviate numbers. Text labels are positioned using the arc centroid method.

SSRI RAM REDDY KOTERU

76% match

Loading thumbnail…

Population of top 10 countries

This bar chart ranks the top 10 countries by nominal GDP, using horizontal bars sorted by value. It is rendered as SVG with D3 v5, using `csv` to load the data, `scaleLinear` and `scaleBand` for axes, and `axisLeft` and `axisBottom` for ticks. The bars are drawn as `rect` elements with steelblue fill, and the data comes from `data.csv`.

KKazushige Okuma

75% match

Loading thumbnail…

Top 1% share of income in selected countries

The visualization tracks the share of national income held by the top 1% across twelve countries from 1910 to 2010, revealing divergent long-term trends such as the U-shaped pattern in the US and UK versus flatter trajectories in Denmark and Japan. It uses D3.js with an SVG line chart, where each country is drawn as a separate path via `d3.line` and `d3.axisBottom` for the time axis. The data comes from the provided CSV files, with missing values handled by filtering to a complete subset for the main series.

Aamerval

75% match

Loading thumbnail…

area chart

This area chart displays the top 10 countries by GDP in billions, with countries plotted along the x-axis and their GDP values along the y-axis. The chart renders a single filled path using the `d3.area` generator, which creates the area shape between the baseline and the GDP values. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes added via `d3.axisBottom` and `d3.axisLeft`. The data is hardcoded as JavaScript objects, and the SVG output is generated entirely with D3 v7.

Nnitishsurneni@gmail.com

75% match

Loading thumbnail…

Activity6_Q3

This scatter plot shows the relationship between GDP per capita (in billions) and life expectancy for countries in 2015, sourced from a GitHub-hosted GDP dataset. It uses d3.csv to load the data, scales the GDP axis logarithmically via d3.scaleLog, and colors points using d3.scaleOrdinal with d3.schemeCategory10. SVG circles are rendered with D3's data join, and hover interactions display a tooltip showing country name, GDP, and life expectancy. The axes are labeled using d3.axisBottom and d3.axisLeft.

VVidya Lakshmi Chitturi

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

74% match