Skip to main content
100%

Iterate Data

✓ Published0🌍 Public
VVioletVivirand
Last edited Apr 28, 2017
Created on Apr 28, 2017

This example displays a live-updating table of node and value pairs loaded from an external JSON file. It fetches the data via jQuery’s `getJSON` method, then iterates through each item to build a row object with `node` and `value` properties. The assembled rows are passed to the Bootstrap Table plugin, which renders them into an interactive table with sorting and pagination. The visualization emphasizes a simple data-to-table workflow, using jQuery for AJAX and DOM manipulation, and Bootstrap Table for structured presentation.

AI-generated description

Similar vizzes

Loading thumbnail…

Data table

This example displays tabular data from a JSON file as an HTML table, with columns for each data key and rows for each object. The code uses `d3.json` to load the data and d3 selections such as `selectAll`, `enter`, and `append` to construct the `table`, `thead`, `tbody`, `th`, `tr`, and `td` elements. It maps over the data’s columns and rows dynamically to populate the cells, demonstrating a straightforward data-binding workflow in D3 v6 with React’s file structure.

Jjsrussell11
67% match
Loading thumbnail…

Fork of Fork of Fork of Data Table Summary

This example displays a summary of a diabetes awareness dataset, presenting the total row and column counts alongside a preview of the first ten records in JSON format within a web page. The visualization uses D3 v5’s `select`, `csv`, and `csvFormat` functions to fetch and process the data from a remote CSV file, while also rendering an SVG background image and additional text elements. The page incorporates a large header and a hyperlink to the external data source, with the results displayed in styled `<pre>` tags.

Aajaysonu
65% match
Loading thumbnail…

Table

This gallery shows a table of tabular data, rendering each record as a row with cells for every column. The data is added to the page via an HTML table, with a header row containing the column names. It uses D3.js to bind the data and create the table structure. The example is connected to a dashboard through the `Table` function in `table.js`, pulling from a CSV file of periodic table elements.

JJerfaas
65% match
Loading thumbnail…

Fork of Fork of Data Table Summary

This example displays a summary of a diabetes awareness dataset, showing the total row count, column count, and file size in kilobytes, followed by a JSON preview of the first ten rows. It uses D3 v5’s `csv` method to load data from a remote CSV file hosted on GitHub, then appends the summary and preview as text elements to the page body using `select` and `append`. The dataset originates from a survey on pregnancies, blood pressure, and diabetic status, and the page includes a background image and link to the raw data source.

VVineela Reddy
64% match
Loading thumbnail…

D3 Data Requests

This example displays a table of data entries, each with a name and two indicators, fetched from a remote JSON endpoint. It uses D3 modules to asynchronously load the data and update the table body. The `d3.json` function retrieves the data, and `d3.select` with the `.join` method rebuilds table rows, binding each data object to a new row. The row content is generated with an inline HTML template, while CSS styles the table with a clean, minimal design.

SSubhendu Karmakar
64% 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
64% match
Loading thumbnail…

D3.js Table Example

This example displays a D3.js-generated HTML table that organizes power plant data from a JSON file, including details such as unit names, capacities, and operational statuses. The code uses d3.json to load the dataset and selects a div container to append the table, with d3.select and .append building both the header row and body rows dynamically. Each cell is populated using the .text or .html methods, allowing for inline markup in the source data. The table presents the raw array structure from the JSON’s aaData field, showing grouped entries by energy type with subtotals and annotations.

Yyuting89830@gmail.com
63% match
Loading thumbnail…

My Webpage

This example demonstrates how to embed a CSV data table directly into a webpage using the native Fetch API to load a remote file from a GitHub gist. It shows the first ten rows of parsed data displayed in an HTML table, with headers and cells populated dynamically through DOM manipulation. The page also includes basic HTML structure, a reference to an SVG logo image, and a link to a D3 version 6 tutorial video, though no D3 visualization is actually implemented. The code relies on standard browser APIs like `fetch` and `document.createElement` rather than any external charting library.

BBhavanaGIrni
63% match