Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
IIlia Katkovnik
Last edited Mar 21, 2021
Created on Mar 21, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

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
91% match
Loading thumbnail…

Fork of 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.

Ttnk-dev
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 Vega-Lite API Template

This example shows a line chart of daily temperature readings from San Francisco over a week. The visualization is built by combining the Vega-Lite API and D3, with `vl.markLine` defining the encoding and `getData` fetching the CSV from a GitHub gist. The chart uses `vega`, `vega-lite`, and `vega-lite-api` to render an interactive SVG, includes a custom dark-themed config, and enables tooltips via `vega-tooltip`.

LLeandro Da Souza
90% 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
90% match
Loading thumbnail…

Fork 3 of Vega-Lite API Template

This visualization displays a time-series line chart of weekly temperatures in San Francisco. The line mark plots temperature values against timestamps, with a tooltip showing the exact recorded temperature on hover. The example is built using the Vega-Lite API, which compiles specifications to Vega and renders via D3. Data is loaded from a remote CSV file using D3’s `csv` method, and the chart is configured with custom axis styles and font sizes for readability. The visualization automatically fits to the window dimensions.

Iiffath.namira@csedge.org
90% 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
90% 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
90% match