Inflation Rates _ Project Inc1

100%

Inflation Rates _ Project Inc1

✓ Published0🌍 Public

Last edited Apr 4, 2023

Created on Apr 4, 2023

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.

AI-generated description

Working with time

Temperature in degrees celcius in San Francisco for one week

MIT Licensed

Similar vizzes

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

75% match

Loading thumbnail…

Inflation Final Project

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.

Hhi4u2qzy@gmail.com

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

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

70% match

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

70% match

Loading thumbnail…

Fork of D3 course - working with time series

This visualization shows the daily Federal Funds borrowing rates over time, displayed as a smooth curved line chart with data points colored on a gradient from blue to red based on their value. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and rates to SVG coordinates, with custom axis components and a line path generated via `d3.line` with cardinal tension. The data is fetched from a CSV file containing historical rate values, and the chart includes interactive tooltips showing the exact date and rate for each point.

RRobFaj

69% match

Loading thumbnail…

ICE-7-4 Area Chart1

This area chart displays the U.S. Monthly Consumer Price Index (CPI) over time, with the shaded region emphasizing the trend and magnitude of inflation. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, filled path. Axes are created with `axisBottom` and `axisLeft`, and data is loaded via `csv` from a provided URL. The SVG rendering includes labeled axes and a title, with the area fill styled in maroon.

Hhossaphul

68% match

Loading thumbnail…

ICE-7 Line Chart

This example visualizes house prices over time using a line chart with a filled area beneath the curve, rendered as SVG in a React-based VizHub project. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to draw the smoothed trend, with axes from `axisBottom` and `axisLeft`. Data is loaded via `csv` from a remote GitHub Gist, parsed into `Date` and numeric cost values, and styled with CSS classes for bold black lines and a blue fill.

Aachyutanandmishra17@gmail.com

68% match