Jan 29, 2019 · newsletter

Making an interactive UMAP visualization of the MNIST data set

A GIF of zooming into the MNIST visualization

UMAP explorer: an interactive visualization of the MNIST data set

We’re in the middle of work on our next report, Learning with Limited Labeled Data, and the accompanying prototype. For the prototype’s front-end we wanted to be able visualize and explore the embedding of a large image data set. Once you get into the tens of thousands of points, this can be a challenge to do in the browser. To determine whether what we wanted to do on the front-end was possible, I decided to make a demo focused on the MNIST hand-written digit data set. After some dead ends and a lot of Stack Overflow searching, it turns out it is possible, and I shared the result as an interactive UMAP visualization of the MNIST data set.

About UMAP

The UMAP algorithm is responsible for the clustering of the images in the demo. The coordinates for each data point in the visualization are from the UMAP MNIST example notebook. Check out the UMAP guides and documentation to learn more about how UMAP works.

About the visualization

I’m sharing the demo as an example of how to render tens of thousands of images mapped to data points using the three.js library. The code is available on github and can be adapted or used as a reference for doing similar visualizations with different datasets or algorithms.

I had worked through how to use three.js for 2D data visualization in our previous prototype on Semantic Recommendations. If you’re interested in how to set-up the three.js camera and get it working with d3-zoom, I recommend the notebook I wrote about that project.

Rendering the images

The visualization for the new prototype is based on that previous three.js work, but there was one thing I wanted to improve upon this time. Instead of rendering the points as dots, I wanted to display the image itself. A lot of what you want to see when you look at a clustering algorithm is how it puts together its clusters. Displaying the images themselves (rather than showing one-at-a-time on hover) gives a much better view into how the algorithm is working. I knew a bit about how textures worked in three.js from before, and I had some experience with sprite sheets from trying to optimize website image loading. I had a vague idea putting the images together in a sprite sheet (in this context known as a texture atlas) and then cropping and offsetting could work to render all 70,000 MNIST images, but I didn’t know what the real mechanics of that would look like.

It took me a while to get there, but the key turned out to be this WestLangley answer and the accompanying jsfiddle, which shows how to combine the points geometry with a texture atlas to render different images across the different points. I used that example as the starting point for this visualization. I learned a lot more about uniforms, attributes, and shaders as I made tweaks to get the results I wanted, but that example is the core of the image rendering.

Generating the images

A texture atlas of one chunk of the MNIST dataset.

Another big help in making this was Douglas Duhaime’s post on using three.js to visualize TSNE maps. Finding Douglas’s post and project reassured me that I was on the right path. It also provided lots of information about texture atlases. Including the info that for some devices, 2048x2048 is the largest size allowed.

Douglas shows how to use ImageMagick to create texture atlases. For our project, I wanted to generate them in python. The prototype will have several different datasets. My co-workers are already doing their machine learning stuff with those datasets in python, so if we code out a pipeline in python to generate both the embeddings for the visualization and the texture atlases, we should be able to switch out different datasets relatively easily. We put together this visualization of the MNIST dataset to make sure that approach would work on a dataset we knew well (we didn’t want to have to debug the visualization rendering and the dataset and models all at the same time). I included the iPython notebook code for generating the images in the github repository. I’m new to python, so it’s not pretty - but it worked.

Gotchas: transparency, image size, and highlighting

In this visualization, the transparency of the digits comes from discarding color data below a threshold of 0.5. As far as I can tell, you can’t do gradual transparency with this approach. You can see the effect of this when you’re zoomed out – the darker pixels within the clusters are ones that were above the threshold but not pure white. I don’t mind the effect so much here. I was excited I could get what transparency I did. But it might be more of an issue for other datasets. For many image datasets you wouldn’t want transparency at all. I am curious how this visualization would feel with non-transparent images.

I think for non-transparent images you might want to adjust the size of the sprites even more. That gets into one of the biggest caveats about using three.js (and specifically the points object) for this type of visualization. By default the image data point is the same size no matter your zoom level (it doesn’t get bigger as you get closer, as an object would in real life). This can be a benefit; it lets you see more of the local structure as you zoom in. But you probably don’t want the points to stay exactly the same size. What you can do is adjust the size of the points as you zoom by setting the uniform. As I understand it, a uniform isn’t very expensive to update so you can do it a bunch of times on zoom. For this visualization, I set my own custom zoom scaler using d3-scale, which enlarges the size of the points at certain specified intervals. If I had more time I would definitely dial in the feel of this a bit more, but I think I got a relatively functional version in.

For highlighting, I again used an approach from my past project. Using three.js’s raycaster functionality to determine which point the mouse is over. To create the enlarged hover sprite, I actually use a different point object with very similar shader code. There’s probably a cleaner way to do this, but it works for now.

Aspirational TODOS

A GIF of the transition between UMAP and T-SNE

I recently got transitions between UMAP and T-SNE running.

  • I’d love to see what you could do by switching sprite sheets for different zoom levels. If you used different resolution sprites for different zoom levels, you might get better performance. It could also be interesting to switch to something more abstract (like a circle sprite) when you’re zoomed out, and then switch over to the images only when you’re zoomed in enough that they’re useful.
  • Different scaling of points on zoom. Like I said, I don’t think I nailed this part. I’d love to see someone take a more rigorous approach to it.
  • (DONE 2019-01-21) Transitions between algorithms. Kyle McDonald made some GIFs of transitioning between UMAP and T-SNE. The way the shaders are set-up, I can kind of make out how you could do this (switch the position attributes, interpolate with something like tween.js), and it has the potential to look really slick.
  • Try it on the fashion MNIST dataset. UMAP example here.
  • Port the visualization from three.js to REGL.js.
  • Constraining zoom and pan so you can’t scroll the visualization off-screen. I tried this a bit, but ended up scoping it out of this version. If I cleaned up the code for wiring d3-zoom to three.js’s camera, this would probably be easier.
  • Make this a general framework for visualization. Easy, right? I think the core of this could be a really good approach for visualizing lots of datasets and how machine learning is viewing them. Making it friendly and handling all the edge cases would be a big undertaking though.

On to the prototype

I was really happy with how this demo turned out, and I’m now in the middle of applying its lessons to our upcoming prototype, which is focused on active learning. It should be a fun one.

Read more

Feb 28, 2019 · newsletter
Dec 28, 2018 · newsletter

Latest posts

Jun 22, 2020 · post

How to Explain HuggingFace BERT for Question Answering NLP Models with TF 2.0

by Victor · Given a question and a passage, the task of Question Answering (QA) focuses on identifying the exact span within the passage that answers the question. Figure 1: In this sample, a BERTbase model gets the answer correct (Achaemenid Persia). Model gradients show that the token “subordinate ..” is impactful in the selection of an answer to the question “Macedonia was under the rule of which country?". This makes sense .. good for BERTbase. more
Jun 16, 2020 · notebook

Evaluating QA: Metrics, Predictions, and the Null Response →

by Melanie · A deep dive into computing QA predictions and when to tell BERT to zip it! In our last post, Building a QA System with BERT on Wikipedia, we used the HuggingFace framework to train BERT on the SQuAD2.0 dataset and built a simple QA system on top of the Wikipedia search engine. This time, we’ll look at how to assess the quality of a BERT-like model for Question Answering.
May 19, 2020 · notebook

Building a QA System with BERT on Wikipedia →

by Melanie · So you’ve decided to build a QA system. You want to start with something simple and general so you plan to make it open domain using Wikipedia as a corpus for answering questions. You want to use the best NLP that your compute resources allow (you’re lucky enough to have access to a GPU) so you’re going to focus on the big, flashy Transformer models that are all the rage these days.
Apr 28, 2020 · notebook

Intro to Automated Question Answering →

by Melanie · Welcome to the first edition of the Cloudera Fast Forward blog on Natural Language Processing for Question Answering! Throughout this series, we’ll build a Question Answering (QA) system with off-the-shelf algorithms and libraries and blog about our process and what we find along the way. We hope to wind up with a beginning-to-end documentary that provides:
Apr 1, 2020 · newsletter

Enterprise Grade ML

by Shioulin · At Cloudera Fast Forward, one of the mechanisms we use to tightly couple machine learning research with application is through application development projects for both internal and external clients. The problems we tackle in these projects are wide ranging and cut across various industries; the end goal is a production system that translates data into business impact. What is Enterprise Grade Machine Learning? Enterprise grade ML, a term mentioned in a paper put forth by Microsoft, refers to ML applications where there is a high level of scrutiny for data handling, model fairness, user privacy, and debuggability. more
Apr 1, 2020 · post

Bias in Knowledge Graphs - Part 1

by Keita · Introduction This is the first part of a series to review Bias in Knowledge Graphs (KG). We aim to describe methods of identifying bias, measuring its impact, and mitigating that impact. For this part, we’ll give a broad overview of this topic. image credit: Mediamodifier from Pixabay Motivation Knowledge graphs, graphs with built-in ontologies, create unique opportunities for data analytics, machine learning, and data mining. They do this by enhancing data with the power of connections and human knowledge. more

Popular posts

Oct 30, 2019 · newsletter
Exciting Applications of Graph Neural Networks
Nov 14, 2018 · post
Federated learning: distributed machine learning with data locality and privacy
Apr 10, 2018 · post
PyTorch for Recommenders 101
Oct 4, 2017 · post
First Look: Using Three.js for 2D Data Visualization
Aug 22, 2016 · whitepaper
Under the Hood of the Variational Autoencoder (in Prose and Code)
Feb 24, 2016 · post
"Hello world" in Keras (or, Scikit-learn versus Keras)


In-depth guides to specific machine learning capabilities


Machine learning prototypes and interactive notebooks


A usable library for question answering on large datasets.

Explain BERT for Question Answering Models

Tensorflow 2.0 notebook to explain and visualize a HuggingFace BERT for Question Answering model.

NLP for Question Answering

Ongoing posts and code documenting the process of building a question answering model.

Interpretability Revisited: SHAP and LIME

Explore how to use LIME and SHAP for interpretability.


Cloudera Fast Forward is an applied machine learning reseach group.
Cloudera   Blog   Twitter