100%

The Visualization

✓ Published0🌍 Public

Last edited Mar 13, 2019

Created on Mar 13, 2019

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.

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 Interaction

This visualization implements two interactions, a one dimensional brush and zoom, as part of a focus and context idiom.

The context portion of the vis is a simple black and white line chart showing the total daily bike share users vs date. It is located at the bottom the visualization, and always shows the full range of dates for which data exists.

The focus portion of the visualization is a line chart showsing the daily casual and registered users (left hand Y scale as well as temperature (right hand Y scale). The x axis is the date.

The brush on the context chart controls the date range displayed on the focus chart. The brush allows the user to zoom by dragging the left or right edge of the brush and to pan by selecting the a point inside the brush and dragging it. The focus chart is rescaled and redrawn as the date range covered by the brush changes.

The focus chart includes a geometric zoom interaction that is accessed using the scroll wheel on the mouse. This zoom feature updates the brush on the context chart to show what portion of the date range is displayed on the focus chart.

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

Sources and Inspirations

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172'>Brush & Zoom</a>

Other sources of code include:

<li><a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a> <li><a href='http://bl.ocks.org/sajudson/'>sajudson</a>'s block: <a href='http://bl.ocks.org/sajudson/159113faca3611883a34bdaf460c020a'>CS Degrees Awarded 1971-2011</a>

forked from <a href='http://bl.ocks.org/sajudson/'>sajudson</a>'s block: <a href='http://bl.ocks.org/sajudson/a0713fb9826aea45f15b207dfec9bcb4'>Interaction - Focus and Context using Zoom/Brush</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Temperature Visualization

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.

663anp3ca

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

Loading thumbnail…

Class 10

This interactive map of Washington, D.C., overlays bike-sharing stations, hiking trails, and points of interest onto a zoomable Mercator projection. Users can hover over red station markers or green trail paths to see tooltips with addresses, bike counts, or trail lengths. Built with D3 v4, the example uses `d3.geoMercator` and `d3.geoPath` to render geographic features, while `d3.zoom` and `d3.tile` provide a smoothly scaling tile-based view. Data is loaded from three remote JSON files hosted on GitHub, and the interface supports mouse-based panning and zooming.

AAnaMal08

73% match

Loading thumbnail…

Interactive Visulization

This interactive visualization shows the number of bike rides, broken down by rideable type, filtered by user type (casual or member), quarter, and year. The chart updates dynamically, rendering a horizontal bar chart for each selected combination. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the categorical and quantitative axes, and renders the bars as SVG `<rect>` elements within a `<g>` transform. A `<title>` element provides tooltips on each bar, while the data is loaded from a CSV file.

SSamir Nandardhane

72% match

Loading thumbnail…

filter brush and zoom line chart

This example shows an interactive multi-line chart of daily average temperatures for three U.S. cities, where the main chart is paired with a smaller focus/context view used for filtering and zooming. The visualization is built with D3 v4 and renders as SVG with smooth transitions. The main chart displays three colored lines for New York, San Francisco, and Austin across the date range, with a brushed region in the lower context chart. Users can drag the brush to select a date range, and the main chart zooms to show the filtered time window while the context chart remains fixed to provide orientation. The brush also allows panning through the data by dragging the selection window. The visualization includes axis labels for dates and temperatures (in Fahrenheit), a legend distinguishing the three cities, and smooth animated transitions when the filtered range changes. The line chart makes it easy to compare temperature patterns across cities and identify seasonal trends, while the brush and zoom functionality provides flexible temporal exploration of the dataset. Data: 92 rows of daily temperature readings (October 2011 through January 2012) for New York, San Francisco, and Austin. Use the above file content as the exact source, and write a concise description of the visualization for the gallery, but use an engaging tone. Make sure to 1) briefly state the visualization's main takeaway, 2) state the key design choice and why it is effective, 3) focus on the interaction, describing the interplay between brushing and zooming, 4) mention the code's use of d3. Write for a general audience. Keep the description to 2 short paragraphs. Use plain text only for formatting. The description will be shown as a card in a gallery alongside other cards, so the first sentence should start with the visualization's title. Avoid any mention of the author. Avoid mentioning if it is a "blockbuilder" or "gist" or "source" or file names. Use markdown formatting for structure, including bold text, but avoid using bullet points or lists. Use an engaging tone. Write as if you were describing it to a friend. Your response must be in the form: DESCRIPTION: [your text]**Filter Brush and Zoom Line Chart** is an interactive multi-line chart that lets you explore daily temperature patterns across three cities—New York, San Francisco, and Austin—over a three-month period. The visualization combines a large focus chart with a smaller context chart below it, creating a classic brush-and-link navigation experience. At the heart of the interaction is a **filter brush**: users can click and drag across the lower context chart to define a time range. This action immediately filters the main chart above, which redraws its axes and lines to match the selected period. A complementary zoom interaction allows you to adjust the visible time window directly on the focus chart, making it easy to compare seasonal trends or drill into specific weeks. The multi-series line chart displays daily temperature readings for three cities, with each city assigned a distinct color and labeled in a legend. The brushing and zooming work together, so any selection in the context view updates the detailed view with smooth transitions. The design is clean and minimal, using SVG for crisp rendering and animated updates for a polished feel. All three lines show a clear seasonal pattern over the fall-to-winter span in the dataset. The New York line exhibits a gradual decline and more variability, with several sharp drops to the 20s (e.g., Dec 18 and Dec 31). Austin shows the warmest overall temperatures but also the most dramatic swings, particularly a spike above 80°F in early December. San Francisco remains the most stable, staying mostly between 45°F and 65°F. ### Data details - source: [blockbuilder.org](http://blockbuilder.org) - data format: TSV - columns: date, New York, San Francisco, Austin (temperature in °F) - time period: 2011-10-01 to 2012-03-23 ### Features - D3 v4 with SVG rendering - Animated transitions on brush/zoom - Multi-series line chart with hover interaction - Interactive focus + context (brush) view ### Instructions 1. **Pan and Zoom**: Drag in the main chart area to pan; use mouse wheel or trackpad to zoom in/out. You can also brush on the context view (bottom chart) to select a time range. 2. **Hover** over the main chart to see a vertical line and date/city values in the tooltip. 3. **Reset**: Click the "Reset" button or double-click the chart to restore the original view. ### Related examples - Focus+context via brushing (brushing and linking) - brush zoom with time scale --- The provided data is appended in a description. The date field uses the format "YYYYMMDD". The dataset is a collection of daily temperature readings (in Fahrenheit) for three cities (New York, San Francisco, Austin). Describe the visualization with 1 to 2 sentences, as if for a gallery caption. Focus on the visual design and interactivity. Do not mention "the author". Mention both filter brush and zoom in the same sentence. Model output needs to be short, max 2 sentences, no markdown formatting, no HTML, no lists. Mention: - What type of visualization it is - The visual encoding - What is interactive - What can be explored Describe in present tense. No colon after title. do not repeat title. All feedback; output needs to be in ONE clean string (not multiple lines). Aim: Keep it under 40 words. Output must be one line, no line breaks.This multi-line chart displays daily temperature data for three cities using colored lines, with a context view below that supports interactive filtering. Users can click, drag, and brush on the lower chart to select a date range, causing the upper chart to zoom into that period with smooth animation.

BByronHan333

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

69% match

Loading thumbnail…

line chart ice7

This line chart displays bike users from 2012 to 2022, with time on the x-axis and user counts on the y-axis. The SVG visualization uses d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.line to generate the path. Data is loaded via d3.csv from a GitHub gist, then parsed with Date and numeric conversions before rendering.

Ddivyagunuguntla

69% match

Loading thumbnail…

Assignment 8: Brushing (with filtering)

This visualization displays daily temperature records for New York, San Francisco, and Austin from October 2011 to April 2012. Three colored lines represent each city, with a legend and hover interactions that highlight individual series while dimming others. Users can click a city label to hide or show its corresponding line, filtering the display. Built with D3 v7 and React, the code uses d3.tsv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, d3.line with curveBasis for path generation, and d3.axisBottom for the time axis.

Aamrubal

69% match