Gas report

100%

✓ Published0🌍 Public

Last edited Sep 18, 2019

Created on Sep 8, 2019

This visualization presents a layered line chart comparing gas consumption amounts and fuel efficiency (mpg) over time. The data is loaded from a GitHub-hosted CSV file using `d3.csv`. The chart uses two overlaid line marks with independent y-axes, created via the Vega-Lite API’s `vl.layer` and `resolve` functions. Both layers encode date on the x-axis and tooltips on the data fields. The visualization is rendered with Vega-Lite, using a custom config for axis styling and colors.

AI-generated description

A visualization reflecting my report for gas. Dataset is here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays daily gas prices across multiple stations, plotted over time as a scatterplot of firebrick-colored points. Tooltips reveal station names on hover. The chart is built using the Vega-Lite API (vl) with Vega and Vega-Lite libraries, rendering to SVG via d3.v5, and pulls data asynchronously from a CSV hosted on GitHub Gist, sourced from the UCI Auto MPG dataset.

Ttmcgirr

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

Bar Chart Visualization

This bar chart displays the fuel efficiency (mpg) of various car makes, sourced from a remote CSV file. The visualization uses D3 v7 to load and parse the data with `d3.csvParse`, then renders horizontal bars with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the SVG output styled in steelblue. Data and marks are updated dynamically through an asynchronous `fetch` workflow.

HHemanthh81

73% match

Loading thumbnail…

test_data

This visualization uses a Vega-Lite API to render an interactive line chart of CO2 emissions over time, with three distinct types compared via colored lines. The chart encodes Year on the x-axis, emission amount on the y-axis, and type as color, with tooltips showing year values. Data from a CSV file is loaded via d3.csv, and the vega-lite-api library, combined with vega-tooltip for hover interactions, generates the SVG output. The visualization fills the entire browser window and uses custom axis styling.

Jjjacobatandover

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

72% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a line chart of temperature readings over time, using the Auto MPG dataset. The chart is built using the Vega-Lite API, which is registered with Vega, Vega-Lite, and D3. Data is loaded via D3’s CSV parser from a remote gist. The visualization renders as an SVG, configured with a custom dark theme and tooltips, and displays temperature trends with a non-zero y-axis scale.

Nnkarinti

72% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel-efficiency data by plotting engine horsepower against miles per gallon, with colored points indicating the country of origin and point size encoding horsepower values. It uses the Vega-Lite API to construct the chart specification, which is then rendered through Vega-Lite’s compilation to Vega, with D3.js handling CSV data loading. The visualization employs a custom dark theme, tooltips, and auto-sizing to fill the browser window, all orchestrated via JavaScript modules that register the Vega-Lite API and D3’s CSV parser.

JJayanth

72% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile fuel efficiency data, plotting each car’s origin against its horsepower as a scatter plot with semi-transparent circles and tooltips that reveal the vehicle’s name. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered as SVG through Vega. Data is loaded from a CSV file using d3’s `csv` function. The visualization auto-fits the window and customizes axis and label styling via a config object.

JJoseph Bermudez

72% match