JSON DGrid

100%

✓ Published0🌍 Public

Last edited Feb 27, 2018

Created on Feb 2, 2018

This example displays a small dataset of twenty JSON objects, each with a "number" and "letter" field, in a tabular grid where rows group by the numeric field and columns correspond to the letters. The visualization uses the HPCC Systems JavaScript libraries, specifically the `@hpcc-js/dgrid` package's `Table` component, to render the data. It loads the raw JSON array from a variable named `WUResultResponse` and passes it to the `importJSON` method, then targets a placeholder `<div>` element for output via the `.target()` and `.render()` calls.

AI-generated description

Similar vizzes

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

65% match

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

64% match

Loading thumbnail…

Assignment_1_task10

This example loads a tabular dataset from a gist using d3.csv and displays the first ten rows as JSON in the browser. It uses D3 v5's select, csv, and csvFormat APIs to fetch and format the data, and appends the output to the page as pre elements. The visualization is minimal, focusing on demonstrating data loading and inspection rather than chart rendering, with the SVG element in index.html serving as a static placeholder.

AArun Pratap

63% match

Loading thumbnail…

Fork of Data Table Summary

This example displays a summary of a tabular dataset, showing the row and column counts, the data size in kilobytes, and the first ten rows formatted as JSON. The code fetches COVID-19 case data from NYC Health’s GitHub repository using `d3.csv`, then appends `<pre>` elements to the body via `d3.select`. It relies on `csvFormat` to calculate file size and `JSON.stringify` to pretty-print the sample rows. The terminal-style black background with green text is set in CSS.

TTomoyukiEguchi

63% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to import and manipulate JSON data within a D3.js module-based visualization, sorting city populations in ascending order and formatting a text list. It showcases ES6 module imports for local data files and a color array, alongside global D3.js v5 usage. The SVG element is populated via D3, while styles apply the Ubuntu font and large text. The code references `d3.min.js` from unpkg and exports parsed JSON objects like `cities2` and `p`.

GGlenn Henshaw

62% match

Loading thumbnail…

Data Table Summary

This example shows a plain-text summary of a tabular dataset. It prints the number of rows, columns, and file size in kilobytes, followed by the first ten rows displayed as formatted JSON. The code uses `d3.csv` to load the data, `csvFormat` to compute its size, and `JSON.stringify` to display the preview. Styled with black background and green monospace text, it renders the output into `pre` elements appended to the page body, drawing from the 2013 stock price dataset.

Vveagy

62% match

Loading thumbnail…

highlight.js

This example demonstrates how to display a JavaScript object as formatted, syntax-highlighted code on a web page. It uses the highlight.js library to apply color-coded styling to a JSON string representation of a small dataset, while D3 v4 populates the `<code>` element with the data. The code first defines an array of objects with name and size properties, then uses `d3.select` and `json.stringify` to insert the formatted data into the page. The visible result is a clean, readable code block, though no interactive visualization is present.

EEfratVil

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

62% match