Bike Rental DataViz using Vega-Lite API

100%

Bike Rental DataViz using Vega-Lite API

✓ Published1🌍 Public

Last edited Sep 18, 2020

Created on Sep 12, 2020

This example visualizes daily bike rental counts across months, colored by weather condition, using a scatter plot with circle marks. It reveals higher rental volumes during warmer months (March–October) and notable drops during extreme weather events, especially in summer. The visualization is built with the Vega-Lite API, registered through Vega and Vega-Lite, and renders as SVG with tooltips powered by vega-tooltip. Data is loaded asynchronously from a CSV file via D3’s `csv` function, with custom axis and label styling defined in a separate configuration module.

AI-generated description

A visualization constructed using the vega-lite-api. The data shown here comes from the Bike retal data set

Findings:
It turns out warm days has the most numbers of rental per day(Mar - Oct). During cooler days not so much(Nov-Feb). Weather also plays a big factors, during normal days(1) tends to have more rentals, but during extream weather (3) in summer times, rental number tends to drop significantly.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bike Rental DataViz Humidity vs Temperature

This visualization uses a scatterplot of humidity against temperature, with circle size encoding the total bike rental count and color distinguishing weather types. It reveals that higher humidity reduces rentals more sharply than high temperatures, while low temperatures also deter riders. The data comes from the Bike Rental dataset, processed via d3.csv. The chart is built with vega-lite-api, using vl.markCircle, vl.x, vl.y, vl.color, vl.size, and vl.tooltip, rendered through vega and vega-lite with d3 v5.

SStefanZhang

83% match

Loading thumbnail…

Fork of Bike Rental DataViz Humidity vs Temperature

This bubble chart explores the relationship between humidity and temperature in bike-sharing usage, with circle size representing ride counts and color distinguishing weather conditions. It is built using the vega-lite-api framework, which renders the visualization through Vega-Lite and Vega with SVG output. The data is loaded from a CSV file hosted on GitHub containing daily weather and rental counts. The visualization reveals that ridership remains robust even at high temperatures, whereas increasing humidity correlates with declining bike usage, showing temperature tolerance is higher than humidity tolerance.

Ssofia-martinovich

82% match

Loading thumbnail…

Bike Rental DataViz Humidity vs Temperature

This visualization uses the Bike Rental dataset to explore how humidity and temperature influence daily rental counts. It plots humidity against temperature, with circle size proportional to total rentals and colors distinguishing different weather cluster types. The chart reveals that rentals remain high even at temperatures near 0.9, while high humidity correlates with significantly fewer rides, suggesting temperature tolerance is greater than humidity tolerance. Built with the vega-lite-api library, it encodes the data using fieldQ scales and an opacity of 0.3 for circles, with customization via a config.js file and data loaded through d3.csv.

JJorge Emilio Zapata Godoy

80% match

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a scatter plot of weekly temperature readings from San Francisco. The visualization maps timestamp to the x-axis and temperature to the y-axis, with color encoding timestamps and tooltips showing temperature values. Built with d3.csv for data loading, it employs vega-lite-api’s vl object to construct circle marks with configurable styling, drawing directly to an SVG canvas sized to the window. The underlying data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

Ssinghjy

78% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot displays daily temperature readings over time from a CSV dataset of San Francisco weather. The visualization is built using the Vega-Lite API, which constructs declarative specifications programmatically, then renders them through the Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously via D3's `csv` function, while the `vega-tooltip` handler provides interactive hover details for each circle mark.

CCurran Kelleher

77% match

Loading thumbnail…

Bike

This interactive visualization displays bike ride data as an arc diagram, with each arc representing a ride type. Users can filter the data by year and membership type using dropdown menus, which updates the visualization dynamically. The chart is built using Vega-Lite API within a React framework, with Vega and Vega-Lite handling the rendering. Data is loaded from a CSV file using D3’s `csv` function, and the visualization computes quantitative theta values from the ride type field, encoding color by the same nominal attribute.

SSamir Nandardhane

77% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418

77% match

Loading thumbnail…

Vega-Lite API - scatter plot

This example demonstrates a scatter plot of vehicle data using the Vega-Lite API, showing the relationship between miles per gallon and horsepower across different car origins, with point size encoding weight and tooltips displaying car names. The visualization leverages `vl.markCircle` with opacity for density perception, and custom scales that avoid zero-based axes. It loads CSV data from a GitHub gist via d3.csv, then renders to SVG using Vega and Vega-Lite with a dark-on-light custom config. The code registers vega-tooltip for interactive hover labels and uses d3.v5.

Kkatjur01

76% match