Final Project

100%

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

This visualization displays seven bar and scatter plots comparing countries by education enrollment, minimum wage, GDP, and labor force participation, with each figure highlighting factors like tertiary education rates or primary enrollment levels. Built with D3 v7, the charts load CSV data and render SVG elements including axes, bars, circles, legends, and hover interactions that change element colors. The scatter plot encodes labor force participation through circle radius, while bar charts use color-coded categories with underlined titles for each figure.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

csce5320finalfinalproject

This example presents two side-by-side bar charts ranking the top ten countries by GDP per capita and by gross primary education enrollment. The charts use D3.js version 6 to load CSV data from remote GitHub sources and render scalable vector graphics (SVG). Each bar chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for ticks. Interactive tooltips appear on bar mouseover, showing the country name and the corresponding metric value.

Ssriharshakondakindi@gmail.com

82% match

Loading thumbnail…

Project

Two side-by-side bar charts compare the top ten countries by GDP per capita and by gross primary education enrollment. The first chart uses steelblue bars to rank countries by economic output, while the second displays education enrollment figures. Both visualizations are built with D3 v6 and render SVG bar charts with axes and mouseover tooltips. The data is loaded from three separate CSV files using `Promise.all` and `d3.csv`.

Ppslharika@gmail.com

80% match

Loading thumbnail…

Final Project

This example visualizes labor force information for college graduates, filtering the data by major category and STEM status. The main chart is an animated scatter plot, where the y-axis is categorical and the x-axis is a selected numeric measure. Users can interact by changing the x-axis through a dropdown menu and clicking legend items to filter the data and a supporting table. The visualization is built with D3 v5, using SVG and transitions for the animation. Legend selection triggers an update to the data table, and a tooltip appears on mouseover. The rendering also applies a mix-blend mode to the circles, and the dataset is loaded from a CSV file.

YYF

80% match

Loading thumbnail…

Final Project

This visualization presents worldwide export data from 2000–2016 as an animated scatterplot, with each circle representing a country and colored by indicator category. Users can dynamically switch the x- and y-axis metrics via dropdown menus, and clicking the color legend highlights or dims categories. The plot uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and transitions each circle’s radius from 0 to 10 over two seconds with staggered delays. A hover tooltip displays the reporter country name, while SVG rendering updates axes and legend selections.

Vveagy

80% match

Loading thumbnail…

Final Project

This interactive scatterplot visualizes worldwide export indicator values across countries, with each circle representing a nation. Users select which indicators to compare on the x and y axes via dropdown menus. The d3.v5 visualization uses d3.scaleOrdinal for color encoding by indicator category, and a legend allows filtering by clicking categories. A tooltip displays country names on mouseover, while the scatterplot module animates circle transitions over 2 seconds as data updates, loading from the 2000-2016 Worldwide Exports CSV dataset.

Vveagy

78% match

Loading thumbnail…

Project prototype 10/17

This interactive scatter plot visualizes earnings and labor force data for college graduates by major, sourced from FiveThirtyEight. Users select X and Y axes from dropdown menus, exploring relationships between variables like median salary and unemployment rate. Circles are colored by major category with a clickable color legend that filters selections. The visualization uses d3.csv, d3.scaleLinear, axis generators, and SVG animations with transitions, rendering interactively within a single-page d3.v5 application.

YYF

77% match

Loading thumbnail…

Project

This interactive bar chart visualizes country-level data from a CSV file, allowing users to filter by continent and select among numerous socioeconomic metrics. The visualization updates dynamically, showing one bar per country, with bars sortable by population in ascending or descending order. Built with D3 v5, it uses `scaleBand`, `scaleLinear`, and `d3.select` for DOM manipulation, while rendering as SVG with animated transitions. Dropdown menus and buttons control the displayed subset, leveraging D3's data-binding capabilities.

Ppatricknicholas27@gmail.com

77% match

Loading thumbnail…

Final Project V1

This interactive scatter plot visualizes the Human Development Index dataset, allowing users to compare inequality-adjusted income against inequality in education percentages. The visualization uses React with D3 v5 scales and rendering via SVG, featuring dropdown menus to switch between different data attributes. Data loads asynchronously from a CSV file using d3.csv, with axes rendered through custom React components and tooltips provided by SVG circle titles.

Llubin-liu

76% match