Filtering in v5

100%

Filtering in v5

✓ Published0🌍 Public

Last edited Nov 27, 2019

Created on Nov 27, 2019

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.

AI-generated description

This is a simple graph demonstrating filtering. Specifically filtering graph points that fall below 400. This was written using d3.js v5 and is a follow on to the simple scatter plot example here.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 of d3.js.

mit Licensed

Similar vizzes

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

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

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

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

80% match

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

79% match

Loading thumbnail…

Scatterplot with v5

This example shows a time-series line graph of stock closing prices, with circular scatterplot points overlaid on each data value. The visualization uses a steelblue line and dark circles to highlight individual daily observations across the date range. Built with d3 v5 and rendered as SVG, the code employs `d3.csv` to load the data, `d3.timeParse` for date formatting, and `d3.line` for the path, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. The scatterplot points are appended as SVG circles positioned via the same x and y scales.

Dd3noob

79% match

Loading thumbnail…

Making Scatter Plot with D3

This example shows a scatter plot of date-value pairs from a CSV file, with points animating from radius 0 to 5 over one second. It uses D3 v5’s `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom`, and applies an SVG `transition` to grow the circles. The y-axis scales values, while the x-axis maps dates as categorical points. Data is loaded via `d3.csv`, and the plot includes labeled axes and a title.

JJuan David Bolaños Rojas

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