Gist 6167722

100%

✓ Published0🌍 Public

Last edited Aug 6, 2013

Created on Aug 6, 2013

This example visualizes the financial crisis aid amounts used by EU member states from 2008 to 2011, breaking down total aid into categories like recapitalisation, guarantees, asset relief, and liquidity measures. It uses a treemap layout with `d3.layout.treemap` and `d3.scale.ordinal` for color encoding, displaying each country’s aid value as a percentage of its 2011 GDP. The chart is rendered using `d3.svg` and `d3.text` to load the CSV data from a gist, with labels showing country names and aid amounts in billions of euros.

AI-generated description

Similar vizzes

Loading thumbnail…

The Euro Debt Crisis

This visualization presents two chord diagrams comparing international debt relationships during the Euro crisis: one showing how much each country lends (creditors) and another showing how much each owes (debtors). Built with D3 v3, it uses the `d3.layout.chord` and `d3.svg.chord` APIs to render arcs and quadratic Bézier chords from a CSV matrix. The ordinal color scale highlights risk categories, and hover tooltips display exact amounts in billions.

Mmbostock

71% match

Loading thumbnail…

CS725 HW 4 BAR CHART

This bar chart displays the frequency of foreign aid donations by 18 countries between 2000 and 2010, with bar heights mapped to donation counts and each bar colored via a rainbow sequential scale. The y-axis ranges from 0 to 60 with 15 ticks, while the x-axis lists country names. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleSequential` with `interpolateRainbow` for coloring. Data comes from a TSV file processed with OpenRefine.

LLecy277

66% match

Loading thumbnail…

Gist 89566fbfb20d81fd7fe9

This interactive line chart tracks the exchange rates of various global currencies against the euro, with a dropdown menu to switch between different currency selections. The visualization displays a time series of daily rates, augmented by a red exponential moving average line that reveals underlying trends, while a crosshair with a trackball follows the mouse to show precise values for any date and rate pair. The chart is rendered as an SVG using the D3.js library, with grid lines, axis labels, and a legend. The code also incorporates the d3fc framework for chart components and a custom area chart beneath the line to emphasize the rate’s magnitude over time.

BBenHeubl

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

65% match

Loading thumbnail…

HW 4 Line chart

This line chart shows the total amount of United States foreign aid spending per year from 2002 to 2010, highlighting a sharp increase in 2009–2010. The chart uses a single teal line connecting points, with a time-scaled x-axis for years and a linear y-axis for dollar amounts. It is built with D3 v4, using `d3.tsv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with SVG paths for rendering.

LLecy277

64% match

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

64% match

Loading thumbnail…

D3 Multi Line Chart

This interactive D3 multi-line chart compares U.S. foreign assistance dollars across five global regions, with a radio-button toggle switching between economic and military aid datasets. The visualization plots yearly spending trends using colored lines, with axes formatted in millions and a hover tooltip for details. Built with React and SVG, it uses d3.csv to load remote data, d3.scaleOrdinal for region colors, d3.line with curveBasis for smooth paths, and transition.attrTween-style animation (via transition().duration()) when toggling datasets, updating the line geometry accordingly.

Ttheyaoxiao

64% match

Loading thumbnail…

Gist d6e714e97e5e937623a7

This visualization plots each country as a point positioned by latitude and longitude, with circle size representing total population and color indicating HIV/AIDS prevalence. The chart uses D3’s `d3.geoPath` and a geographic projection to place points over a world map background. Data is loaded from a CSV containing country statistics, and hover interactions reveal specific country details. The rendering relies on standard SVG elements with scales for sizing and color encoding, following a scatterplot-over-map approach.

LLTymn

64% match