Skip to main content
SimilarExport ZIP
100%

D3.js Sortable & Responsive Table

✓ Published0🌍 Public
Aachintyatripathi
Last edited Oct 24, 2020
Created on Oct 24, 2020

This interactive table displays police station accident data from a CSV file, allowing users to sort rows by clicking any column header. Built with D3.js v3, the visualization loads data via `d3.csv` and dynamically creates an HTML table. Clicking a header toggles ascending and descending sort order, updating arrow indicators on the active column. The table is responsive, using CSS media queries to transform from a standard layout on desktop to a card-style display on mobile devices, where each cell is labeled with its corresponding column name.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js Sortable & Responsive Table

This interactive table displays Singapore parliamentary election data from a CSV file, showing parties and alliances alongside their SMC and GRC seat counts. Clicking any column header sorts the table rows in ascending or descending order, with ascending and descending sort indicators indicated by arrow glyphs. The example uses d3.csv to load the data and D3’s selection, data binding, and sorting methods to build and reorder the table. CSS media queries and data-th attributes make the table responsive, transforming it from a standard grid into stacked rows on small screens.

SSeanisgod1994
76% match
Loading thumbnail…

Untitled

This interactive bar chart displays road accident statistics across police stations, with a dropdown menu to switch between different data columns such as fatalities, injury severity, collision types, and day of the week. Built with D3 v3 and React, the visualization uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and SVG rectangles that smoothly animate via `transition().ease()` when the selected metric changes. Data is loaded from a CSV file, and hover tooltips reveal exact values per station.

Aachintyatripathi
76% match
Loading thumbnail…

Untitled

This interactive bar chart displays road accident statistics across eight police stations in the Ropar district, using data from a CSV file. A dropdown menu lets the user select different variables, such as fatalities by severity, day of the week, vehicle type, or collision type, and the bars update with smooth transitions. The visualization uses D3 v3 with an ordinal x-scale and linear y-scale to map police stations and case counts, while hovering over a rectangle highlights it and shows a tooltip with the station name and value.

Aachintyatripathi
75% 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
74% match
Loading thumbnail…

CSV to HTML Table with D3.js

This example displays the conversion of a CSV file into an HTML table using D3.js, with a header, styled rows, and hover effects. The code loads data from a remote CSV URL via `d3.csv`, then calculates and displays the file size, row count, and column count in a `<pre>` element. It uses D3 v7 and plain JavaScript, with CSS for table borders, padding, and row highlighting. The visualization focuses on data ingestion and basic formatting rather than advanced chart rendering.

Aachyutanandmishra17@gmail.com
71% 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…

sortable table

This interactive table displays product data with sortable columns for name, price, and stock. Built with React, it uses custom hooks containing `useState` and `useMemo` to manage and calculate sorting logic, toggling between ascending and descending order on click. The header buttons trigger the sort and display directional indicators defined in CSS. D3 is included in the page for potential data manipulation, though the core functionality relies on React state and event handling.

XXiaoyu Su
69% match
Loading thumbnail…

JS table manipulation test - jsFiddle demo by RichardMathie

This interactive demo shows a D3.js workflow for loading and manipulating tabular data from a CSV file. The page uses `d3.csv` to parse ride information, including distance, time, and ascent, while the JavaScript console demonstrates how to select and transform SVG circles, bind data, and dynamically add or remove elements. The visualization also explores creating sortable HTML tables with Bootstrap Table, using D3 selections to append table headers and apply attributes like `data-sortable`. The rendered output is an SVG scatter plot, though the main focus is on the code-driven table manipulation.

DDavid-Wong110723
69% match