Skip to main content
SimilarExport ZIP
100%

Loading US GDP Data with Interactive Color Legend and Line Chart

✓ Published0🌍 Public
SSeekerzero
Last edited Mar 30, 2023
Created on Feb 27, 2023

This interactive visualization displays US GDP data, showing annual levels and percentage changes over time with a line chart. A scatter plot uses color-coded circles to represent each year, grouped into decades via an interactive color legend that highlights or fades data points on hover. The code relies on D3 v7's `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, and `axisLeft/axisBottom/axisRight` modules to render the axes and chart. Data is fetched as CSV from the BEA via a GitHub raw URL and parsed with `csvParse` and `timeParse`.

AI-generated description

based on template from professor given, the colored circle represent the year level current ranged for every ten years, and the line represents the level change between each year.

dataset from: https://datahub.io/core/gdp-us

Gross Domestic Product of the United States (US GDP)

Gross Domestic Product (GDP) of the United States (US) both nominal and real on an annual and quarterly basis. Annual data is provided since 1930 and quarterly data since 1947. Both total GDP (levels) and annualized percentage change in GDP are provided. Both levels and changes are available both in current dollars (nominal GDP) and in chained 2009 dollars (real GDP). Data is sourced from US Government’s Bureau of Economic Analysis (BEA) and provided in standardized CSV.

Field Name Order Type (Format) Description
date 1 year The year
level-current 2 number GDP in billions of current dollars
level-chained 3 number GDP in billions of chained 2009 dollars
change-current 4 number GDP percent change based on current dollars
change-chained 5 number GDP percent change based on chained 2009 dollars

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot of Loading US GDP Data with axes

This example uses a D3.js scatter plot to visualize annual US GDP data, plotting the year on the x-axis against GDP in current dollars on the y-axis. The visualization loads data from a GitHub-hosted CSV file sourced from the Bureau of Economic Analysis. The code leverages D3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs to build scales and axes, with data parsed via `csvParse` and rendered as circles. A title labels the chart, and axes are annotated with descriptive text.

SSeekerzero
86% match
Loading thumbnail…

Scatter Plot of Loading US GDP Data

This scatter plot visualizes annual US GDP data, showing the relationship between year and GDP in current dollars. It uses D3 v7 to load data from a CSV file, parsing values for date and level-current, then draws circles positioned by linear scales for x and y axes. The visualization demonstrates asynchronous data fetching and SVG rendering.

SSeekerzero
84% match
Loading thumbnail…

Loading US GDP Data

This example demonstrates the asynchronous loading and parsing of a CSV file containing US GDP data, displaying the resulting data structure as JSON in a `<pre>` element. Initially showing "LOADING" and then the parsed array of objects, it fetches the dataset from a Gist URL, uses `d3.csvParse` to parse the CSV, and converts numeric fields like `date`, `level_current`, and `change_chained` to numbers. The visualization relies on the `d3` library for DOM selection and CSV parsing, with the data structured according to the BEA-sourced fields from datahub.io.

SSeekerzero
81% match
Loading thumbnail…

GDP Variation over time plot-2

This example displays GDP variation over time as a scatter plot, with each circle colored by year and an interactive legend that filters and highlights selected time periods. The visualization loads CSV data from an external URL and renders SVG elements using d3.v5, employing scaleOrdinal with schemeRdYlBu for categorical colors, axisBottom and axisLeft for axes, and a custom colorLegend module that responds to click events to toggle opacity and highlight datapoints. The scatterPlot component uses d3.scaleLinear for positioning, with grid lines and labels provided by d3 axes.

MMukund Khandelwal
79% match
Loading thumbnail…

Sample Line Chart

This sample line chart displays US GDP data from 1980 to 2020, drawing a smooth basis curve through the points. The code uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with curveBasis to generate the path. It loads data from a CSV hosted on GitHub, parses the numeric values, and renders the chart as SVG with red strokes and a pink background. The title and axis labels are added via d3 text elements.

MManasa891-git
79% match
Loading thumbnail…

GDP Variation over time plot

This visualization uses a scatter plot to show GDP variation over time for the US and Germany, with each circle representing a year’s GDP value. The chart includes labeled axes for Year and GDP, along with a title, and uses a linear scale for both dimensions. The code relies on d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.extent to render the SVG elements, while data is loaded asynchronously from a CSV file using d3.csv. Gridlines are drawn via tick sizes, and circles are styled with green fill and black strokes.

MMukund Khandelwal
78% 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
77% match
Loading thumbnail…

GDP Variation over time plot-2

This scatter plot shows GDP variation over time, with each circle representing a country-year observation. The color of each point corresponds to the year, using an ordinal color scale with a diverging RdYlBu color scheme. The visualization includes an interactive color legend that filters points by year through click events. Built with D3 v5, the example uses `d3.scaleOrdinal`, `d3.schemeRdYlBu`, and custom modules for the scatter plot and legend, rendering as SVG with data loaded from a CSV file.

MMukund Khandelwal
77% match