Filtering in d3.js

100%

Filtering in d3.js

✓ Published0🌍 Public

Last edited Apr 7, 2018

Created on Apr 7, 2018

This example demonstrates how the `.filter` method in d3.js selectively highlights data points on a line chart. It plots a time series of stock closing prices from a CSV file, drawing a smooth line for the full dataset, then overlays red circular dots only for values below 400. The visualization uses d3.svg.line for the path, d3.time.scale for the date axis, and d3.svg.axis for tick marks. The filtering occurs on circle elements appended via the data join, applying the condition directly to the data array before setting visual attributes.

AI-generated description

This is a follow on from the simple scatterplot used as an example in the book D3 Tips and Tricks.

It is aimed at demonstrating the use of the .filter statement in d3.js and should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/8dc93bce7e7200ab487d'>Filtering in d3.js</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Filtering in d3.js

This example shows a time-series line chart of stock closing prices, with a scatterplot overlay. A filter selects only data points with a closing value below 400, rendering those specific circles in red. The chart is rendered as an SVG using d3.js, employing the d3.time.scale and d3.scale.linear for axes, and the .filter() method on the circle’s enter selection to conditionally style points. The data comes from a CSV file with date and close columns.

Dd3noob

91% match

Loading thumbnail…

Filtering in v7

This example shows a time-series line chart of stock closing prices, with red circles highlighting all data points below 400. It uses d3.csv to load date and close values from a local CSV file, then renders an SVG line via d3.line and an x-axis with d3.scaleTime. The scatterplot dots are added with d3.selectAll and enter, but d3’s selection.filter method restricts them to values under the threshold, demonstrating filter chaining before setting circle attributes.

Dd3noob

88% match

Loading thumbnail…

Filtering in v4

This example demonstrates filtering in d3.js v4 by showing a line chart of stock closing prices over time, with red dots highlighting only the data points where the closing price falls below 400. The visualization pairs a steelblue line with scatterplot circles, using the `filter` method on the circle selection to exclude points above the threshold. It loads data from a CSV file, parses dates with `d3.timeParse`, and renders both an SVG line and axis through `d3.axisBottom` and `d3.axisLeft`. The code relies on d3.v4’s scale functions (`d3.scaleTime`, `d3.scaleLinear`) and the `d3.line` generator.

Dd3noob

88% match

Loading thumbnail…

Filtering in v6

A line chart plots daily closing stock prices from a CSV file on SVG axes using d3.scaleTime and d3.scaleLinear. Red circles, added via appended SVG circle elements, highlight only the data points whose close value falls below 400, using the filter method on a data join with d3.csv. The full line path remains visible, while the filtered scatterplot overlays show the selected subset.

Dd3noob

83% match

Loading thumbnail…

Filtering in v5

A scatterplot displays date-versus-value data from a CSV file, drawing a steelblue line for the full series and red dots only for points with values below 400. The example, built with d3.js v5, uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` to map coordinates, and applies a `.filter()` operation during circle creation to highlight only the low-value entries. SVG rendering shows the filtered points alongside the complete line and axes.

Dd3noob

80% match

Loading thumbnail…

Using an 'if' statement in v5

This example shows a time-series line chart of stock closing prices over a month, with an overlaid scatterplot of individual data points. The points are colored conditionally: red when the closing price is less than or equal to 400, and black otherwise. Built with d3.js v5 and rendered as SVG, it uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. Data is loaded from a CSV file and parsed with `d3.timeParse`. A simple inline `if` statement within the fill function demonstrates filtering logic for visual encoding.

Dd3noob

75% match

Loading thumbnail…

Brush() & Filter()

This visualization demonstrates brush-style filtering interactions on a time-series line chart, using an area chart to display stock prices from June to August 2010. The chart includes a red dashed average line and colored area fills, with data points rendered as circles that respond to mouseover tooltip events. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for coordinate mapping, and d3.axisBottom/d3.axisLeft for axes. The code relies on D3 v5’s selection, area, and curveMonotoneX APIs to construct the SVG-based animated chart, while red/green selection states are applied to the points.

11andrey3

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