Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Aadventuresenglish.info@gmail.com
Last edited Nov 28, 2023
Created on Nov 28, 2023
Forked from LeWitt Circle

This example visualizes U.S. Gross Domestic Product data from 1947 to 2015 as a bar chart, with each bar representing a quarterly GDP value. The code fetches JSON data from a freeCodeCamp repository and uses D3 v7 scales, axes, and selection methods to render an SVG directly to the page. Bars are colored navy, with tooltips showing the date and value, while the x-axis displays dates and the y-axis shows GDP amounts. The visualization fills the entire browser window and dynamically scales based on viewport dimensions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23
85% match
Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
84% match
Loading thumbnail…

United State GDP

This D3.js v4 visualization displays the quarterly gross domestic product of the United States from 1947 to 2015 as a series of vertical bars. An interactive tooltip reveals the exact date and GDP value in billions of dollars for each quarter. The chart uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Data is sourced from the FreeCodeCamp GDP-data JSON file hosted on GitHub. Animated transitions enhance the tooltip and overlay effects.

Vvaynexie
84% match
Loading thumbnail…

United States GDP

A bar chart displays quarterly United States GDP growth from 1947 to 2015, with each bar’s height representing billions of dollars and hovering revealing a tooltip with the exact value. The visualization uses D3 v5 to load JSON data from FreeCodeCamp’s GitHub repository, scales the GDP values with `d3.scaleLinear`, and renders axis ticks via `d3.axisBottom` and `d3.axisLeft`. Bars are appended as SVG `rect` elements, animated through mouseover and mouseout transitions that show an overlay and tooltip.

Vvaynexie
83% match
Loading thumbnail…

Visualize Data with a Bar Chart FCC

This example shows quarterly U.S. GDP data from the FreeCodeCamp tutorial dataset as a bar chart. Each bar represents a quarter, with the x-axis mapped to time and the y-axis to GDP value. The visualization uses React and D3 v7, building scales with `scaleTime` and `scaleLinear`, and manually rendering SVG ticks and bars rather than using D3’s axis generator. The data is fetched asynchronously via `json()`, and bars are drawn as SVG rectangles, with custom tick components for both axes.

SSubliminal_[var]
83% match
Loading thumbnail…

United States GDP [1947-2015] - Bar Chart

This bar chart displays the quarterly United States GDP from 1947 to 2015, with bars colored in a muted green that highlight on hover. The visualization uses D3 scales including scaleTime and scaleLinear to map dates and GDP values, while React components render the SVG elements. The chart includes axes with formatted ticks, a tooltip that appears on mouse hover showing the quarter and GDP value in trillions or billions of USD, and data loaded from a freeCodeCamp JSON source.

MMohammed Banani | MbDev
83% match
Loading thumbnail…

Untitled

This example visualizes the GDP per Capita of a selection of countries as animated bar charts, with interactivity provided by hovering over bars to see tooltips and clicking a checkbox to sort the values in descending order. The visualization is built using D3 v4 (loaded via UNPKG), rendering SVG elements, and fetching data from the Wasabi API. The code demonstrates importing from the `d3` module and local ES6 modules, using `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart.

EEklavya Jain
83% match
Loading thumbnail…

fcc-d3-01

A bar chart visualizes the quarterly United States GDP data from a freeCodeCamp dataset. The chart uses D3.v7 scales and SVG rendering within a React component to map dates and GDP values onto axes. Each bar is colored cadet blue and turns white on hover, while a tooltip displays the specific quarter and GDP value. The visualization includes axis labels and tick marks for both the time-based x-axis and the linear y-axis.

SSiddharthMittal07
83% match