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

Utilizing Vue components to streamline the process of adding and updating data

I have a rather straightforward parent/child component. I am looking to utilize the child component in two ways - first, for adding a new entry and second, for updating an entity. Here are the components that I've built: https://codepen.io/anon/pen/b ...

javascriptvue.js

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. ...

javascriptreactjstypescriptcanvasfabricjs

Navigating through Switch cases and If Statements with multiple arguments can be complex for beginners in the world of JavaScript

Hi there, I have a specific case that I'm struggling to find a solution for. I am using Angular with a Firebase back-end to retrieve true or false values from a variable called ref. The variable contains 4 properties with either true or false values - ...

javascriptangularjsif-statementjavascript-objects

Transform the appearance of buttons within AppBar using Material UI React

Embarking on a new project using React and Node JS has led me into the battle with Material UI. My current challenge is customizing the style of AppBar items, particularly the Buttons. Here's what I have in my "Menu" component: const Menu = () => ...

javascriptreactjsmaterial-ui

Effortless bug tracking in Chrome developer tools

When I'm debugging, I want the code to be displayed in Chrome browser (or another browser like Edge) exactly as it was written. Even when using pretty print, the code still appears unreadable. For example, a block of code written in my IDE: {provideD ...

javascriptreactjswebpackuglifyjs

At which location within the script should I insert the document.title in order to update the title every xx milliseconds?

I have been working on a script that refreshes certain #id's. Additionally, I would like to update the page title, which involves some flask/jinja2. I've attempted placing document.title = {% block title %} ({{online_num}}) Online Players {% en ...

javascriptjqueryajaxflaskjinja2

Having trouble with Npx and npm commands not running in the VSCode terminal?

I am currently facing an issue while attempting to set up a react app in vscode using the command npx create-react-app my-app. It seems like the command is not working properly. Can anyone provide guidance on what steps I should take next? Despite watchin ...

javascriptreactjsvisual-studionext.js

during implementation of ng-repeat directive with JSON dataset

When I receive JSON data and attempt to display it using the ng-repeat directive, I encounter an error ng-dupes error <table> <tr ng-repeat="emp in empArr"> <td>{{emp.empcode}}</td> <td>{{emp.empName}}< ...

javascriptangularjsjson

Using Firefox to cache Ajax calls after navigating back in the browsing history

Currently, I am utilizing an ajax call to invoke a php script that waits for 40 seconds using sleep and then generates the output RELOAD. Subsequently, in JavaScript, the generated output is validated to be RELOAD, following which the call commences again. ...

javascriptajaxfirefox

Having trouble with jQuery modal not adjusting its height properly

I am a jquery modal popup newcomer. I can open the modal when clicking on the hyperlink, but I'm having trouble with the height setting. Despite my attempts and searches online, I couldn't figure it out. When trying to post a question about the & ...

javascriptjqueryhtml

Checking for the Existence of a Database Table in HTML5 Local Storage

Upon each visit to my page, I automatically generate a few local database tables if they do not already exist. Subsequently, I retrieve records from the Actual Database and insert them into these newly created local tables. I am wondering if there is a me ...

javascriptsqldatabasehtmllocal

Attempting to send a request from the front-end to the back-end is resulting in a 404 endpoint error

I encountered an issue while sending a post request from the front end to the backend. The error message I received was: " Error: Request failed with status code 404 " " Had Issues POSTing to the backend, endpoint " My main concern is ...

javascriptreactjsnode.jsmongodbexpress

Unusual actions observed in ajax rails form calculator with pre-filled values

I have a form calculator in Rails that utilizes AJAX without a database. While it functions properly, I have noticed some peculiar behavior which I would like to address. Firstly, I navigate to the /interest_calculator page Then, I input 10 into @first_0 ...

javascriptruby-on-railsajaxforms

Trying to assign a value to the property 'male' of an undefined object - error encountered while setting object value from an array

Why is it that when I add one more testObject, the code doesn't work anymore? The line of code where only one testObject is used works fine (testObject[Object.values(testObject)[0]]=5), but adding another testObject causes issues. const testObject ...

javascriptnode.js

Exploring the process of transferring a variable from Frontend to Backend via a GET API in ReactJS with an Express API

When working with my freight Shipment table, I need to access the email of the logged-in user in order to perform some frontend tasks. However, I am struggling to retrieve this information using the Axios.get() method and use it to query my MySQL DB. In t ...

javascriptmysqlnode.jsreactjsexpress

Passing the unique identifier of a record in NextJS to a function that triggers a modal display

I'm currently facing an issue with my NextJS component that displays a list of people. I have implemented a delete button which triggers a modal to confirm the deletion of a person, but I am struggling with passing the id of the person to be deleted. ...

javascriptreactjsnext.js

Is there a way to choose multiple dropdown items that share the same header?

Utilizing the Fluent UI React Northstar Dropdown component in my React project, I've encountered an issue with multiple item selection. It seems that when there are several items sharing the same header value, only one can be selected at a time. What ...

javascriptreactjsfluent-uifluentui-react

`Formatting Dates with Google Script`

I am looking to modify the date format from "mmm-dd-yyyy" (Nov-11-2019) using my existing code. Here is the code snippet: var timeStamp = data[i][timeStampappr]; var formatted = (timeStamp.getMonth()+1) + '/' + timeStamp.getDate() + &ap ...

javascriptgoogle-apps-script

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

I recently came across this helpful tutorial, but I'm having trouble grasping how it actually functions. Here's the code snippet I've incorporated into my TypeScript file: @Component({ host: { '(document:click)': 'onOuts ...

javascripthtmlangulardropdown

Step-by-step guide on how to include the "content-based-recommender" package in a Reactjs project

I recently started learning React.js and I'm interested in using the "Content-Based Recommender" package from npm. However, after downloading it, I encountered an issue with importing it. The documentation suggests the following: const ContentBasedRec ...

javascriptnode.jsreactjs