project a

100%

✓ Published0🌍 Public

Last edited Dec 5, 2025

Created on Dec 5, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

73% match

Loading thumbnail…

project

This example presents a dashboard of four D3.js charts—a line chart, bar chart, pie chart, and scatter plot—visualizing global sustainable energy data from a CSV file. It shows trends in renewable energy share, electricity access, fossil versus renewable energy proportions, and the relationship between GDP and energy consumption per capita, with a tooltip and country selector. The visualization uses D3 selections, scales, and time parsing to render SVG charts, updating all views based on the selected country.

YYeruva Snehith Reddy

73% match

Loading thumbnail…

project line chart

This example shows a temperature area chart over time, with a filled region highlighting the variation in temperature across dates. The visualization uses an SVG rendered through D3 v7, with a time-scaled x-axis and a linear y-axis. It loads CSV data from a remote gist, parses dates and numeric values, and draws the area using `d3.area` with a steelblue fill. Axes are added via `d3.axisBottom` and `d3.axisLeft`, and the chart is sized within a fixed margin and viewport. The data source is a temperature dataset, and the rendering is fully SVG-based.

CChaturyaAkhilaPallem@my.unt.edu

72% match

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

72% match

Loading thumbnail…

viz_4

This scatter plot visualizes Brent crude oil prices over time, plotting date on the x-axis and price on the y-axis using a linear scale for both dimensions. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` to compute domains, with SVG circles rendered via React components for the data marks. The code loads data from a CSV file of daily oil prices, formats tick labels using `d3.format`, and includes axis labels for “date” and “price.”

HHuldahMerlinKolli

72% match