Skip to main content
SimilarExport ZIP
100%

My Second interaction with Vega-Lite API

✓ Published0🌍 Public
AAndre J Denais
Last edited Sep 17, 2020
Created on Sep 5, 2020

This visualization displays a line chart of weekly temperature data in San Francisco, plotted across time with tooltips revealing exact temperature values on hover. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip, using d3.csv to load the dataset from a GitHub gist. The chart dynamically fills the browser window via autosize and applies a custom dark color config for improved readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Practice 2

This example visualizes weekly temperature data for San Francisco as a single smoothed line, with each point’s exact value accessible via tooltip. It uses the Vega-Lite API to declaratively encode the timestamp and temperature fields, while the `d3.csv` loader fetches the data from a GitHub gist. The chart is styled with a custom configuration that removes axis domains and increases font sizes, and it renders as a full-window, responsive SVG via `vega-lite-api` with `vega-tooltip` for interactivity.

JJames Rhodes
89% match
Loading thumbnail…

Vega-Lite API Temperature

This example visualizes a week of San Francisco temperature readings as a smooth line chart, with a tooltip that reveals the exact temperature at each point. The visualization is constructed programmatically using the Vega-Lite API, with vega, vega-lite, and vega-tooltip handling rendering and interaction. Data is loaded asynchronously from a CSV file via `d3.csv`. The chart fills the browser window, and its axes and labels are customized through a configuration object to improve readability against a dark color scheme.

MMarta
88% match
Loading thumbnail…

Vega-Lite API Temperature Line Chart

This example shows a line chart of San Francisco weekly temperatures over time, using a clean dark-on-light design with tooltips displaying exact values. The visualization is built entirely with the Vega-Lite API, which programmatically constructs a specification for a single line mark with encoded x and y fields from CSV data loaded via `d3.csv`. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders the chart as SVG fitted to the viewport, with custom axis and label styling from a shared config object.

NNelson M
88% match
Loading thumbnail…

Vega-Lite API Line Chart

This example renders a line chart of San Francisco weekly temperatures using the Vega-Lite API within a D3.js framework. The visualization displays temperature trends over time, with tooltips showing exact temperature values on hover. The code uses `vl.markArea` with encoded x- and y-fields, pulling data from a CSV via D3's `csv` loader. It integrates Vega, Vega-Lite, and the Vega-Lite API for declarative visualization, while customizing axis and label styling through a separate config file.

CCaroline Ghisolfi
88% match
Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render an interactive area chart of weekly temperature data for San Francisco. The visualization shows temperature readings over time, with tooltips displaying the temperature value on hover. The code imports data from a CSV file using d3.csv and then passes it to a Vega-Lite specification that defines the x-axis as timestamps and the y-axis as quantitative temperature values. The chart is configured with custom axis styling and uses vega, vega-lite, and vega-tooltip libraries to handle rendering and interactive tooltips.

SSimmer999
87% match
Loading thumbnail…

Vega-Lite API Template

This example renders a line chart of San Francisco’s weekly temperatures using the Vega-Lite API. The visualization maps timestamps to the x-axis and temperature to the y-axis, with a tooltip displaying the temperature value on hover. The code registers Vega and Vega-Lite, pulls data from a CSV via D3’s `csv` function, and customizes axis and label styles through a config object. The chart adapts to the browser window with autosize settings and outputs an SVG.

RReinaFeng
87% match
Loading thumbnail…

Vega-Lite API Temperature Chart

This interactive chart displays San Francisco temperature trends over time, rendered as a thin line with tooltips that reveal exact temperature values on hover. Built using the Vega-Lite API, it leverages `vl.markLine`, `vl.x().fieldT`, and `vl.y().fieldQ` to encode the temporal and quantitative data, while `vega-tooltip`’s `Handler` provides the interactive popups. The visualization pulls CSV data from a GitHub gist via D3’s `csv` function, with styling customized through the `config` object. The chart resizes to fill the browser window using `autosize` and renders as SVG.

Ddrc6587
86% match
Loading thumbnail…

11.-Vega-Lite API 2

This example visualizes San Francisco weekly temperature data as a single smooth area chart, with time on the x-axis and temperature on the y-axis. Built using the Vega-Lite API 2, the chart leverages `vl.markArea`, `vl.x().fieldT`, and `vl.y().fieldQ` to encode temporal and quantitative fields. It pulls data via `d3.csv` from a gist URL, registers Vega and Vega-Lite, and renders interactively with a tooltip handler, while custom axis and label styling improve readability.

JJorge MataH
86% match