Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Cctan13@dons.usfca.edu
Last edited Apr 4, 2024
Created on Mar 14, 2024
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
94% 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
89% 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
89% 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
78% 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…

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

ICE 7 Line Chart 11590101

This example visualizes rice production in the US from 1991 to 2021 using a line chart rendered in SVG. The chart plots production volume in tonnes against parsed year values, with axes, gridlines, and labels styled via CSS. It loads CSV data from a GitHub gist and uses D3 v5 APIs including `csv`, `scaleTime`, `scaleLinear`, `line`, `axisBottom`, `axisLeft`, and `extent` to generate the visualization. The line path is drawn in purple with a stroke width of four pixels.

DDivyasri0310
71% 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
70% match