Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

A4-3 TEST

This example shows a box plot of pork price observations loaded from a CSV file, with a horizontal line spanning the min and max, a box between the first and third quartiles, and labeled ticks for each statistic. The code computes quartiles, the interquartile range, and whisker boundaries using d3.median and d3.quantile. It renders the chart as an SVG with d3.v5, using a linear scale for the x-axis, custom tooltip on hover, and styling via external CSS.

MMike Z
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
Loading thumbnail…

Untitled

A bar chart displays XYZ Foods stock prices from 2011 to 2020, with dollar values on the y-axis and years on the x-axis. The visualization uses d3.csv to load the data and d3.scaleBand with d3.scaleLinear to map the values, rendering steelblue rectangles in an SVG. Axis labels are added via d3.axisBottom and d3.axisLeft, with a title highlighting the dataset’s topic.

Ssumaiyamahin
69% match
Loading thumbnail…

Fork of Bar Chart D3

This bar chart visualizes XYZ Foods stock prices over time, with dollar-labeled y-axis ticks and a year-based x-axis. The chart uses D3 v4’s `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG `rect` elements for bars. Data loads from an external CSV file via `d3.csv`, with the chart rendered inside an SVG container.

SSimon Hackbert
69% match
Loading thumbnail…

First Bar Chart

This example displays a horizontal bar chart of food sales, using D3.js (v5) with SVG rendering. The chart maps food types to a band scale and sales numbers to a linear scale, with axes generated via `axisLeft` and `axisBottom`. Population data for the top 10 countries is sourced from the 2017 World Population Prospects, though the code loads `moreData.csv` with food sales figures. Bars are drawn as SVG rectangles with steelblue fill, and the layout includes explicit margins and padding.

Bbukbukbukka
69% match