d3v4 - Selective Table

100%

d3v4 - Selective Table

✓ Published0🌍 Public

Last edited Feb 19, 2020

Created on Jul 15, 2018

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.

AI-generated description

[Gist] https://gist.github.com/Hirosaji/e8c44272a3863482ef27f0fd76e1589d

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3v4 - Switchable Table

A switchable table visualizes monthly job and industry category data, allowing users to toggle between two datasets via buttons labeled 職種別 and 業種別. The table initially sorts by a default month column and supports interactive re-sorting by clicking any header, which highlights the active column in red. Built with d3.v4, the example uses `d3.queue` and `d3.tsv` to load both tab-separated files, then dynamically appends an HTML table via `d3.select` and handles data binding with `enter()` and `merge()`. Sorting is implemented by comparing string values on the selected header, and header classes are updated with `classed` to reflect the chosen sort key.

HHirosaji

84% match

Loading thumbnail…

D3 Table

This example renders the Iris Dataset as a clean HTML table using D3.js v6. The code builds the table dynamically with `d3.select`, `.append`, and `.join` to create table headers and rows from CSV data loaded via `d3.csv`. Numeric columns are parsed with a custom row function, and the table is styled via external CSS. Though a scatter plot module is imported, the active visualization focuses solely on the tabular presentation.

AAlpineStranger

70% match

Loading thumbnail…

D3_CookBook(v5)_Ch2 pt2

Three HTML tables display financial transactions, with each table's rows styled differently through D3 selections. The example demonstrates raw DOM selection and manipulation using d3.select and .selectAll("tr") to target table rows, then applying CSS classes like "table-header" and "table-row-odd" based on row index. It shows how to filter row elements via a selection's .select(function(d, i) { ... }) callback, checking an element's position before assigning class attributes. The code adapts older D3 v3 patterns to D3 v5, highlighting changes in how raw selections and element references are handled.

JJimMaltby

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

69% match

Loading thumbnail…

d3 tutorial

A tutorial demonstrates basic D3.js selection and DOM manipulation using a static HTML page with car listings and paragraphs. The code uses `d3.select` and `d3.selectAll` to change text colors—turning headings blue, list items magenta, and paragraphs green—and to style nested table cells with cyan backgrounds. Data binding via `.data()` maps an array of numbers to blank `h2` elements, while class-based selectors color warning and error messages. All styling is applied through D3's `.style()` and `.text()` methods on the live DOM.

Bbmurill2019

69% match

Loading thumbnail…

ingesting data with d3

This example demonstrates how to ingest a CSV file into a web page using D3 version 7, displaying demographic data as an HTML table. The code loads `data.csv` via `d3.csv` and maps each row into a structured object with renamed properties like `year`, `total`, and `hispanic`. Using D3’s data join, it programmatically builds a table with `<thead>` and `<tbody>` elements, populating cells with values for selected columns. The example uses `d3.select`, `append`, `selectAll`, and `.data` to render the tabulated data, with the imported module `index.js` importing from `d3`.

RRoland

69% match

Loading thumbnail…

d3 data table basics

This example shows a simple SVG-based data table visualization built with D3 and React, where a set of black horizontal lines represent table rows, with a highlighted red row to draw attention. The code uses `d3.select` to grab the SVG element, reads its width and height attributes, and renders the lines as SVG `<path>` elements using `d3.arc`. The stylesheet controls stroke color and width, while a `.highlighted` class turns the selected row red. The visualization demonstrates basic D3 data binding and SVG rendering without any interactive behavior.

Hhortulanus

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

68% match