Skip to main content
100%

Create a reusable table using d3 and jquery DataTables

✓ Published0🌍 Public
Aahmohamed
Last edited Feb 15, 2018
Created on Sep 29, 2015

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.

AI-generated description

This is an exmaple of resuable components using d3. They are described as 'closures (i.e. functions) with setters and getters'. In this example, _table is the closure.

To make the component responsive, we add a dispatcher which broadcasts events happening inside the component to all listeners. In this example, a div listens to highlight and select events from the table, and changes its text accordingly.

Notice that I didn't assume anything about the data other that its structure. Also, I didn't hardcode any data-specific attributes.

gpl-3.0 Licensed

Similar vizzes

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
72% match
Loading thumbnail…

Table_Cell Integration Trial12_final

This interactive visualization maps gene expression levels across subcellular locations, displaying net differential expression as red and blue color intensities on a stylized cell diagram. Users can select locations like the plasma membrane or nucleus to filter a sortable gene information table showing DEG values and associated biological pathways. Built with React and D3 v5, the SVG rendering uses `scaleSequential` with `interpolateBlues` and `interpolateReds` for coloring, while `d3.line` with `curveCardinal` draws cellular compartments. Gene data loads from external JSON and TSV files, with hover effects and animated table transitions.

Yyoungchun-kwon
71% match
Loading thumbnail…

Table_Cell Integration Trial_SuperSuperSuperFinalFinalFinal

This interactive visualization maps gene expression data onto a diagram of a cell, showing the net differential expression (DEG) for each cellular location through blue and red sequential color scales. Users can click on a cell region to update a sortable HTML table of associated genes and a treemap of hierarchical gene categories. Built with React and D3 v5, it uses SVG paths, `scaleSequential` with `interpolateBlues` and `interpolateReds`, and `transition` for table updates. Data is loaded via `d3.json` and `d3.tsv` from a remote GitHub repository.

MMinwoo Pak
71% match
Loading thumbnail…

d3NoobV5 Reusable Examples - Add an HTML table to your graph v3

A reusable line chart shows stock closing prices over time, with an HTML table appended below the SVG rendering. The chart uses D3 v5 scales, axes, and a line generator to map dates to values from a CSV dataset. A table-XX class selector, though misspelled, defines table styling, while the d3.reusable pattern structures the modular chart. The example demonstrates combining SVG data visualization with HTML table output within a single reusable component, following the ProD3 pattern.

JJimMaltby
71% match
Loading thumbnail…

Table_Cell Integration Trial12_EH

This interactive visualization maps gene expression data onto a stylized diagram of a cell, showing which subcellular locations (e.g., plasma membrane, cytosol) have up- or down-regulated genes. It integrates a treemap of gene ontology categories, a color-coded cell diagram drawn with `d3.line` and `curveCardinal`, and a filterable HTML table. The code uses `d3.scaleSequential` with `interpolateBlues` and `interpolateReds` to color cell regions based on net differential expression values, and transitions animate table row updates.

PParkhwahwa
70% match
Loading thumbnail…

TEST - Cell_Table_Integration

This interactive visualization integrates a color-coded model of a cell with a filterable data table. It shows the locations of gene expression within cellular compartments, such as the plasma membrane and cytosol, by mapping the cumulative net differential expression (net_DEG) of user-selected genes to a red-blue color scale. Users can hover over the cell diagram to select specific locations, and the linked table displays gene information, including the number of associated level1 and level2 cellular locations. The application is built with React and uses d3 for SVG rendering, path generation, and data processing, sourcing its data from a provided JSON database and a text file containing the gene list.

PParkhwahwa
70% match
Loading thumbnail…

Table using d3.js

This example demonstrates a searchable, sortable data table built with D3.js and the DataTables jQuery plugin. It displays airport data loaded from a raw GitHub file using `d3.text` and parsed with `d3.csvParseRows`. The `tabulate` function appends table headers and rows via D3 selections, then initializes DataTables with `$('#example').DataTable()` to add interactive features. The page uses HTML, CSS, and JavaScript in a single `index.html` file, with external libraries loaded via CDN.

Vvigneswaran009
70% match
Loading thumbnail…

geneInfoTable

This example presents a sortable data table of gene information, displaying columns such as gene name, DEG values, and subcellular location lists. The table is built with D3 v5 and React, using `d3.select` and `d3.ascending`/`d3.descending` for column sorting. Data is loaded from JSON and TSV files via `d3.json` and `d3.tsv`, with the table rendered as SVG and styled via CSS.

MMinwoo Pak
70% match