Interactive visualizations using D3.js and D3 wrappers in Shiny

I think D3.js is the one of the best libraries out there for interactive visualizations. This post will cover two cases; the first one uses D3.js while the second one uses D3 wrappers in Shiny.

Domestic Flights by City in the US

The interactive plot is located here – https://shivathudi.github.io/flights-chord/.

The mouseover interactions can only be seen at the link above. Since I cannot host that webpage on wordpress.com, the following screenshots only show some examples of static content and do not do justice to the actual figure.

Screen Shot 2017-05-12 at 4.08.01 PMScreen Shot 2017-05-12 at 4.09.02 PM

The code for the chord diagram and the flights data can be found here.

Diabetes visualizations in Shiny using D3 wrappers

Three different visualizations on a diabetes data set are located here –

https://shivathudi.shinyapps.io/diabetes-vis2/

Again, to explore the full interactivity of these plots, I recommend that you visit the above link. The following examples are screenshots of static content.

Parallel Co-ordinates Plot with Brushing

Screen Shot 2017-04-30 at 1.10.09 AM

Here, you can select certain ranges of variables using brushing:

Screen Shot 2017-04-30 at 1.10.47 AM

Scatterplot Matrix colored by different factors

Here, there are three different factor variables that can be used to color the points – race, gender, and age.

Screen Shot 2017-04-30 at 1.11.16 AM

You can select certain points in one square using brushing, and the same points are selected in the other squares:

Screen Shot 2017-04-30 at 1.11.46 AM

Heatmaps with different groupings

For these heatmaps, a user can select groupings to visualize measures such as the time in the hospital, and the number of lab procedures performed on diabetes patients.

Screen Shot 2017-04-30 at 1.13.03 AM.png

The user can mouse over a particular cell to see the average value for that particular column or measure across the row or grouping.

The code for all of the diabetes data visualizations can be found here.

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s