csce5320finalfinalproject

100%

csce5320finalfinalproject

✓ Published0🌍 Public

Last edited Apr 25, 2024

Created on Apr 25, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

harsha new

Two side-by-side bar charts compare top-ten country rankings from separate datasets. The first shows GDP per capita using `d3.scaleBand` and `d3.scaleLinear`, with hover tooltips displaying country and value. The second visualizes gross primary education enrollment, also as ranked bars. Both use D3 v6 with SVG rendering, load CSV data via `d3.csv`, and include rotated axis labels for readability.

Vvikramkotlo9@gmail.com

86% match

Loading thumbnail…

Final Project

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.

BBibek Lamsal

82% match

Loading thumbnail…

Bar Chart Project

This bar chart displays the top ten economies by country, with bars scaled to represent economic values in thousands. Built with D3 v5, the visualization uses `d3.csv` to load data from a CSV file, `scaleLinear` for the x-axis, and `scaleBand` for categorical y-axis positioning. The SVG rendering includes axes via `axisLeft` and `axisBottom`, while rectangular elements are appended and sized programmatically. The chart, based on Curran Kelleher’s tutorial, is entirely client-side with no interaction.

Iisidro12345

80% match

Loading thumbnail…

Fork of Tutorial 1

This is a horizontal bar chart showing the populations of the top 10 countries in the year 2000. Built with D3 v7, the visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The bars are rendered as SVGs using `d3.axisBottom`, `d3.axisLeft`, and `d3.selectAll` to draw rectangles. Data is loaded asynchronously via `d3.csv` from a remote GitHub repository.

Pperamranji

79% match

Loading thumbnail…

Activity6_task1

This example displays a horizontal bar chart of the top ten most populous countries in the year 2000, ranked by population. The chart, rendered as an SVG, uses D3 v5 to load CSV data from a remote gist and sorts it by the 2000 population field. The visualization consists of green bars drawn via `d3.selectAll('rect')` and `d3.scaleBand` for the categorical country axis, while a linear scale (`d3.scaleLinear`) maps population values to bar widths. Axis ticks are formatted with `d3.axisBottom` and `d3.format('.2s')` for compact notation.

Ssivachandraramanaidu.vnof52@gmail.com

79% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most populous countries, with a focus on their GDP values using horizontal bars. The visualization is rendered as an SVG using React and D3.js, with the data loaded from a CSV file via the `d3.csv` API. The code constructs both linear and band scales using `d3.scaleLinear` and `d3.scaleBand`, and manually maps data points to SVG rectangles, with axes and tick labels.

SSRI RAM REDDY KOTERU

79% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of GDP for ten countries, with the bars sorted by value and labeled. The chart uses a linear scale for the GDP axis and a band scale for the countries, rendering as SVG within a 960x500 canvas. Built with D3 v5, it relies on `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and formats GDP ticks via D3's `format`. Data is loaded from a CSV file with `d3.csv`.

SShanthi Acharya

79% match