Gist a24cfeae50d77b7826884907ab4659bb

100%

Gist a24cfeae50d77b7826884907ab4659bb

✓ Published0🌍 Public

Last edited May 18, 2019

Created on May 18, 2019

This example shows a Tableau dashboard extension that displays the data from a worksheet named "articlelist" in an interactive HTML table. When the user changes a filter on that worksheet, the table reloads to reflect the updated data. It uses the Tableau Extensions API to access summary data and the DataTables jQuery plugin to render the table with features like fixed headers and row striping. The code listens for filter-changed events and re-populates the table dynamically.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 0445ab696d247d2b99136b7aefe88708

This embedded Tableau visualization presents a dashboard on the Komdecrisis (Dutch debt crisis) data, showing economic indicators and trends over time. The page loads a Tableau Public workbook via the Tableau JavaScript API, using a dynamic iframe that adjusts its width and height based on the container’s size. It relies on the `viz_v1.js` API to render the interactive chart, with parameters for toolbar, transitions, and static image fallback, while the dataset appears to be sourced from a shared Tableau workbook linked by path `shared/885J3HH62`.

Aantichaos

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

66% match

Loading thumbnail…

Tableau embed - gives error

This example embeds a Tableau public dashboard and demonstrates programmatic filtering through the Tableau Embedding API. The page includes three buttons that trigger JavaScript functions: one applies a filter to replace the state values with Washington and Oregon, another clears the State filter, and the third performs an undo action. The embedded visualization loads from a Tableau public URL with predefined filters for Category and State, displayed in a phone layout with a bottom toolbar. The code uses the `tableau-viz` web component and methods like `applyFilterAsync`, `clearFilterAsync`, and `undoAsync`.

Aantichaos

64% match

Loading thumbnail…

Table

This gallery shows a table of tabular data, rendering each record as a row with cells for every column. The data is added to the page via an HTML table, with a header row containing the column names. It uses D3.js to bind the data and create the table structure. The example is connected to a dashboard through the `Table` function in `table.js`, pulling from a CSV file of periodic table elements.

JJerfaas

62% match

Loading thumbnail…

datatable

This example combines D3.js with the DataTables jQuery plugin to create an interactive data table and a linked bar-chart-style visualization of 500 generated rows. The page renders a scrollable, reorderable table with columns for ID, names, ZIP code, and country, while a horizontal row of thin rectangles above it represents each record. Hovering over a rectangle triggers a throttled mouseover event that scrolls the corresponding table row into view and highlights it, with a text element displaying the row index. The table uses the Scroller extension for virtual rendering and RowReorder for drag-and-drop sorting, while D3 manages the SVG rectangles and event handling.

AAlainRo

62% match

Loading thumbnail…

Gist dd66e34b244896670059a1be529633da

This example renders a markdown table as a simple data visualization, showing the relationship between two columns of text content. The code uses D3.js to parse the table structure and display the cells in a grid layout. It relies on standard D3 selection and data-binding methods to map each row and column to positioned text elements. The visualization draws directly from the gist’s embedded markdown data, converting the header and body cells into a clean, readable chart without additional processing or external data sources.

Aabernier

61% match

Loading thumbnail…

Working all filters

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.

GGayan Priyadarshana

61% match

Loading thumbnail…

Create a reusable table using d3 and jquery DataTables

A reusable table component built with D3 and jQuery DataTables displays gene expression data with columns for GeneID, LogFC, AvgExpr, Log2Sigma, color, symbol, p-value, and x/y coordinates. The component is implemented as a closure with setters and getters, allowing it to be configured without hardcoding data-specific attributes. A dispatcher broadcasts `highlight` and `select` events triggered by table interactions, and a listening div updates its text content in response. This modular design keeps the table decoupled from the data structure while enabling responsive behavior through event-driven communication.

Aahmohamed

61% match