datatable

100%

✓ Published0🌍 Public

Last edited Oct 22, 2017

Created on Oct 19, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/31c76713fe83e85196b00f9026aaf7d8'>datatable</a>

mit Licensed

Similar vizzes

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

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

73% match

Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr

72% match

Loading thumbnail…

HTML Starter

This example demonstrates horizontal and vertical bar charts built with D3 v5, rendering SVG elements with animated transitions. The visualization reads data from a CSV file and displays multiple series with customizable colors, selection highlights, and optional area fills. Users can toggle between bar and line representations per series, with axis ranges configurable for both left and right sides. Hovering over chart sections reveals tooltips showing weekly values via mouse events, while invisible selection rectangles enable interactive node highlighting. The code leverages d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom, and axisRight for data binding and chart construction.

Mmauryaamit

72% match

Loading thumbnail…

Simple Template Example

This example demonstrates an interactive bar chart built with D3.js that visualizes CSV data. The chart is rendered as an SVG and includes three buttons—"Prices," "Transmission Limits," and "List"—that allow users to load different datasets (prices, transmission, or list data) and redraw the bars. The visualization highlights D3's data join pattern: entering rectangles are added in dark red, updates are colored green, and exiting elements are removed, illustrating the enter-update-exit selection model. The bar heights are scaled linearly to the maximum value in the dataset, and the chart is displayed within a bordered SVG container. The example serves as a teaching tool for D3 selections, scales, and basic bar chart construction.

CCBasis

72% match

Loading thumbnail…

D3 Page Template

This example uses D3 v5 to render a simple bar chart. It creates an SVG canvas of 300 by 300 pixels, then defines a dataset of six numeric values. The code selects the SVG element, binds the data to it, and appends rectangles with widths proportional to the data values. Each rectangle’s height is fixed at 30 pixels minus a small gap, and its y-position is offset by index. The bars are uniformly colored steel blue. The rendering is purely SVG-based, using `d3.select`, `.append`, `.data`, and `.enter` to construct and position the bars.

AAn Jingyi

72% match

Loading thumbnail…

Sortable Table with Bars

This example shows a sortable data table of U.S. state populations by age group. Each cell contains a horizontal bar, drawn as an SVG rectangle, whose length is proportional to the percentage of that state’s total population falling into the corresponding age bracket. Clicking a column header sorts the table rows in descending order by the selected age group’s share of the total, allowing quick comparison across states. Hovering over a row highlights its bars in brown. The table is implemented with D3 v3, binding CSV data to an HTML table and using SVG rects for the in-cell bar charts.

AAlainRo

71% match

Loading thumbnail…

Sortable Table with Bars

This example displays demographic data for U.S. states as a sortable HTML table, where each age-bracket column is rendered as a horizontal bar chart. Clicking a column header re-sorts the table rows by the proportion of the population in that age range, with bar lengths proportional to that share. The visualization uses D3 v3 to load the CSV data with `d3.csv`, then builds the table structure with `d3.select`, `selectAll`, and `.data`, appending SVG elements to each cell. The bars are drawn as `rect` elements whose widths are calculated from the percentage values, with hover styling applied via CSS.

Mmbostock

71% match