circularbrush.filter

100%

circularbrush.filter

✓ Published0🌍 Public

Last edited Oct 21, 2015

Created on Apr 28, 2018

This radial chart uses a D3.js circular brush to filter daily weather data for New York City. The chart displays temperature ranges across the year with color-coded bands for records, averages, and current year values. Users can interactively resize a circular brush overlay to select specific date ranges, and the `d3.svg.circularbrush` API's `filter` method efficiently returns only the data points falling within the brushed arc. The visualization is rendered as an SVG using D3's projection and scaling utilities.

AI-generated description

The earlier example of this brushable radial chart led to some feedback to make the filtering better. I introduced a #circularBrush.filter(array,accessor) that takes an array of data and and accessor for that data and returns to you the data that falls into the area of the brush. The functionality of this chart is no different than the other, but if you take a look at the code, it's much more efficient.

Similar vizzes

Loading thumbnail…

circularbrush.filter

This circular brushable radial chart visualizes daily weather data from `cloud_rain_freeze.json`, encoding each day as a point along a circular axis based on date, with categorical weather conditions (clear, cloudy, overcast, scattered; rain/freeze booleans) determining radial positioning or color. The chart introduces a custom `circularbrush.filter(array, accessor)` method, which efficiently returns only the data points that intersect the circular brush's angular extent, improving on the original implementation. Rendered in SVG, users can drag the circular brush to filter the dataset interactively, with brushed data highlighted in real time. This example demonstrates a more performant approach to circular brushing, building on an earlier block by emeeks.

FFerjopero

88% match

Loading thumbnail…

navigator chart with d3fc brush

This example demonstrates a navigator chart that allows users to brush over a small overview to control the time range displayed in a larger detail chart. It plots surface temperature from weather data collected by the University of Edinburgh. The visualization uses the `d3fc` brush component (`fc.brushX`), which integrates with the `d3fc` Cartesian chart (`chartSvgCartesian`) and its series types (`seriesSvgArea`, `seriesSvgLine`). The brush selection is data-driven, updates the main chart’s domain, and enables efficient exploration of the dataset.

CColinEberhardt

75% match

Loading thumbnail…

Brush() & Filter()

This example demonstrates interactive brushing and filtering on a time-series area chart of stock data. The visualization renders a blue filled area with overlaid circles representing daily values, plus a red dashed line marking the average. Using D3 v5, the chart employs `d3.area()`, `d3.scaleTime()`, and `d3.axisBottom()` for SVG rendering, while mouseover tooltips display date and value details. A brush component filters data points, highlighting selected circles in green while dimming others, with CSV data loaded via `d3.csv()`. The animation and interaction rely on D3’s selection and transition APIs.

BBrightPeace

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

73% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

72% match

Loading thumbnail…

Filtering and Brushing - Multi-Series Line Chart

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file. Users can click a city’s line to isolate it by fading others, or hover to gray out the remaining lines. Built with D3 v4, it uses `d3.tsv`, `d3.timeParse`, scales like `d3.scaleTime` and `d3.scaleLinear`, and `d3.line` for SVG paths. Color encoding relies on `d3.scaleOrdinal` with `d3.schemeCategory10`, while transitions animate opacity and stroke changes.

115Dkatz

72% match

Loading thumbnail…

Brushing

This example demonstrates brushing on a scatterplot of borehole data, plotting depth against time. Users drag a horizontal brush across the chart to zoom the x-axis into a selected date range, with circles and the axis smoothly transitioning over one second. The visualization uses D3 v4 APIs including `d3.brushX`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.transition` to update the view, while the data is loaded as CSV from an external URL. SVG rendering animates the filtered result.

SShane Carey

72% match

Loading thumbnail…

Brush & Zoom line chart

This brush & zoom line chart visualizes hourly environmental data from CIMIS Station 125, plotting multiple meteorological variables such as air temperature, wind speed, and soil temperature over time. The main chart displays the selected time range as a series of colored lines, while a smaller context view beneath it shows the full time series. Users can brush over the context chart to define a focus window, and the main chart responds with a smooth zoom transition, allowing for detailed inspection of specific periods. The visualization, built with D3 v4 and rendered in SVG, uses a shared x-scale for both views, enabling intuitive linking between the overview and detail.

EEfratVil

72% match