Building a matrix-esque table using d3.js reminiscent of HTML tables

I would like to generate a table resembling a matrix without numerical values. 1. Here is an example of my database table:

| CODE |  STIL |  SUBSTIL |  PRODUS |
|------|-------|----------|---------|
|  R   | stil1 | substil1 | produs1 |
|  R   | stil1 | substil2 | produs2 |
|  T   | stil1 | substil3 | produs3 |
|  T+  | stil2 | substil4 | produs4 |
|  G   | stil2 | substil4 | produs5 |
|  R   | stil3 | substil5 | produs6 |
|  R   | stil4 | substil6 | produs7 |

  1. Using this table, I can create a JSON file as follows:

    var data = [
     {"code": "R","stil": "stil1","substil": "substil1","produs": "produs1"}, 
     {"code": "R","stil": "stil1","substil": "substil2","produs": "produs2"}, 
     {"code": "T","stil": "stil1","substil": "substil3","produs": "produs3"}, 
     {"code": "T+","stil": "stil2","substil": "substil4","produs": "produs4"},
     {"code": "G","stil": "stil2","substil": "substil4","produs": "produs5"},
     {"code": "R","stil": "stil3","substil": "substil5","produs": "produs6"},
     {"code": "R","stil": "stil4","substil": "substil6","produs": "produs7"}
    ];

This is the expected final table format:

| CODE |            stil1            |  stil2   |   stil3  |   stil4  |
|      | substil1 | substil2 | substil3  | substil4 | substil5 | substil6 |
|------|----------|----------|-----------|----------|----------|----------|
|  R   | produs1  |          |           |          |          |          |
|  R   |          | produs2  |           |          |          |          |
|  R   |          |          |           | produs6  |          |          |
|  R   |          |          |           |          |          | produs7  |
|  T   |          |          |  produs3  |          |          |          |
|  T+  |          |          |           | produs4  |          |          |
|  G   |          |          |           | produs5  |          |          |

I attempted to achieve this with the help of resources like:

http://bl.ocks.org/mbostock/844752

recursively (or iteratively) make a nested html table with d3.js?

Your assistance in accomplishing this task is greatly appreciated.

javascriptmatrixd3.js

Answer №1

Check out this tutorial on Linking data table to a csv file. You can start by using the provided jsfiddle as a reference since the structure of the data is quite similar... http://jsfiddle.net/9Vtxr/

If you're fetching the data through a request, you should:

d3.json(url, function(data) {
    Use the code snippet from the jsfiddle to create the table here
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

execute field function prior to sorting

Currently, I am building a graphql server in express and using a resolver to modify my fields based on user input from the query. The issue arises from the transformer function returning a function. My goal is to sort the results by a field determined by ...

javascriptnode.jsexpressgraphql

Checking for the existence of an object while passing variables in jade - a comprehensive guide

Leveraging the power of Jade, passing an object to the client can be achieved in this way: Route: res.render('mypage', { title: 'My Page', myobject : data }); Jade Template: extends layout block navbar include includes/navbar ...

javascriptnode.jspug

My jQuery form is not functioning properly upon initialization

Let's take a look at this sample 'template' code: $(document).on("<EVENT>", "form", function() { $(this).find(".input input").each(function() { var required = $(this).attr("required"); var checkField = $(this).clos ...

javascriptjqueryready

Avoiding page refresh while utilizing the ng5-slider component in Angular

I am currently working with an ng5-slider that has a customizable range from 0 to 1000. However, I have encountered an issue when adjusting the slider at the bottom of the page - it refreshes and automatically takes me back to the top of the page. I would ...

javascriptangular

Switching Column Content with jQuery on Mobile Devices

In my design, I have a dynamic two-column layout created using Twitter Bootstrap 3. The layout switches between image-text and text-image alignment for each row. The goal is to adjust it for smaller screens (less than 768px) so that rows with images on th ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Angularjs feature where a select option is left blank as a placeholder, pointing users

Currently, I am working with AngularJS (version < 1.4). When using ng-repeat in select-option, I encounter an extra blank option which is typical in AngularJS. However, selecting this blank option automatically picks the next available option. In my sce ...

javascriptangularjs

How can you confirm the validity of a dropdown menu using JavaScript?

<FORM NAME="form1" METHOD="POST" ACTION="survey.php"> <P>q1: How would you rate the performance of John Doe? <P> <INPUT TYPE='Radio' Name='q1' value='1' id='q1'>1 ...

javascriptjqueryhtml

I'm experiencing a strange issue where the timezone offset is being doubled on my computer, yet it is functioning correctly on the UTC

A situation has arisen where the timezone offset on my local server is being duplicated by the server while creating a new event in my app. For every event created by a user, the client-side scripting computes and adds the time zone offset to the input be ...

javascriptnode.jsmongodbexpressdatetime

What is the best way to dynamically update form fields in a database after making a selection in a <select> component?

Currently, I have a form that displays a list of stars (stellar objects) with a <select> control and two <inputs>. I am seeking guidance on how to populate the two inputs from the database when the user changes the selection in the <select&g ...

javascriptphphtmlajaxmysqli

The situation arose where Next.js could not access the cookie due to

Hi there, I'm new to web development and recently encountered a challenge with my next.js app. I'm currently following Brad Traversy's course on udemy to learn basic CRUD functions. In this component, I am trying to fetch user data from my ...

javascriptcookiesnext.js

Instructions for removing the status bar from the configuration file

Struggling to remove the status bar that's covering my header in my Phonegap-wrapped HTML5 mobile app. I've tried adding preferences to the config.xml file, but still no luck. Here's what I added: <preference name="fullscreen" value="tr ...

javascriptjqueryiosjquery-mobilecordova

Transmit data in the form of a buffer

const response = await client.render(data); const Writable = require('stream').Writable; var buffer = []; const myWritableStream = new Writable({ write(chunk, encoding, callback) { ...

javascriptnode.jsexpressjsreport

Utilizing JSON and select for dependency management

Let's say we have a JSON object: { "A": { "1": "1", "2": "2", "3": "3" }, "B": { "4": "4", "5": "5", "6": "6" }, "C": { "7": "7", "8": "8" } } And we also have ...

javascriptjqueryhtml

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

Is there a way to use handlebars to display a list of data in an unordered format, with "title" and "articles" as the main categories? The issue arises when some of the articles contain HTML tags, such as <a> for links. In my current code, instead of ...

javascriptjqueryhtmlhandlebars.js

Is it necessary to implement a restful API for all database interactions in my Node.js application?

Currently, I am in the process of developing a simple blogging platform utilizing mongoose, node, express, Jade, and bootstrap. As I tackle the task of loading post content, I find myself contemplating whether to conduct database operations directly within ...

javascriptnode.jsrestdompug

Can you explain the functionality of the DataTable drawCallback feature?

I'm currently facing an issue where CSS is not being applied to all cells in a DataTable based on their values when using drawCallback(). While the CSS gets applied to some cells, it's inconsistent. You can check out the JsFiddle of my problem he ...

javascriptjquerydatatablesdatatables-1.10

Show the JSON data that was returned

I'm encountering a problem trying to access and display the returned object. Since it's cross-domain, I'm using jsonp, but I'm unable to retrieve the returned object for some reason. $(function(){ var API = "https://ratesjson.fxcm. ...

javascriptjqueryjsonjsonp

Caution: Potential Unresolved Promise Rejection Detected (ID: 21) - Error: Undefined is not a valid object when trying to evaluate 'res.json'

ERROR Getting an Unhandled Promise Rejection (id: 21): TypeError: undefined is not an object (evaluating 'res.json'). Any suggestions on fixing this issue in my code? I've checked the logs for user and loggeduserobj, and they seem to be cor ...

javascriptnode.jsreactjsreact-native

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

I am working on an Angular 7 application and attempting to load the mobilenet model by following the instructions in this example. To do this, I first installed tensorflowjs using the command npm install @tensorflow/tfjs (based on the steps provided in th ...

javascriptangulartypescripttensorflowtensorflow.js

Issue Encountered While Deploying Next JS Application Utilizing Dynamic Routing

I just finished developing my Personal Blog app with Next JS, but I keep encountering an error related to Dynamic Routing whenever I run npm run-script build. Below is the code for the Dynamic Route Page: import cateogaryPage from '../../styles/cards ...

javascriptreactjsapideploymentnext.js