Filtering in d3.js

100%

Filtering in d3.js

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Jun 22, 2014

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.

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.

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Filtering in d3.js

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.

KKirun1

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

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

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

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

79% match

Loading thumbnail…

Using an 'if' statement in v6

This example combines a line chart and scatterplot to show stock closing prices over time, with circles colored red when the price is 400 or below and black otherwise. It uses d3.line to generate the line path, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft to render them. Data is loaded from a CSV file via d3.csv and parsed with d3.timeParse. The coloring logic relies on an if statement inside the fill function.

Dd3noob

76% match

Loading thumbnail…

if selection in d3.js

This example demonstrates how to use an `if` statement within a D3.js data visualization to conditionally style elements. A scatterplot line graph displays stock closing prices over time from a CSV file, with each data point colored either red or black based on whether its value is below or above 400. The code uses the D3.js library to parse dates, create a time-scaled x-axis, apply a linear y-axis, and render both a line path and circular points via SVG.

Dd3noob

76% match