Fork of Fork of Vega-Lite API Template

100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 21, 2021

Created on Jun 21, 2021

Forked from Fork of Vega-Lite API Template

This visualization displays temperature data over time using an area chart, with a semi-transparent fill to emphasize trends. The chart is built with the Vega-Lite API, which compiles specifications to Vega and renders them as SVG. Data is loaded from a CSV file of San Francisco weekly temperatures using `d3.csv`. The visualization adapts to the full browser window and includes an interactive tooltip for exploring temperature values.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

A line chart displays temperature readings over time, with a tooltip that reveals the exact temperature on hover. The visualization is built using the Vega-Lite API, which translates a concise specification into a rendered Vega graphic. Data is loaded from a CSV file of San Francisco weekly temperatures via the `d3.csv` method. The chart's appearance, including axis styling and label fonts, is customized through a configuration object, and the visualization resizes to fit the browser window.

Nnkarinti

94% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a week of temperature data from San Francisco using an area mark, with time on the x-axis and temperature on the y-axis. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `d3.csv` to load data from a remote gist. The chart auto-sizes to the full window and applies a custom configuration for axis and label styling, with a tooltip handler from Vega-Tooltip.

JJonas Carvalho

93% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template - Temperatures

This example visualizes weekly San Francisco temperature data as a line chart built with the Vega-Lite API in a D3.js environment. It shows temperature fluctuations over time, with tooltips displaying specific values. The code imports and configures vega, vega-lite, vega-lite-api, and vega-tooltip, using d3.csv to load the data from a GitHub Gist. The chart is rendered as a full-window SVG, with axes and labels customized through hand-defined configuration objects to improve readability.

Kkatebacon32

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature data over time as a filled area chart, with the y-axis encoding temperature and the x-axis encoding timestamps from the CSV dataset. Built with the Vega-Lite API, it uses `vl.x().fieldT()` and `vl.y().fieldQ()` for temporal and quantitative encodings, and includes a tooltip via `vega-tooltip`. The code fetches data using `d3.csv`, applies custom axis and label styling through a config object, and renders the chart to fill the browser window.

DDaniel Deverell

91% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays daily temperature variations in San Francisco over time, rendered as a smooth line chart using the Vega-Lite API. The line’s thickness and opacity are fixed, with tooltips revealing exact temperature values on hover. It loads CSV data from the UCI Auto MPG dataset via d3.csv, then constructs the chart with vl.markLine, encoding temperature as a quantitative field and timestamp as a temporal axis. The visualization uses vega-lite-api, vega-lite, vega, and vega-tooltip, with custom styling from a config object to adjust font sizes and colors.

IIlia Katkovnik

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a line chart of weekly temperature data for San Francisco, using the Vega-Lite API to construct the visualization declaratively. The chart renders temperature values over time with a tooltip on hover, styled with custom axis configuration. It loads CSV data via d3.csv, registers Vega and Vega-Lite with the vega-lite-api library, and renders the final output as an SVG using vega-tooltip for interactivity. The visualization fills the entire browser window and adapts to its size.

CChristian Potdevin

91% match

Loading thumbnail…

Fork of Fork of Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of San Francisco weekly temperature data from a CSV file loaded via d3.csv. The visualization encodes timestamps on the x-axis and temperature on the y-axis, with a customized dark theme and larger axis labels for readability. The chart automatically resizes to fit the browser window and includes interactive tooltips via vega-tooltip. The code registers Vega-Lite with the API wrapper and uses the markLine specification to draw the single series.

Nnkarinti

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of San Francisco weekly temperatures, sourced from a CSV via d3.csv. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It leverages vega-lite-api to construct the chart specification, vega-lite to compile it, and vega-tooltip for interactive hover information, all styled with a custom config for readability.

JJadeITNT

91% match