Skip to main content
SimilarExport ZIP
100%

Inflation Final Project

✓ Published0🌍 Public
Hhi4u2qzy@gmail.com
Last edited Feb 19, 2024
Created on Dec 24, 2023

This interactive visualization explores global inflation trends from 1970 to 2022 using IMF data. Users can compare countries and inflation types, with options to switch between horizontal and horizon chart views. The horizon chart, built with d3.area and custom clipping paths, displays time-series data across multiple countries in a compact, layered format. Interactive controls allow zooming, panning, and applying a square-root transformation to the y-axis, while dropdown menus filter by country and inflation metric. The SVG rendering uses d3.scalePoint for the x-axis and d3.scaleLinear for the y-axis.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of line graph group-4

This visualization displays inflation rates for 12 countries using a violet line on an SVG chart, with the x-axis showing country names and the y-axis showing inflation values. The chart loads data from a CSV file and renders axes, grid lines, and a thick 6-pixel line using d3.scaleBand, d3.scaleLinear, d3.line, and d3.axisLeft. A blue axis label pair marks the axes as “country” and “inflation,” while text elements position the labels on the chart. The code applies a modified stylesheet that increases font sizes for axis text.

SSurikanti Swathi
74% match
Loading thumbnail…

line graph group-4

This line graph visualizes inflation rates across countries, with each country positioned along the x-axis and its inflation value plotted on the y-axis. The chart uses a violet, six-pixel-wide line to connect all data points, highlighting the variation in inflation across nations. It loads data from a CSV file and renders an SVG using d3.csv, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the path. Axis labels and titles are included, with the graph built in a React framework using D3 v7.

Ppvreswar7@gmail.com
73% match
Loading thumbnail…

Fork of Fork of Line Chart Group-4

This example displays a line chart of inflation rates across countries, with country names on the x-axis and inflation values on the y-axis. The chart uses d3.scaleTime despite the categorical x-axis labels, d3.scaleLinear for the y-axis, and d3.line to generate a red path connecting data points. Axis labels and a title are added via SVG text elements. Data is loaded asynchronously from a remote CSV using d3.csv, with inflation values coerced to numbers and dates parsed before rendering.

Ppvreswar7@gmail.com
73% match
Loading thumbnail…

Fork of Line Chart Group-4

This visualization shows poverty inflation trends across countries as a line chart. A single red line maps inflation values over time, with the country name on the x-axis and inflation on the y-axis. The code uses D3 v5 functions like `d3.select` to render an SVG, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` to generate the path. Data is loaded from a CSV file via `d3.csv`, with the inflation column converted to numeric values.

SSurikanti Swathi
71% match
Loading thumbnail…

Bonus ICE - Interactive Bar Chart

This interactive bar chart visualizes the current inflation rates of G20 countries as of March 2023. The chart displays each country’s rate as a colored bar, with values labeled directly atop each bar. Upon hovering over a bar, the chart highlights that bar, draws a dashed reference line at its value, and shows the percentage divergence of every other country relative to the selected one. The visualization is built using React with D3.js v5, rendering SVG elements with animated transitions triggered by mouse events. The data originates from the Stack Overflow developer survey.

KKevin Raj
71% match
Loading thumbnail…

Inflation Rates _ Project Inc1

This visualization displays the 5-year inflation rate (T5YIE) over time as a smooth, curving line with colored dots marking each data point. The line uses a gradient stroke, while the circles are colored from blue to orange to red based on their position within the value range, with tooltips showing the date and rounded rate. Built with React and D3 v7, the code loads CSV data, applies time and linear scales, and renders the chart as SVG with custom axis components.

RRobFaj
70% match
Loading thumbnail…

Final Project

This visualization presents worldwide export data from 2000–2016 as an animated scatterplot, with each circle representing a country and colored by indicator category. Users can dynamically switch the x- and y-axis metrics via dropdown menus, and clicking the color legend highlights or dims categories. The plot uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and transitions each circle’s radius from 0 to 10 over two seconds with staggered delays. A hover tooltip displays the reporter country name, while SVG rendering updates axes and legend selections.

Vveagy
70% match
Loading thumbnail…

Fork of Final project

This interactive visualization explores global happiness data (2015–2019) across multiple dimensions, including economy, family, health, freedom, trust, and generosity. It presents a choropleth world map colored by selected metrics, a leaderboard for ranking countries, a detail view for individual country comparisons, and a correlation matrix between factors. Users can switch views, filter by year or region, and adjust rank ranges. Built with D3 v7, it uses `d3.geoPath` with Natural Earth projections for the map, `d3.scaleSequential` for color encoding, and animated transitions for temporal changes, rendering in SVG.

Sstanley.shen2003@gmail.com
69% match