Working all filters

100%

Working all filters

✓ Published0🌍 Public

Last edited Aug 29, 2023

Created on Aug 29, 2023

Forked from Fork of filters changing the headers correctly

This example shows a filterable data table that displays website assessment records across time periods. A dropdown menu lets the user select a frequency—Daily, Weekly, BiWeekly, or Monthly—which updates the table to show the latest 12 columns of data for that interval. The code uses D3.js v7 modules including `csv`, `select`, `group`, and a custom `menu` component built on `dispatch`. Data is loaded from a CSV file, then grouped by website name and sorted by date, with column headers dynamically generated based on the selected frequency.

AI-generated description

https://d3-graph-gallery.com/graph/bubblemap_template.html

MIT Licensed

Similar vizzes

Loading thumbnail…

weekly filter try

This interactive table visualizes website assessment frequencies, filtering data by daily, weekly, bi-weekly, or monthly intervals via a custom dropdown menu. It dynamically displays the 12 most recent time periods as column headers, grouping rows alphabetically by DPC website. The visualization uses D3 v7 modules (`csv`, `select`, `group`) and a reusable menu component built with `dispatch`. Data originates from a remote CSV file hosted on GitHub Gist. HTML table elements are created and updated through D3’s data join methods.

GGayan Priyadarshana

87% match

Loading thumbnail…

filters changing the headers correctly

This interactive table filters pharmaceutical assessment data by frequency (Daily, Weekly, BiWeekly, Monthly) via a custom D3 menu. It displays a leaderboard of DPC websites, with columns dynamically updating to show the latest twelve time periods matching the selected frequency—dates, weeks, or month-year headers. Built with D3 v7, the code uses d3.csv for data loading, d3.group for aggregation, and custom menu and dispatch APIs to update table headers and cells reactively based on user input.

GGayan Priyadarshana

84% match

Loading thumbnail…

Fork of filters changing the headers correctly

This interactive table visualizes assessment data, allowing users to filter by frequency (Daily, Weekly, BiWeekly, Monthly) via a custom menu. The table displays DPC website names as rows, with columns dynamically updating to show the 12 most recent time periods—dates, weeks, or month-year labels—depending on the selected frequency. Built with D3.js v7, the visualization uses `d3.csv` to fetch remote data and `d3.group` to structure entries. The menu component is custom-built with an `on` method that triggers table regeneration.

GGayan Priyadarshana

83% match

Loading thumbnail…

Filtering Data Correctly

This example shows a data table of drug price changes across pharmaceutical companies, filtered by assessment frequency (Daily, Weekly, BiWeekly, Monthly) via a dropdown menu built with the d3.menu component. The table displays the 12 most recent year-month columns, with cell colors based on change-value quartiles computed from the data. It uses d3.csv to load the dataset and d3.group to aggregate rows by company name, with table elements created dynamically.

GGayan Priyadarshana

79% match

Loading thumbnail…

Fork of Fork of Table

This interactive D3.js v7 visualization displays a heatmap-style pricing table for DPC website names, comparing new price values against change percentages across time periods. The visualization includes a dropdown menu allowing users to filter data by assessment frequency (Daily, Weekly, BiWeekly, or Monthly), dynamically updating the table to show the 12 most recent time columns. The code utilizes D3's `csv` for data loading, `group` for data aggregation, and custom menu functionality with `dispatch` events. Data is filtered and sorted in descending chronological order, with color-coded cells indicating price changes.

GGayan Priyadarshana

71% match

Loading thumbnail…

Table with Filter

A table of names, ages, and cities allows filtering its rows through interactive dropdown menus placed in the header. Selecting a value from any menu hides rows that do not match the chosen text in that column, while multiple selections combine to show only rows meeting all criteria. The implementation uses jQuery to listen for `change` events on the `.filter` selects, reads each menu’s `data-column` attribute to locate the corresponding table cell, and toggles row visibility by calling `hide()` and `show()` on the filtered `<tbody>` elements. All data is hardcoded within the HTML file.

HHéctor del Castillo

71% match

Loading thumbnail…

Untitled

This example demonstrates an interactive data table with filtering, sorting, and pagination controls, showing country-level economic indicators such as population, exchange rates, and GDP. Built with the TableFilter library, it provides dropdown selectors for country, ISO code, and year, along with custom numeric range filters and column-specific sorting. The table includes features like row counters, reset buttons, highlighted active columns, and keyword highlighting, all styled with custom CSS. Data is embedded directly in the HTML table structure, and TableFilter handles the client-side filtering and interaction logic.

JJunepp

70% match

Loading thumbnail…

d3v4 - Selective Table

This example presents an interactive table for exploring job-category data across several months, with the data loaded from a TSV file using `d3.queue` and `d3.tsv`. It shows how users can selectively highlight rows and columns by clicking items in two separate lists (jobs and dates), which toggle a `__checked` class and reorder the table’s headers based on click order using `d3.selectAll` and `classed`. The table is rendered with plain HTML elements, and a `__selected` class marks the most recently clicked header.

HHirosaji

69% match