Skip to main content
SimilarExport ZIP
100%

Assignment 7 Heat Map with Tooltips

✓ Published1🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Mar 20, 2024
Created on Mar 20, 2024

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.

AI-generated description

CS 360 Assignment 7 Heat Map with Tooltips

Annie Huynh

CSV URL:https://raw.githubusercontent.com/Ahuynh111/gist-practice/main/fvPrices.csv

Note: Different data set from previous assignments

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 7 Multi-Line Time Series Plot

This multi-line time series plot shows the average prices of four gourd varieties—bottle, bitter, smooth, and snake gourd—in Nepal over time, with each commodity distinguished by color. The visualization first filters the CSV data to these four categories, then groups the records by commodity using `d3.group`. It renders separate SVG paths via the `d3.line` generator, with a time-scaled x-axis and a linear y-axis for price in NPR. A color legend, created with the `d3-legend` library’s `legendColor` function, identifies each line, while axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data comes from a remote CSV file, and the chart is drawn entirely with SVG.

Aahuynh8@dons.usfca.edu
72% 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…

Heatmap using d3.js

This heatmap visualizes the consumption of various fruits and vegetables across five European countries—France, Italy, Germany, the United Kingdom, and Spain—using a color scale that encodes the percentage deviation of each value from the mean. The data is loaded from a CSV file, and each cell’s color corresponds to a six-band scale: negative values render in shades of red (dark to light), while positive values use shades of green, with the legend indicating percentage ranges. The chart uses an SVG layout with band scales for the x-axis (products) and y-axis (countries), and includes animation for a dynamic presentation. Built with d3.v4, the visualization is adapted from a block by nanu146 and is available under the GPL-3.0 license.

GGerardoFurtado
71% match
Loading thumbnail…

Heatmap

This heatmap shows monthly values across five years, with a white-to-orange color scale indicating magnitude from 0 to 2. Rendering as SVG, the visualization uses d3.scaleBand for month and year axes, d3.scaleLinear for color encoding, and d3.csv to load the heatmap.csv data. A tooltip appears on hover, displaying the exact cell value via mouseover, mousemove, and mouseleave handlers.

Pprateekvasi
71% match
Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas
70% match
Loading thumbnail…

Heat Map

A 5x5 heat map visualizes numeric values from a CSV file as colored squares, using a quantile scale with a sequential orange colormap to encode values from 1 to 20. The SVG rendering employs d3.csv for data loading, d3.scaleQuantile for color mapping, and d3.axisRight and d3.axisBottom to display axes. A tooltip appears on mouseover, showing the exact value of each cell.

CChai94
69% match
Loading thumbnail…

ice_7 , question 4

This example shows a D3.js area chart that visualizes the trend of average car prices over the years, with a gradient-filled area below the line and interactive tooltips on hover. Data is loaded from a CSV file using `d3.csv`, transformed with `d3.rollups` to compute yearly means, and sorted by year before rendering. The visualization uses SVG elements with `d3.area` and `d3.line` generators, linear scales for the x- and y-axes, and a linear gradient definition for the area fill. Circles for each data point trigger tooltips showing the year and average price.

Sshailajat1998@gmail.com
69% match
Loading thumbnail…

HeatMap D3

This heatmap displays average monthly temperatures for ten cities across 2016, using a vertical color gradient from the Inferno interpolator to encode temperature values. The visualization employs D3.js v6 with SVG rendering, scaling months along the x-axis and cities along the y-axis. Interactive tooltips reveal exact temperature values on hover, while a d3-legend color scale provides a visual reference for the temperature range. The data comes from a CSV file loaded via d3.csv, with rounded cell corners and opacity styling for clarity.

AAllen Ho
69% match