project-SDV

100%

✓ Published0🌍 Public

Last edited Nov 3, 2025

Created on Nov 3, 2025

This heatmap visualizes weekly U.S. retail gasoline and diesel prices from 1995 to 2021, with columns representing different fuel grades and formulations, and rows representing weekly dates. Color intensity encodes price levels, using a viridis color scale. Built with D3.js v7, the visualization renders as an SVG using `d3.scaleBand` for axes, `d3.timeFormat` for date parsing, and `d3.interpolateViridis` for color mapping. A tooltip, triggered by mouseover events, displays the column description, date, and value, while a gradient legend shows the color-to-price correspondence.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

project-SDV 2

This scatter plot matrix compares weekly U.S. gasoline prices across four fuel grades—All Grades, Regular, Midgrade, and Diesel—from early 1995 onward. Each cell displays a scatter of points, with tooltips revealing the specific week and price values on hover. Built with D3 v7, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG-based rendering includes a cross-product helper to generate all pairwise combinations of the selected columns.

RRuthvik Bairaboina

86% match

Loading thumbnail…

project-SDV 5

A multi-line chart displays retail gasoline prices for four US regions (A1, R1, M1, D1) as weekly time-series data from the provided CSV. Four colored lines show price trends, each represented with a legend button. Clicking a legend button highlights the selected region’s line while dimming others; clicking again restores all. The chart uses D3 v7 with `scaleTime`, `scaleLinear`, `line`, and `curveMonotoneX`, while rendering via SVG. Points include an HTML tooltip showing exact values and dates. The visualization is built with `d3.csv`, axes via `axisBottom` and `axisLeft`, and interactive filtering through `selection.on` and `selection.attr`.

RRuthvik Bairaboina

84% match

Loading thumbnail…

project-SDV 4

This stacked area chart visualizes the average prices of U.S. gasoline, broken down into overall, regular, and midgrade averages, across a weekly timeline. The chart uses a total height to represent the sum of these three averages for each date. Built with D3.js v7, the code computes the averages from the raw data, stacks them using `d3.stack()`, and renders the areas with `d3.area()`. An interactive legend allows users to isolate individual averages by dimming the others, and a tooltip displays precise values via a nearest-date bisector. The data is sourced from the provided CSV file.

RRuthvik Bairaboina

83% match

Loading thumbnail…

project-SDV 3

This parallel coordinates chart visualizes 13 numeric petroleum price attributes across weekly dates from a CSV file, with each line representing a time series. The D3 v7 code renders SVG paths for all data points in blue, with axes scaled linearly per dimension. Interactive legend buttons allow filtering by dimension, highlighting lines in the top 10% of values for the selected attribute while dimming others. Tooltips display the week date on hover, and the line generator uses `d3.line()` with `d3.scalePoint()` for positioning.

RRuthvik Bairaboina

78% match

Loading thumbnail…

GasPrice

The visualization displays diesel fuel prices from multiple gas stations over one week, using a single line chart with a time-scaled x-axis and a linear price y-axis. The SVG rendering uses D3 v7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing. Data is loaded via `d3.csv`, with dates parsed and prices converted to numbers, and the chart includes gridlines and labeled axes.

Ssvsiefert

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes weekly U.S. gasoline prices as a line chart, with time on the x-axis and price per gallon on the y-axis, emphasizing trends through a simplified, clean design. It uses the Vega-Lite API to construct the chart declaratively, registering it with Vega and Vega-Lite, while D3’s `csv` module is referenced for potential data loading. The data, a static array of timestamped prices, is passed directly to the chart, which renders as a full-window SVG. Custom axis styling and large label fonts are configured to improve readability.

SSujit Iwale

73% match

Loading thumbnail…

Line Chart with Two Lines

This line chart displays annual average U.S. prices for regular gasoline and diesel from 1995 to 2014, with the two series overlaid to compare their trends. It shows that both fuels follow a similar upward trajectory with peaks around 2012–2013 before a slight decline, and that diesel prices generally exceed regular gas prices. The visualization uses D3.js v3 with SVG rendering, employing d3.svg.line and d3.time.scale for the x-axis, while loading the two CSV datasets and merging them to set scale domains. The data comes from the U.S. Energy Information Administration.

CCindyJonesHulfachor

72% match

Loading thumbnail…

heatmap with legend d3

This heatmap visualizes the average fuel economy (mpg) of cars across model years and engine displacement ranges, using color intensity to represent efficiency values. The chart is built with D3 v7, loading CSV data and using `d3.rollup` to aggregate means, `scaleBand` and `scaleTime` for axes, and a sequential color scale with `d3.interpolateBlues`. Interactive tooltips display details on hover, while the legend is generated using the d3-legend library.

Ccwb314159@gmail.com

71% match