Almost Final-8

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`.

93% match

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`.

92% match

Almost Final-6

This scatterplot displays GDP variation over time for the USA and Germany, with points colored by country from a CSV file. Users can click a color legend to filter the visualization, dimming points from unselected countries. Built with D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` with `schemeSet2` for colors, and custom modules `scatterplot` and `colorLegend` to render SVG circles and interactive legend elements.

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.

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.

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.

Almost Final-7

This scatterplot shows GDP variation over time for the USA and Germany, with a legend filtering data by country. The visualization uses d3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and custom `colorLegend` and `scatterplot` modules to render SVG circles. Users can click legend items to highlight a specific country’s data points while dimming others. Data is loaded via `csv` from an external URL, with axes labeled and gridlines styled through CSS.

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.