Temperature Time Series

100%

Temperature Time Series

✓ Published1🌍 Public

Last edited Oct 14, 2021

Created on Sep 19, 2021

Forked from Fork of Vega-Lite API Template

This visualization displays a blue line graph tracking temperature over time, with points plotted by date and temperature values. The data originates from an Istanbul CSV file fetched via D3’s `csv` function. Built with Vega-Lite API and D3 v5, the chart uses `vl.markLine` with an x-axis encoding `fieldT('dates')` and a y-axis encoding `fieldQ('temperature')`, configured with `scale({ zero: false })` for a focused range. The visualization auto-sizes to the window and includes tooltips showing temperature values.

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.

[x]
[]

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Temperature Time Series

This visualization displays a temperature time series as a blue line, with tooltips revealing precipitation values for each data point. The chart uses the Vega-Lite API, registered with Vega and Vega-Lite, alongside the vega-tooltip handler for interactive hover details. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file containing Istanbul weather records. The line encodes dates on the x-axis and temperature on the y-axis, with the visualization sized to fit the window and styled with custom axis and label configurations for readability.

RRochisman Datta

87% match

Loading thumbnail…

Temperature Line Plot

This visualization displays a line plot of temperature readings over time, with a dark, readable style and tooltip interactions. The chart uses the Vega-Lite API to declare the mark and encodings, while D3’s `csv` function loads the dataset from a GitHub gist. The `index.js` file registers the Vega-Lite API with Vega and enables tooltips, then renders the chart into the page’s body with automatic width and height fitting. The configuration adjusts axis label sizes and colors for clearer presentation.

LLei Lei

84% match

Loading thumbnail…

Line chart

This line chart visualizes temperature data over time, using a line mark to represent temperature values on the y-axis against timestamps on the x-axis. Built with the Vega-Lite API (vl) and D3.js, the example loads CSV data from a remote URL via d3.csv, then renders the chart with configurable axis styling and an SVG renderer. Tooltips are enabled through the Vega tooltip handler, and the visualization auto-fits to the browser window size.

NNikhil Sharma

82% match

Loading thumbnail…

Tempurature Line Chart

This chart displays temperature readings over time using a line plot, with the y-axis labeled “temperature” and the x-axis labeled “timestamp.” The visualization is constructed with the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders to SVG. Data is loaded from a CSV file via d3.csv, and the chart’s appearance is customized through a configuration object that adjusts axis ticks, font sizes, and color. Tooltips are enabled via the Vega-Tooltip handler, showing the temperature value on hover.

AAndres de la Garza

81% match

Loading thumbnail…

line chart

This line chart visualizes temperature readings over time, with each point along the line representing a recorded temperature value and a tooltip displaying the exact temperature on hover. It renders as a single continuous stroke, styled with a dark color scheme for axis labels and a light grid. The visualization is built using the Vega-Lite API, which composes the chart specification and renders it through Vega. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styles and a responsive sizing that adapts to the browser window dimensions. A Vega tooltip handler enables interactive data inspection.

Hhuashe418

79% match

Loading thumbnail…

Vega-Lite Line Chart

This visualization displays temperature readings over time as a single semi-transparent line, with tooltips revealing the associated location name for each data point. Built with the Vega-Lite API, it renders as an SVG using vega-lite v4 beta and vega-tooltip for interactive hover information. The code loads CSV data from a remote GitHub gist using d3.csv, then configures the chart dimensions to fit the full window while customizing axis colors and label styles for readability. The line mark uses explicit size and opacity settings to achieve its subtle visual effect.

Bbakstorage00001

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature trends over time as a line chart, with points sized and colored by temperature values. The example is built using the Vega-Lite API, which generates a Vega-Lite specification that is rendered as an SVG via the Vega rendering engine. The data is loaded as CSV from a Gist using D3’s `csv` function, and interactive tooltips are enabled through the Vega-Tooltip handler. Appearance is customized through a configuration object that adjusts axis styles and typography.

Ddimanya

78% match

Loading thumbnail…

City Temperature LineChart Vega Lite

This example uses the Vega-Lite API to render a line chart of daily San Francisco temperatures from a CSV dataset. The visualization plots time on the x-axis and temperature on the y-axis, with an orange semitransparent line and tooltips showing exact temperature values. The code registers Vega-Lite with D3.js, fetches data via `d3.csv`, and customizes axes, tick formatting, and dark-label styling through a configuration object. The chart auto-fits to the window size and renders as SVG with an interactive tooltip handler.

Ddvinubius

78% match