Text Search / Filter

Description

Text search / filter provides a text input field where users type a query string to filter, highlight, or navigate to data items whose labels, names, or other textual attributes match the query. As the user types, the visualization updates in real time — either hiding non-matching items, dimming them, or scrolling/zooming to bring matching items into focus. This is the “Ctrl+F for data visualization.”

Text search is one of the most direct ways to bridge the gap between a user’s existing knowledge and the visual display. If someone knows they are looking for “California” in a choropleth, “Toyota” in a scatterplot of car models, or “BRCA1” in a gene network, a text search is faster than any amount of visual scanning. It converts a recognition task (scanning the chart for a known item) into a recall task (typing its name), which is faster when the user already knows what they are looking for.

The interaction scales well to datasets with hundreds or thousands of labeled items where visual search alone would be impractical. It is especially valuable in network diagrams, large scatterplots, and geographic maps where the spatial layout does not correspond to any alphabetical or categorical ordering the user might use to locate a specific item. Most implementations use substring matching with optional fuzzy matching or autocomplete suggestions to handle partial or misspelled queries.

When to Use

• When the dataset has named entities (countries, companies, genes, people) and users will often search for specific ones.
• When the visualization has too many labeled items for visual scanning to be practical.
• When the spatial layout does not correspond to any ordering that would help users locate a known item.
• As a complement to visual exploration — the user spots a pattern, then searches for specific items to check if they are part of it.
• In dashboards where users frequently return to check on the same items.

When NOT to Use

• When the data has no meaningful text labels to search against (purely numerical data).
• When the dataset is small enough (under 20 items) that all labels are already visible and scannable.
• When the user does not know what to search for — text search requires prior knowledge of the item name.
• When the primary interaction should be spatial (brushing regions) rather than nominal (finding named items).

How It Works

1. A text input field is placed above, beside, or overlaid on the visualization.
2. As the user types, the system computes which data items match the query (substring match, prefix match, or fuzzy match).
3. Matching items are highlighted in the visualization — their marks gain full opacity, a bright stroke, or an animated pulse, while non-matching items are dimmed.
4. Optionally, the view pans or zooms to center on the first matching item, especially useful in large maps or networks.
5. An autocomplete dropdown may appear below the input, showing matching item names and allowing the user to select one.
6. Clearing the input restores the visualization to its default state with all items visible.

Variations

• Highlight mode: All items remain visible but matching items are visually emphasized. Good for showing the matching items in context.
• Filter mode: Non-matching items are removed entirely, reducing the dataset to only matches. Good for narrowing down to a small subset.
• Fuzzy search: Tolerates typos and partial matches using algorithms like Levenshtein distance or Fuse.js. More forgiving but may surface irrelevant matches.
• Multi-field search: The query is matched against multiple attributes (name, category, description), not just the primary label.
• Autocomplete with preview: As the user types, matching items are listed in a dropdown and simultaneously highlighted in the chart, giving a preview before committing to a selection.
• Regex search: Power users can type regular expressions for pattern-based matching (e.g., ^New to find all items starting with “New”).

Code Reference

// Text search with live highlighting on a D3 scatterplot
const searchInput = d3.select("#search-input");

searchInput.on("input", function () {
  const query = this.value.toLowerCase().trim();
  svg.selectAll("circle")
    .transition().duration(200)
    .style("opacity", d =>
      !query || d.name.toLowerCase().includes(query) ? 1 : 0.08
    )
    .attr("r", d =>
      query && d.name.toLowerCase().includes(query) ? 8 : 4
    );
});