File Exchange

image thumbnail

D3 JS Visualizations in MATLAB App Designer Apps

Demonstrates how a specialized visualization from third-party JavaScript library D3 can be integrated into a MATLAB app.

13 Downloads

Updated 02 Oct 2019

View License

In this example, we show how MATLAB’s new UIHTML capability enables you to integrate a specialized visualization or infographic into your app to complement MATLAB’s plot types. The example visualization chosen is a “population pyramid”, typically used for showing statistical bins of a population or subpopulation within different age groups.

This example leverages D3.js version 5.9.2.

Cite As

MathWorks App Designer Team (2020). D3 JS Visualizations in MATLAB App Designer Apps (https://www.mathworks.com/matlabcentral/fileexchange/72866-d3-js-visualizations-in-matlab-app-designer-apps), MATLAB Central File Exchange. Retrieved .

Comments and Ratings (10)

Varun Gandhi

@Matthew Corner Thank you for reaching out and glad you are finding UIHTML useful.
Regarding the the triggering of DataChangedFcn when you set the the following in JS: htmlComponent.Data.clicked = true. This is expected, as the JS only looks at the top level object being changed and not its internals. Thank you for this feedback, I will forward this to the development team.
The lack of an a mechanism to send and receive events between MATLAB and JS is also known to us.

Enjoying playing around with uihtml so far. The possibilities are exciting. However I have run into a minor annoyance with the way that the communication between javascript and matlab works on data change. See the following code snippet for a click event in javascript.

I had expected that setting a sub element of the Data object would trigger the DataChangedFcn in matlab but that doesn't seem to be the case. Instead I must set to the top level htmlComponent.Data value.

// add click listener
comp.addEventListener("click", function() {

// doesnt trigger DataChangedFcn
htmlC.Data.Clicked = true;

// does trigger DataChangedFcn
data = htmlC.Data;
data.Clicked = true;
htmlC.Data = data;
});

(even this is a workaround for the lack of ability to add Callbacks)

Also, normrnd is part of the stats and machine learning toolbox so I had to modify this example to get it working without that dependency.

Enjoying playing around with uihtml so far. The possibilities are exciting. However I have run into a minor annoyance with the way that the communication between javascript and matlab works on data change. See the following code snippet for a click event in javascript.

I had expected that setting a sub element of the Data object would trigger the DataChangedFcn in matlab but that doesn't seem to be the case. Instead I must set to the top level htmlComponent.Data value.

// add click listener
comp.addEventListener("click", function() {

// doesnt trigger DataChangedFcn
htmlC.Data.Clicked = true;

// does trigger DataChangedFcn
data = htmlC.Data;
data.Clicked = true;
htmlC.Data = data;
});

(even this is a workaround for the lack of ability to add Callbacks)

Updates

1.0.1

Resolved an issue in which an error occurred when changing the year. Also, included an image for this File Exchange example.

MATLAB Release Compatibility
Created with R2019b
Compatible with R2019b to any release
Platform Compatibility
Windows macOS Linux