Word Cloud D3 Javascript in a Web Viewer in FileMaker


I built a Word Cloud to run in FileMaker using an existing D3 Javascript that generates a Word Cloud. I designed it to work on the Desktop or iOS, using the same layout. To make it run on the desktop, it was necessary to integrate all the Javascripts into the main HTML page, which I did using Merge Text and the Substitute Function. Then to make it easier to paste text in, I added a Wikipedia Web Viewer and a Web Search Web Viewer with a ‘grabber’ icon to paste the text into the Word Cloud.  The code is all in the demo file and available to copy and paste into your solution. It is free and open. Use at your own risk. I hope someone finds something useful to do with this.

Download Demo

Text Tab

The Text Tab is where the text for the Word Cloud is stored. You can paste in text from any outside program, with a simple Copy and Paste operation, or use the Wikipedia or Web Search tabs to gather text for your Word Cloud.

View as a Web Page

At any point, you can generate an HTML web page using the ‘globe’ icon at the top right. Once generated, tap the iOS Share button to send to email or save the file to Dropbox or iCloud.

Email generated with HTML file attachment

Once the HTML page has been generated, it can be easily shared by using Send via Email in the iOS Sharing Options.

Wikipedia Search – Macintosh version

Web Search Tab – iOS

Enter a search criteria into the Search box. Tap the Search icon to perform search in Wikipedia. The small ‘x’ icon will clear the search to allow you to start again. The ‘grab hand’ icon will paste the exerpt into the text field and update the Word Cloud. It does not seem to work on iOS, only on the desktop. Hard to debug in FileMaker Go.

Web Search Tab – iOS

Search, copy text, tap the ‘grab hand’ icon to send to the Text field, and refresh the Word Cloud.

Web Search Tab – Macintosh

Here is the Desktop version of the Web Search tab. Enter an item to search, perform the search, select the desired text, Copy and then click the ‘hand’ icon at the top Right. I am using DuckDuckGo.com as my preferred search engine for privacy.

Code Tab – HTML Page

The Code tab stores the HTML, and two javascripts, one called D3 and the other called Cloud. Edit these carefully or hide them from the user to prevent problems. All three of these files are merged together into a single HTML page that gets generated.

Get Info

The hard and complicated work on this was done by Jason Davies using Javascript and the D3 library.


Comments are closed.