Skip to main content
SimilarExport ZIP
100%

Vega-lite-api-part2

✓ Published0🌍 Public
RRoland
Last edited Feb 6, 2022
Created on Feb 5, 2022
Forked from Vega-lite

This visualization displays daily atmospheric conditions in Belgium for 2021, using a bar chart to show mean relative humidity per month, with color encoding by wind speed and bars stacked by wind speed category. A second scatter plot shows air temperature averages over time. The code uses Vega-Lite API with React, D3’s CSV loader, Vega tooltip, and custom config for styling.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays daily average air temperatures in Belgium from 2017 to 2021 as a smooth line chart, using a bright magenta color scheme for high contrast against a dark background. It is built with the Vega-Lite API, which compiles specifications into Vega and renders via SVG, while D3.js loads the CSV data from a GitHub gist. The visualization configures custom axis styles and tooltips through vega-tooltip to show temperature readings on hover.

Mmartfhill
84% match
Loading thumbnail…

Vega-Lite API Template 6

This interactive scatter plot visualizes the relationship between temperature (T) and relative humidity (RH) from the UCI Air Quality dataset, rendering thousands of overlapping semi-transparent points to reveal density patterns. Built entirely with the Vega-Lite API, the visualization uses `vl.markCircle` and encodes quantitative axes with configurable scales. The code imports data via D3's `csv` method, then renders the chart using Vega and Vega-Lite engines with an SVG renderer and tooltip support, while custom configuration adjusts axis styling and typography for readability.

OOleJRask
78% match
Loading thumbnail…

Ep18: Vega-Lite API Temperature

This visualization displays daily temperature readings over time as a scatter plot, using color and vertical position to encode temperature values. Built with the Vega-Lite API, it renders data from a CSV file of San Francisco weekly temperatures, fetched via d3.csv. The chart is configured with custom styling for axis labels and titles, and includes interactive tooltips that display nominal temperature labels. The visualization adapts to the full browser window using an SVG renderer, with circles sized and semi-transparent for improved readability.

SStoo Sepp
75% match
Loading thumbnail…

Vega-Lite API Template w/ API Fetch

This example demonstrates a scatterplot of temperature readings for various cities, using the Vega-Lite API to construct the visualization. The chart encodes temperature as the y-axis and city as the x-axis, with a tooltip displaying the state for each point. The code fetches CSV data from a remote URL using `d3.csv`, then builds the visualization with `vega-lite-api`, rendering it as an SVG via the `vega` and `vega-lite` libraries. Styling is customized through a config object, and the chart fills the browser window with an autosize fit.

AAndres de la Garza
75% match
Loading thumbnail…

Vega lite visualization

This example uses Vega-Lite API within React and D3 to create a bar chart of population by country, colored by religion. The visualization loads CSV data from a GitHub gist and renders an interactive bar chart with tooltips showing population values. It uses `vl.markBar`, `vl.x().fieldN('country')`, `vl.y().fieldQ('population')`, and a color encoding for religion. The chart fits to the window size and applies custom axis styling from a config object, with a Vega Tooltip handler for interactivity.

Ssxtnxy
75% match
Loading thumbnail…

Vega-Lite API Template

This bar chart displays population by country from a 2015 dataset, using Vega-Lite’s API to build the visualization with horizontal bars sorted by value. The code loads CSV data via `d3.csv`, configures axes and styling through a custom config object, and renders SVG using vega-lite and vega-tooltip for interactive hover details. The example demonstrates programmatic chart construction and React state management for handling asynchronous data.

Hhamzavg
75% match
Loading thumbnail…

Vega Lite API Template

This example shows a bar chart of population by country, colored by religion, using the Vega-Lite API within a React application. It renders stacked bars that sort countries by population and include tooltips for each data segment. The code loads CSV data from a GitHub gist via d3.csv, configures a dark theme with custom axis and label styles, and uses Vega-Lite’s declarative API to encode the chart. Vega and Vega-Lite are registered with a tooltip handler, and the final visualization is appended to the document body.

Bbellarej
75% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a temperature time series as a line chart over the full viewport. The visualization displays temperature readings across timestamps, with tooltips showing individual values on hover. The code loads CSV data from an external URL via the `d3.csv` method, then constructs the chart using `vl.markLine` and `vl.encode` functions from the `vega-lite-api` library. Appearance is customized through a configuration object that adjusts axis labels and title styles.

FFrederick O'Brien
75% match