Historical Global GDP

100%

Historical Global GDP

✓ Published0🌍 Public

Last edited Sep 27, 2017

Created on Sep 25, 2017

A streamgraph shows the historical GDP of countries and regions from 1820 onward, with each colored band representing a geographic area. The chart uses D3 v4's stack layout with the wiggle offset and inside-out ordering to create the flowing shape, while d3-area-label positions labels within each band. Data comes from a CSV file with columns for individual countries and regional aggregates. The visualization renders as SVG, with hovering over a path turning it black and displaying its name in a tooltip.

AI-generated description

A StreamGraph visualization of Global CO2 Emissions from Fossil-Fuel Burning, Cement Manufacture, and Gas Flaring: 1751-2014 (Source: Source: Tom Boden, Bob Andres, Carbon Dioxide Information Analysis Center, Oak Ridge National Laboratory; Gregg Marland, Research Institute for Environment, Energy and Economics, Appalachian State University). Data from the Carbon Dioxide Information Analysis Center. Data preprocessing and conversion to CSV by Scott Judson via Data Table Summary - Global CO2 Emissions 1751-2014.

Uses d3-area-label to position labels.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/30e50fe82819ef73c6b8d9f2d31b99a8'>How Americans Spend Time</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/687de59a6d22fa139820e1786a697216'>Global CO2 Emissions 1751-2014</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart GDP by Country

This bubble chart visualizes GDP by country for 2016, using circle size to represent GDP value and color to indicate geographic region. The data comes from a World Bank CSV file loaded via `d3.csv`. The visualization is rendered using the `d3.pack` layout, which positions bubbles within the SVG canvas, with a tooltip displaying country names and formatted GDP values on hover. The code also uses `d3.hierarchy` with a `sum` accessor to calculate bubble areas, and `d3.scaleOrdinal` with `d3.schemeSet3` for region-based coloring.

663anp3ca

76% match

Loading thumbnail…

Bubble Chart GDP by Country

This bubble chart displays GDP by country for 2016, with each bubble’s size encoding the GDP value and its color indicating the region. The visualization is built with D3 v5 using the `d3.pack` layout and `d3.hierarchy` to structure the data, rendered as SVG circles with text labels. Tooltips appear on mouseover, showing the country name and formatted GDP. The data is loaded via `d3.csv` from a World Bank dataset hosted in a GitHub gist.

663anp3ca

75% 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

73% match

Loading thumbnail…

High Income countries total GDP data

A bar chart displays total GDP for high-income countries across time, with each bar representing a single year and height encoding the GDP value. The visualization uses the vega-lite-api library for chart specification, while d3.csv loads the dataset from a GitHub gist containing World Bank income-group GDP figures. Tooltips show precise GDP values formatted with SI prefixes when hovering over bars. The chart is styled with customized axis fonts and colors through a vega-lite config object, and rendered as a full-viewport SVG.

Sstevensmithj

73% match

Loading thumbnail…

Almost Final-4

This scatterplot visualizes GDP variation over time for multiple countries, with each dot colored by country and opacity highlighting a selected country while dimming others. Users click legend items to filter the visualization. The chart uses D3 v5 with SVG rendering, `scaleLinear` for axes, `scaleOrdinal` with `schemeSet2` for colors, and custom `scatterplot` and `colorLegend` modules. Data loads from a CSV file containing yearly GDP percentages.

MMukund Khandelwal

72% match

Loading thumbnail…

countries GDP in 2015 or before

This scatter plot visualizes countries' population and GDP from a 2015-or-earlier dataset, with each circle representing a country. The x-axis maps population in millions, while the y-axis shows GDP in millions of USD. The chart uses D3’s scaleLinear, extent, axisLeft, and axisBottom to construct axes. Circles are rendered via SVG, and each includes a title element showing detailed country data on hover. The reusable scatterPlot function, inspired by Towards Reusable Charts, is configured with margin, radius, and text value setters. The code loads CSV data from a GitHub repository using d3.csv.

KKerim

72% match

Loading thumbnail…

Area Chart

This area chart displays India's GDP in billions from 2011 to 2020, using a filled pink path with a cyan stroke over a time-based x-axis and linear y-axis. The visualization loads CSV data from a GitHub gist, parsing years as dates and GDP values as numbers. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a `curveBasis` interpolation to create the smooth shaded region. Margins, axis labels, and a title are positioned using SVG groups, with tick lines and labels styled via CSS.

Uubl2

71% 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

71% match