Skip to main content
SimilarExport ZIP
100%

Fork of Episode 18 - Iterating Fast with Vega Lite API - Line

✓ Published1🌍 Public
Zzjulijie0618
Last edited Jan 16, 2022
Created on Jan 16, 2022

This example shows a line chart of temperature over time, using data from the Auto MPG dataset via a CSV file. The visualization is built with the Vega-Lite API, registered through `vl.register` with Vega and Vega-Lite, and rendered as an SVG. The code encodes timestamp on the x-axis and temperature on the y-axis, applying custom axis and label styling from a config object. Data is fetched asynchronously with `d3.csv`, and the chart fits the full window using `.autosize({ type: 'fit' })`.

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

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using a Vega-Lite line chart, with the data sourced from the Auto MPG Data Set via a GitHub Gist. The visualization is built programmatically through the Vega-Lite API, which registers Vega and Vega-Lite libraries, and employs d3.csv to fetch the dataset. The chart encodes timestamps on the x-axis and temperature values on the y-axis, with a semitransparent line style. Custom configuration adjusts axis styling, font sizes, and colors for improved readability, while the view auto-sizes to fit the browser window.

DDhvanil Vaghasiya
88% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive line chart visualizes temperature trends from the Auto MPG Data Set, plotting temperature against timestamp. The visualization uses the Vega-Lite API to construct a specification, which is then rendered using the D3.js library. The temperature data is loaded from an external CSV source, with styling options defined in a separate configuration file. The implementation leverages dynamic sizing and tooltip features, with a dark color scheme applied to axis labels and titles for improved readability.

Zzenoalive
87% match
Loading thumbnail…

Fork 4 of Vega-Lite API Template

This example displays a line chart of temperature readings over time, rendered as a single thick line across the full viewport. The visualization is built using the Vega-Lite API, with the chart specification defined in `viz.js` via `vl.markLine` and encodings for a temporal x-axis and quantitative y-axis. Data is loaded from a remote CSV file using D3’s `csv` function in `getData.js`. The rendering pipeline registers Vega, Vega-Lite, and a tooltip handler in `index.js`, with axes and label styling customized in `config.js`.

Iiffath.namira@csedge.org
86% match
Loading thumbnail…

Fork of Vega-Lite API

This fork of the Vega-Lite API renders a line chart that visualizes temperature readings over time. The visualization uses the vega-lite-api library to construct the chart, with a markLine encoding timestamp and temperature fields. Data originates from the UCI Machine Learning Repository's Auto MPG dataset, retrieved via the d3 `csv` function. The implementation registers both Vega and Vega-Lite, and includes a Vega Tooltip handler for interactive data exploration, with custom styling applied through a separate config file.

GGabriel Dias Menezes
86% match
Loading thumbnail…

Fork of Vega-Lite API

This example shows a line chart of temperature over time, styled for a clean, dark-on-light appearance with large axis labels and a tooltip that displays temperature values. The visualization is built entirely through the Vega-Lite API, using `vl.markLine`, `vl.x().fieldT()`, and `vl.y().fieldQ()` to encode the data, which is loaded from a CSV file via D3’s `csv` function. It registers Vega, Vega-Lite, and the Vega-Tooltip handler, then renders an SVG with automatic resizing to fit the window.

MMichael Bergerson
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using the Vega-Lite API, rendering a line chart from CSV data. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It uses the `vega-lite-api` library alongside `d3.csv` for data loading, with a custom dark theme applied through a configuration file. The chart fills the browser window and updates dynamically, leveraging Vega’s rendering capabilities with SVG output.

MMark Mburu
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a D3.js framework. It displays a line chart of automobile data from a CSV file, plotting horsepower over time with a viridis color scale and tooltips showing vehicle names. The visualization leverages the vega-lite-api library to construct the chart declaratively, while D3’s csv function loads the data. Custom configuration adjusts axis styling and font sizes, and the final SVG output is rendered across the full viewport with auto-sizing.

Zzykel
85% match