project-SDV 4

100%

✓ Published0🌍 Public

Last edited Dec 5, 2025

Created on Nov 4, 2025

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.

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

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

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.

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

80% match

Loading thumbnail…

project a

This multi-line chart visualizes four petroleum price metrics (A1, R1, M1, D1) from the PET_PRI_GND_DCUS_NUS_W dataset over time. The visualization uses d3.csv to load and parse the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the paths. Each metric receives a distinct color from d3.scaleOrdinal, with an interactive legend that toggles line visibility by adding a hidden-line class on click. The chart is rendered as an SVG and also demonstrates d3.axisBottom and d3.axisLeft.

RRuthvik Bairaboina

73% 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…

D3 Layouts - Stacked area chart

A stacked area chart shows monthly U.S. electric vehicle sales from December 2010 to June 2013, with each category rendered as a filled layer. The code uses `d3.stack` with descending order and `d3.area` to generate SVG paths, colored via `d3.schemeCategory10`. It parses dates with `d3.timeParse` and scales axes with `d3.scaleTime` and `d3.scaleLinear`. Data comes from a remote CSV file, and axes are drawn using `d3.axisBottom` and `d3.axisRight`. The chart is fixed at 800×350 pixels.

KKaustav Sen

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

72% match