How do I use the "Create Interactive Data Filters" prompt?

Copy the prompt template, fill in the variables (DATASET_DESCRIPTION, DATA_FIELDS, TARGET_USERS, USE_CASE, TECH_STACK, FILTER_TYPES, PERFORMANCE_REQUIREMENTS), and paste it into ChatGPT, Claude, or Gemini.

What AI tools work with this data prompt?

This prompt works with chatgpt, claude, gemini. Simply copy and paste the template into any of these AI assistants.

Tips for getting the best results?

Use debouncing for text search filters to avoid excessive API calls while users type Implement progressive disclosure - show only the most important filters initially, with an option to expand Add visual feedback like result counts or loading spinners to show filter effects immediately Consider filter dependencies - hide irrelevant options when other filters are applied Test with large datasets to ensure smooth performance and consider implementing virtual scrolling for results

data intermediate

Create Interactive Data Filters

Generate code and specifications for interactive data filters that make complex datasets searchable and user-friendly.

Works with: chatgptclaudegemini

Prompt Template

You are an expert data visualization developer. Create interactive filter specifications and code for a dataset visualization interface. Dataset Context: - Dataset: [DATASET_DESCRIPTION] - Data columns/fields: [DATA_FIELDS] - Target users: [TARGET_USERS] - Primary use case: [USE_CASE] Filter Requirements: - Technology stack: [TECH_STACK] - Filter types needed: [FILTER_TYPES] - Performance constraints: [PERFORMANCE_REQUIREMENTS] Please provide: 1. Filter Architecture Design: - Overall filter layout and organization - User experience flow for applying filters - Clear visual hierarchy for filter controls 2. Technical Implementation: - Complete code for each filter component - State management for filter combinations - Efficient data querying/filtering logic - Real-time result updates 3. Filter Components: - Search boxes with autocomplete - Range sliders for numerical data - Multi-select dropdowns for categories - Date range pickers - Toggle switches for boolean filters 4. Advanced Features: - Filter presets/saved configurations - Clear all filters functionality - Filter result counters - Export filtered results option 5. Responsive Design: - Mobile-friendly filter controls - Collapsible filter panels - Touch-optimized interactions Include error handling, loading states, and accessibility considerations. Provide working code examples with comments explaining the filtering logic.

Variables to Customize

[DATASET_DESCRIPTION]

Description of your dataset and its purpose

Example: E-commerce product catalog with 10,000+ items including electronics, clothing, and home goods

[DATA_FIELDS]

List of data columns that need filtering

Example: product_name, category, price, brand, rating, availability, color, size, date_added

[TARGET_USERS]

Who will be using these filters

Example: Online shoppers looking to find specific products quickly

[USE_CASE]

Primary purpose of the filtering system

Example: Help customers narrow down product search results and find items matching their preferences

[TECH_STACK]

Technology framework you're using

Example: React with TypeScript, using Material-UI components

[FILTER_TYPES]

Specific types of filters needed

Example: text search, price range slider, category dropdown, brand multi-select, rating filter

[PERFORMANCE_REQUIREMENTS]

Performance constraints or requirements

Example: Filters must update results in under 200ms, handle 50,000+ records efficiently

Example Output

## Filter Architecture Design **Layout**: Sidebar-style filter panel with collapsible sections, main content area for filtered results. **UX Flow**: Progressive filtering where each selection immediately updates available options in other filters. ## Technical Implementation ```javascript const ProductFilters = () => { const [filters, setFilters] = useState({ searchTerm: '', priceRange: [0, 1000], categories: [], brands: [], minRating: 0 }); const handleFilterChange = (filterType, value) => { setFilters(prev => ({ ...prev, [filterType]: value })); }; return ( <FilterContainer> <SearchFilter value={filters.searchTerm} onChange={(val) => handleFilterChange('searchTerm', val)} placeholder="Search products..." /> <PriceRangeSlider range={filters.priceRange} min={0} max={1000} onChange={(range) => handleFilterChange('priceRange', range)} /> </FilterContainer> ); }; ``` **State Management**: Uses React Context for filter state sharing, debounced updates for performance. **Advanced Features**: - Filter presets: "Under $50", "Top Rated", "New Arrivals" - Result counter showing "1,247 products found" - One-click filter clearing - Export to CSV functionality **Mobile Optimization**: Collapsible filter drawer, touch-friendly sliders, optimized for thumb navigation.

Pro Tips for Best Results

Use debouncing for text search filters to avoid excessive API calls while users type
Implement progressive disclosure - show only the most important filters initially, with an option to expand
Add visual feedback like result counts or loading spinners to show filter effects immediately
Consider filter dependencies - hide irrelevant options when other filters are applied
Test with large datasets to ensure smooth performance and consider implementing virtual scrolling for results