Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Cctan13@dons.usfca.edu
Last edited Feb 27, 2024
Created on Feb 27, 2024
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
80% 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
78% 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
77% 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
75% match
Loading thumbnail…

[A7] (Heat Map for Time Series Data with a Color Legend)

This visualization displays a heat map of the Consumer Price Index for various grains (Corn, Rice, Rye, Wheat) from 2000 to 2015, using a sequential color scale from light to dark yellow-orange to represent CPI values. The example renders time series data as a grid of colored rectangles, with each column representing a year and each row a grain type, alongside a color legend and axes. It uses D3 v7 and the d3-legend library, implementing scales such as `d3.scaleLinear` for the year axis and `d3.scaleSequential` with `d3.interpolateYlOrBr` for coloring. Tooltips appear on mouseover to reveal the exact year, grain, and CPI value, while the data is loaded from a CSV file.

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
71% match
Loading thumbnail…

Line Chart ICE 7

A line chart depicts the Consumer Price Index (CPI) trend over time, plotting annual values from a CSV dataset. D3.js scales map years to the x-axis and CPI values to the y-axis, with a `d3.line()` generator constructing the path. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, with rotated axis labels. Data loading uses `d3.csv` with row parsing to convert strings to numbers, while the chart fills the viewport and applies the Share Tech font.

Ddiwashhumagain@my.unt.edu
71% match
Loading thumbnail…

[A7] (Small Multiples of Lines Chart with a Color Legend)

This example uses small multiples to display the Consumer Price Index (CPI) of four grains—Corn, Rice, Rye, and Wheat—from 2000 to 2015, with each grain in its own line chart. A color legend identifies each grain’s stroke color. The code loads CSV data via `d3.csv`, renders SVG line charts using `d3.line` and `d3.axisBottom`, and builds the legend with `d3.legendColor` from the d3-legend library.

Cctan13@dons.usfca.edu
70% match