11 - Filtering in d3.js

100%

11 - Filtering in d3.js

✓ Published0🌍 Public

Last edited Oct 31, 2016

Created on Oct 31, 2016

This example shows a time-series line chart of stock closing prices, with red circles highlighting data points below 400. The circles act as interactive tooltips, revealing the date and a link when hovered. Built with d3.js v3, the visualization uses d3.svg.line for the line path, d3.svg.axis for the axes, and d3.time.format for date parsing. The scatterplot circles are filtered using .filter(), and hover interactions trigger tooltip transitions via d3.select and .style. Data comes from a CSV file containing date, close price, and URL columns.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/4e6492eba6a7a5f5958579103b11aeba'>10 - Simple d3.js tooltip</a>

gnuplot 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 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

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

86% match

Loading thumbnail…

12 - If selection in d3.js

A line chart displays stock closing prices over time, with each data point colored by value: red below 400, orange between 400 and 620, and green above 620. The d3.v3 code parses CSV data and uses `d3.svg.line` for the path, `d3.time.scale` for dates, and `d3.svg.axis` for scales. Hovering over a circle triggers a tooltip showing the date and closing price, linking to a URL.

Aadry34160

86% match

Loading thumbnail…

10 - Simple d3.js tooltip

A line chart shows stock closing prices over time, with each data point marked by a circle. Hovering over a circle triggers an animated tooltip that displays the date, price, and a hyperlink to the associated URL. The visualization uses d3.v3 to parse CSV data, build the SVG path and axes, and manage the tooltip’s opacity and position via d3.event.pageX and pageY. The tooltip is styled as a rounded orange div, though mouseout behavior is commented out.

Aadry34160

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

82% match

Loading thumbnail…

9 - Simple scatterplot with d3.js

This example visualizes stock closing prices over time using a combined line and scatterplot. The code plots each date’s close value as a small circle, with a steelblue line connecting the points to emphasize the overall trend. It uses d3.v3 with SVG rendering, employing d3.time.scale for the date axis and d3.scale.linear for the price values. The axes are generated via d3.svg.axis, while the line is drawn with d3.svg.line and the points are appended as SVG circle elements. Data comes from a local CSV file containing date and close columns.

Aadry34160

81% match