File Exchange

image thumbnail

D3 JS Visualizations in MATLAB App Designer Apps

version 1.0.1 (155 KB) by MathWorks App Designer Team
Demonstrates how a specialized visualization from third-party JavaScript library D3 can be integrated into a MATLAB app.
4.9
8 Ratings

6 Downloads

Updated 02 Oct 2019

View Version History

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 (2021). 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)

Ash Saktheeswaran

Robert Philbrick

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.

Matthew Corner

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.

Matthew Corner

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)

Jyoti Gandhe

Jyoti Gandhe

Chris Portal

Eric Sargent

Varun Gandhi

MATLAB Release Compatibility
Created with R2019b
Compatible with R2019b and later releases
Platform Compatibility
Windows macOS Linux

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!