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

100%

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

✓ Published0🌍 Public

Cctan13@dons.usfca.edu

Last edited Mar 16, 2024

Created on Mar 15, 2024

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.

AI-generated description

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

Similar vizzes

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

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

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

72% match

Loading thumbnail…

D3 - Qualitative color scale Scatterplot

This example visualizes global agricultural productivity with a qualitative color scale, plotting wheat production against a pest control metric. Each circle represents a data point, with colors encoding the year (2015–2021) using an ordinal scale from d3.scaleOrdinal. The scatterplot uses d3.csv to load data and d3.axisBottom/axisLeft for axes, while a legend from d3.legendColor clarifies the year mapping. The SVG rendering applies linear scales for positioning and radius, though circle size remains fixed at 8 pixels despite the size scale being defined.

CChandana Srinivas

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

71% match

Loading thumbnail…

Assignment 7 Heat Map with Tooltips

This heat map visualizes average monthly prices for four leafy greens—spinach, cress, mustard, and fennel—using a sequential green color scale to encode price levels, with a d3-legend color bar and interactive tooltips that display exact prices on hover. The visualization is built with D3 v6, using SVG rendering and scales such as `d3.scaleBand` for the x (date) and y (commodity) axes, while `d3.scaleSequential` with `d3.interpolateBuGn` drives the color encoding. Data is loaded from a CSV file via `d3.csv`, filtered to include only the specified commodities, and rendered as rects with hover events for tooltip feedback.

Aahuynh8@dons.usfca.edu

71% match

Loading thumbnail…

legend date

This scatterplot displays daily GrossAmount values over time, with each point colored by its price category through a categorical ordinal scale. The visualization includes an interactive color legend that highlights points matching the hovered value while fading others. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map date, price, and color encodings, rendering circles as SVG marks. Data comes from NOAA, loaded via `d3.csv`, with axes generated by custom `AxisBottom` and `AxisLeft` components.

EEnes Gök

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

69% match