Skip to main content
SimilarExport ZIP
100%

Scatter Plot of Loading US GDP Data with axes

✓ Published1🌍 Public
SSeekerzero
Last edited Feb 20, 2023
Created on Feb 20, 2023

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.

AI-generated description

based on template from professor given.

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

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
93% match
Loading thumbnail…

Loading US GDP Data with Interactive Color Legend and Line Chart

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

SSeekerzero
86% 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
82% 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
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…

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Aadventuresenglish.info@gmail.com
78% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes global GDP data as a responsive scatter plot using Chart.js, rendering points on a canvas. It shows yearly GDP values fetched from a CSV file hosted on GitHub, with point colors encoding value ranges: orange below 30 trillion, blue between 30 and 60 trillion, and green above 60 trillion. The code parses the CSV with `split` and `parseInt`/`parseFloat`, filters invalid rows, and configures axes labeled "Year" and "Value". The chart uses the `scatter` type, with `backgroundColor` set per data point for categorical coloring.

RRakesh Kumar Chekuri
75% 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
75% match