Skip to main content
SimilarExport ZIP
100%

circularbrush.filter

✓ Published0🌍 Public
FFerjopero
Last edited Jul 27, 2018
Created on Jul 27, 2018

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.

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.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/b57f4cc89dacd38fcdcd'>circularbrush.filter</a>

mit Licensed

Similar vizzes

Loading thumbnail…

circularbrush.filter

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.

RRCura
88% 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
70% match
Loading thumbnail…

Brushing Circles with D3-Brush

This example demonstrates interactive brushing on a scatterplot of six circles, where dragging a rectangular selection highlights overlapping data points. It shows how a brush can filter or emphasize specific marks in a visualization. The implementation uses D3’s `brush` module, with a `brush` event listener that checks each circle’s coordinates against the selection bounds to update a `highlightedSet` in the state. Circle styling (stroke, opacity) responds to the highlighted set, and the `end` event clears highlights when the brush is dismissed. The rendering uses SVG elements via D3’s `select` and `join` pattern.

CCurran Kelleher
70% 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
70% 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
70% 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
69% match
Loading thumbnail…

Brushing

This example demonstrates interactive brushing on a small scatter plot of weight and height data from a CSV file. Users drag a rectangular brush region to highlight data points, turning selected circles red and unselected ones blue. The visualization uses D3 v6 with an SVG rendering, a linear scale for both axes, and d3.brush to manage the selection. Points are positioned using transitions and axes are rendered with d3.axisLeft and d3.axisBottom.

DDasbach.EJ
69% 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
68% match