D3.js Sortable & Responsive Table

100%

D3.js Sortable & Responsive Table

✓ Published2🌍 Public

SSeanisgod1994

Last edited Sep 30, 2020

Created on Sep 30, 2020

Forked from Untitled

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js Sortable & Responsive Table

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.

Aachintyatripathi

76% match

Loading thumbnail…

Bar chart.js

This example visualizes the popular vote counts for political parties and alliances in Singapore's 2020 general election using a horizontal bar chart. Each bar represents a party's total votes, with hover interactions turning bars red and tooltips displaying the exact vote count. The chart is rendered as SVG using D3 v6, with data loaded from a CSV file. The code leverages `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to map votes to bar widths and party names to the y-axis, while removing default axis lines and ticks for a cleaner appearance.

SSeanisgod1994

75% match

Loading thumbnail…

Making bar charts

This example shows the results of Singapore’s 2020 parliamentary election as a bar chart, with each party’s popular vote displayed as a horizontal bar. The chart is built using D3.js v5, reading tabular data from a CSV file via `d3.csv` and mapping the values to bar lengths. The bars are rendered as SVG rectangles, with text labels for each party name and vote count. The data originates from the file `data.csv`, containing party names and their corresponding popular vote totals.

SSeanisgod1994

75% match

Loading thumbnail…

Untitled

This interactive visualization presents the results of Singapore’s 2020 general election, showing popular vote shares by party in a pie chart alongside constituency-level maps and tables. Users can switch between tabs for overall results, single-member constituencies (SMCs), group representation constituencies (GRCs), and party breakdowns. The code uses d3.pie and d3.arc to generate the animated pie chart, while d3.geoPath renders the geographic maps from TopoJSON data. Tooltips, implemented via d3-tip, display additional details on hover, and the CSV data is loaded and bound to the visual elements.

SSeanisgod1994

74% match

Loading thumbnail…

Untitled

An interactive interface displaying the results of Singapore’s 2020 General Election for Group Representation Constituencies (GRCs). Clicking a tab for a GRC reveals its total electors, votes cast, valid votes, and spoilt votes, alongside the winning and runner-up parties with their vote percentages. The code uses plain HTML tables and JavaScript functions to update the content dynamically. Party icons are shown via image sources, and styling is applied through a separate CSS file. The data is hardcoded within the JavaScript functions, not loaded from an external source.

SSeanisgod1994

74% match

Loading thumbnail…

scatter chart.js

This scatter chart displays the popular vote counts for political parties and alliances in a Singapore election, with each party represented as a circle along a categorical y-axis. The x-axis uses a linear scale to show vote totals, while the y-axis uses d3.scalePoint to space parties evenly. The visualization is built with D3 v6, loading data from a CSV file and rendering SVG elements using d3.axisLeft and d3.axisBottom for the axes, with circles styled in steelblue via CSS.

CCyc-Evelyn

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

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

68% match