Final Project- Multiple line chart

100%

Final Project- Multiple line chart

✓ Published0🌍 Public

Mmhzahdeh@dons.usfca.edu

Last edited Apr 7, 2025

Created on Feb 10, 2025

This visualization shows GDP per capita trends from 2019 to 2023 for five selected countries: the United States, India, Germany, Brazil, and China. The chart displays five polylines, one per country, with distinct colors and a legend identifying each line. The SVG rendering uses `d3.line()` to generate the paths and `d3.scalePoint()` for the x-axis years, while `d3.legendColor()` creates the color legend. Data is loaded from a CSV file via `d3.csv()` and processed into long format for plotting.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

project

A multi-line chart compares actual versus expected population figures for India, the USA, and China from 2015 to 2030. The visualization uses D3 v6 with SVG rendering within a React framework, with each country's actual and projected data drawn as distinct colored lines using `d3.line` and `d3.scaleTime`/`d3.scaleLinear` for axes. The code includes a tooltip and styles lines with the `.line` class. Data comes from a static CSV file containing yearly population values.

PPavan Nimmagadda

80% match

Loading thumbnail…

Almost Final-11

This visualization displays GDP variation over time for the USA and Germany, with each country represented by a distinct color from a categorical scale. Users can click on the color legend to highlight a specific country’s data points while dimming others. Built with D3 v5, the chart uses `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs to render an SVG scatterplot with interactive filtering, loading CSV data from a remote URL.

MMukund Khandelwal

79% match

Loading thumbnail…

Almost Final-1

This visualization plots GDP variation over time for the USA and Germany, with each country represented by a colored circle. Users can click legend items to highlight a specific country while dimming others. The chart uses D3 v5 with `scaleLinear`, `axisBottom`, and `axisLeft` to render the scatterplot and a custom `colorLegend` that supports interactive selection. Data is loaded asynchronously via `d3.csv` from an external file, and the visualization renders to SVG.

MMukund Khandelwal

79% match

Loading thumbnail…

Almost Final-10

This example visualizes GDP variation for the USA and Germany over time as a scatterplot, with each country’s annual percentage change in GDP plotted against the year. A categorical color legend allows viewers to highlight or filter a specific country by clicking, which adjusts the opacity of unselected points. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with a schemeSet2 color palette, and d3.axisBottom and d3.axisLeft for gridlines and labels. Data is loaded via d3.csv from a remote CSV file, and rendering is done using SVG elements.

MMukund Khandelwal

79% match

Loading thumbnail…

Almost Final-9

This scatterplot displays GDP variation over time for the USA and Germany, with a categorical color scale assigning each country a distinct color. An interactive legend allows users to click a country name to highlight its data points while fading the other nation's points, filtering the visualization. The chart is rendered with D3 v5 and SVG, using the `d3.scaleLinear` and `d3.scaleOrdinal` APIs for axes and color, while the legend and scatterplot are built from custom modular functions. Data is loaded from a CSV file via `d3.csv`.

MMukund Khandelwal

78% match

Loading thumbnail…

Fork of linechart

This line chart displays the population of five selected countries—India, the United States, China, Japan, and Germany—from 2011 to 2021. It loads comma-separated data via `d3.text`, parses it, and renders multiple lines using `d3.line` with `d3.curveLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend lists each country’s color from `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization uses an SVG rendering approach within a fixed-width container, labeling the y-axis in billions.

Ssrividyamadas@gmail.com

78% match

Loading thumbnail…

Almost Final-5

This scatterplot compares GDP variation between the USA and Germany over time, using D3.js v5 to render an SVG visualization. A color legend with clickable artist labels filters the data points, dimming unselected countries to an opacity of 0.05. The chart includes custom axes with gridlines and labels, driven by `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a CSV file via `csv()` and processed in `loadData.js`.

MMukund Khandelwal

78% match

Loading thumbnail…

Almost Final

A scatterplot shows GDP variation for the USA and Germany over time, with each country's data points colored using a categorical scale. Clicking a country in the accompanying color legend highlights its points and fades the others, allowing focused comparison. The visualization uses d3.csv to load data, d3.scaleLinear for axes, d3.scaleOrdinal with schemeSet2 for colors, and d3.axisLeft/axisBottom for tick marks, all rendered as SVG elements.

MMukund Khandelwal

77% match