100%

Temperature Visualization

✓ Published0🌍 Public

Last edited Oct 11, 2018

Created on Oct 11, 2018

This interactive line chart uses the D3.js brush-and-zoom technique to explore hourly bike-sharing usage in Washington DC, highlighting how the number of users correlates with temperature. The visualization, built with D3 v4 and rendered as SVG, displays temperature as a colored line over a two-year period (2011-2012). Users can brush along the lower time-series context chart to select a time range, and the main panel zooms in to reveal finer-grained patterns. The chart is part of a broader exploratory project investigating relationships between rider counts and weather attributes like temperature, humidity, and windspeed. Data comes from the UCI Machine Learning Repository's Bike Sharing dataset, and the implementation builds on prior work by mbostock and curran, with the source code available under an MIT license.

AI-generated description

The Visualization

This is part of an exploratory visualization project looking at the time of day use patterns and the relationship between the number of users and quantitative weather attributes (temperature, humidity and windspeed).

The Data

Washington DC Bike Sharing Data Set

This data set contains the number of bike share system users (casual and registered) for each day (and hour) for two years (Jan 2011 - Dec 2012), as well as the day type (holiday, workingday), weather situation, temperature and humidity, apparent temperature and windspeed.

This data is from UCI Machine Learning Repository: Bike Sharing Data Set

The dataset file can be found here as a zip archive.

Daily Data Block Summary Hourly Data Block Summary

Inspiration and Sources

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172'>Brush & Zoom</a> forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/90240a6d88bdb1411467b21ea0769029'>Line Chart of Temperature</a>

forked from <a href='http://bl.ocks.org/sajudson/'>sajudson</a>'s block: <a href='http://bl.ocks.org/sajudson/ad02a7cf9ba7fd7eed0017ecd4dd0b13'>Global Carbon Emissions by Year, 1751-2011</a>

forked from <a href='http://bl.ocks.org/sajudson/'>sajudson</a>'s block: <a href='http://bl.ocks.org/sajudson/6868f6f0836fc6f88566587b9e9e4a50'>Time Series Sketch Prototype</a>

mit Licensed

Similar vizzes

Loading thumbnail…

The Visualization

This visualization explores the relationship between daily bike-sharing user counts and weather in Washington DC, using a focus and context idiom. The context chart displays total users over the full date range, while a brushed and zoomable focus chart shows casual and registered users alongside temperature. Users can pan and zoom via a one-dimensional brush, and a geometric zoom on the focus chart updates the context brush. Built with D3 v4, it uses `d3.brushX`, `d3.zoom`, and `d3.line` to render SVG line charts from the UCI Machine Learning Repository dataset.

MMbrownshoes

87% 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

76% match

Loading thumbnail…

Temperature Visualization

This visualization combines a scatter plot and line chart to show temperature in degrees Celsius in San Francisco over one week. Each circle represents an hourly temperature reading, connected by a line to reveal trends over time. The chart uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, with data loaded from a local CSV file. Axes are labeled “Time” and “Temperature,” and the visualization comes from the Data Canvas Sense Your City API.

CCurran Kelleher

75% match

Loading thumbnail…

Line Chart Visualization

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin from October 2011 through April 2012, with each city represented by a colored line. Built with D3 v7, the visualization supports interactive filtering: hovering over a city name highlights its line while dimming others, and clicking toggles a line's visibility. Users can also brush or zoom along the time axis. The SVG-based rendering uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.zoom, with data loaded from a TSV file.

GGoogs

75% 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

74% match

Loading thumbnail…

Temperature Visualization

This line chart visualizes hourly temperature readings in San Francisco over one week, sourced from the now-defunct Data Canvas - Sense Your City API. The visualization uses an SVG rendering with D3 v4, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. A smooth line is drawn using `d3.line` with `d3.curveBasis`, while axis labels and gridlines are styled via custom CSS classes. The data is loaded from a CSV file, with timestamps parsed as JavaScript `Date` objects.

CCurran Kelleher

74% match

Loading thumbnail…

Working with time

This interactive scatter plot visualizes temperature readings over time, with each point representing a data sample and a smooth curve connecting the series. Users can brush horizontally across the chart to highlight specific time ranges, which turns the corresponding circles red. Built with React and D3 v7, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveNatural`, and `d3.brushX` for the selection interaction. Data comes from a CSV file of weekly San Francisco temperatures, rendered as SVG elements with custom axes.

Cchrismeeky

73% match

Loading thumbnail…

Class 10

A data-visualization example titled “Discovering D.C. by Bike” shows bike-sharing stations, bike trails, and tourist attractions across Washington, D.C., on an interactive zoomable map. It uses d3-geo with a Mercator projection and d3-tile for the basemap, while d3-zoom enables pan and zoom with tile scaling. Hovering over markers reveals tooltips, and a legend explains the symbols. The code loads three GeoJSON datasets from GitHub and renders all elements as SVG with animation support, using d3.v4 and d3-legend for the color legend.

AAnaMal08

73% match