Skip to main content
100%

CPI change

✓ Published0🌍 Public
Aajzeigert
Last edited Sep 3, 2015
Created on Sep 3, 2015

This visualization shows the yearly percentage change in the U.S. Consumer Price Index for various food categories from 1974 to 1995. Rendered as an SVG with D3.v3, the chart uses a small-multiple line graph layout where each food category is plotted over time, with a brushable timeline to explore the data. The dataset is sourced from a gist by ajzeigert and includes categories such as meats, dairy, fruits and vegetables, and cereals.

AI-generated description

Similar vizzes

Loading thumbnail…

Loading CSV Data with D3

The visualization displays historical U.S. Consumer Price Index (CPI) data from 1974 to 2014, plotting annual percentage changes for food categories such as all food, food away from home, food at home, meats, poultry, eggs, and dairy products. Using D3 v3 with SVG rendering, the example demonstrates how to load and parse the CSV dataset, then map the year columns and category rows into a multi-series line chart. The graphic includes axes, gridlines, and a legend to differentiate the food categories, showing inflation trends over four decades. It serves primarily as a demonstration of D3's CSV loading and data-binding capabilities.

Aajzeigert
83% match
Loading thumbnail…

Consumer Price Index for food, 1974-2014; Source: USDA

The chart tracks annual percentage changes in the Consumer Price Index for food from 1974 to 2014, comparing overall food prices with food at home, food away from home, and specific categories like meats, dairy, and eggs. Rendered as a multi-line chart, the visualization uses a distinct line for each item, with a legend to identify categories, making it easy to compare trends and volatility across decades. The data, sourced from the USDA, highlights spikes such as the 1970s inflation era and notable swings in egg prices. The chart is designed with clear axis labels and a title, providing a straightforward view of how food price inflation has varied by category over 40 years.

Aajzeigert
79% match
Loading thumbnail…

[A5] Beef CPI from 2000 - 2015 (Line Chart)

This line chart visualizes beef Consumer Price Index (CPI) values from 2000 to 2015, sourced from a CSV file. The chart displays data points as gray circles connected by a line, with hover interactions that change a point's color to orange and display a tooltip showing the specific year and CPI value. Built with React and D3.v7, the visualization uses d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for axes, and d3.line for the connecting line, all rendered as SVG elements in a full-window canvas.

Cctan13@dons.usfca.edu
75% match
Loading thumbnail…

[A4] CPI of Meats in 2015 (Bar Chart)

This example displays the Consumer Price Index (CPI) of various meats in 2015, using the base year 1990, as horizontal bars. It loads CSV data via `d3.csv` and maps each meat type to a band scale (`d3.scaleBand`) while the CPI values determine bar widths through a linear scale (`d3.scaleLinear`). Bars are rendered as SVG rectangles, with mouseover events that temporarily change the fill color and append a text tooltip showing the exact CPI value, which is removed on mouseout. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The visualization uses a fixed margin layout and SVG rendering.

Cctan13@dons.usfca.edu
75% match
Loading thumbnail…

[A7] CPI of Various Grains from 2000 - 2015 (Multi-Line Chart with a Color Legend)

This multi-line chart displays the Consumer Price Index (CPI) for corn, rice, rye, and wheat from 2000 to 2015, using color-coded lines and circles for each grain. The visualization loads data from a CSV file and renders it with SVG using d3.v7, applying d3.line for the paths, d3.axisBottom for the x-axis, and d3.legend for a color legend. Hovering over a circle highlights it in orange and displays a tooltip with the year, CPI value, and grain type. The chart includes labeled axes and a title.

Cctan13@dons.usfca.edu
74% match
Loading thumbnail…

[A11] My Chart

This interactive line chart displays the Consumer Price Index (CPI) for corn, rice, rye, and wheat from 2000 to 2015, with each grain represented by a distinct colored line and gray circular data points. Hovering over a point reveals a tooltip with the specific year, CPI value, and grain type, while the chart includes labeled axes, a legend, and a title. The visualization uses d3.csv to load external data, d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft for scaling and axes, and appends SVG paths and circles for rendering. A d3.legendColor legend with custom triangle shapes identifies the grain series. The graph is built with D3 v7 inside a React framework, rendering to SVG based on window dimensions.

Cctan13@dons.usfca.edu
73% match
Loading thumbnail…

[A10] CPI of Meats in 2015 (Intentional Black + White Redesign)

This example presents a side-by-side comparison of Consumer Price Index (CPI) values for various meats in 2015, with a base year of 1990. The intentionally stark black-and-white redesign highlights Pork in red, contrasting it with the gray bars of other meats, and uses the title "PORK IS BAD NO ONE BUY." The visualization employs two separate SVGs rendered with D3.js v7, using `d3.csv` to load data from a Gist, `d3.scaleLinear` and `d3.scaleBand` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Hover interactions in the white chart display CPI values via tooltips.

Cctan13@dons.usfca.edu
72% match
Loading thumbnail…

ICE-7-3 Line Chart

This line chart visualizes the monthly Consumer Price Index (CPI) from the U.S. Bureau of Labor Statistics, showing percentage changes over time on a red line plotted against a time-scaled x-axis and linear y-axis. The code uses d3.csv to load the data, then applies d3.scaleTime, d3.scaleLinear, and d3.line to generate the SVG path. Gridlines are drawn via d3.axisBottom and d3.axisLeft, with tick sizing and labels configured. The chart displays a title and axis labels, rendered in an SVG canvas with dimensions defined in the HTML.

Hhossaphul
72% match