All Projects → YaleDHLab → Pix Plot

YaleDHLab / Pix Plot

Licence: mit
A WebGL viewer for UMAP or TSNE-clustered images

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Pix Plot

Glmaps
Data visualization examples and tutorials from scratch. 数据可视化示例代码集与新手学习教程。
Stars: ✭ 288 (-5.88%)
Mutual labels:  webgl, data-visualization
Plotly
An interactive graphing library for R
Stars: ✭ 2,096 (+584.97%)
Mutual labels:  webgl, data-visualization
Hedgehog Lab
Run, compile and execute JavaScript for Scientific Computing and Data Visualization TOTALLY TOTALLY TOTALLY in your BROWSER! An open source scientific computing environment for JavaScript TOTALLY in your browser, matrix operations with GPU acceleration, TeX support, data visualization and symbolic computation.
Stars: ✭ 1,797 (+487.25%)
Mutual labels:  webgl, data-visualization
React Map Gl
React Component Library for Mapbox GL JS
Stars: ✭ 298 (-2.61%)
Mutual labels:  webgl, data-visualization
Rthreejs
Three.js widgets for R and shiny
Stars: ✭ 251 (-17.97%)
Mutual labels:  webgl, data-visualization
Three Forcegraph
Force-directed graph as a ThreeJS 3d object
Stars: ✭ 84 (-72.55%)
Mutual labels:  webgl, data-visualization
Luma.gl
High-performance Toolkit for WebGL-based Data Visualization
Stars: ✭ 1,928 (+530.07%)
Mutual labels:  webgl, data-visualization
Pixi.js
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Stars: ✭ 34,982 (+11332.03%)
Mutual labels:  webgl, data-visualization
Plotly Graphing Library For Matlab
Plotly Graphing Library for MATLAB®
Stars: ✭ 234 (-23.53%)
Mutual labels:  webgl, data-visualization
L7
🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.
Stars: ✭ 2,517 (+722.55%)
Mutual labels:  webgl, data-visualization
Deck.gl
WebGL2 powered visualization framework
Stars: ✭ 9,304 (+2940.52%)
Mutual labels:  webgl, data-visualization
Dash.jl
Dash for Julia - A Julia interface to the Dash ecosystem for creating analytic web applications in Julia. No JavaScript required.
Stars: ✭ 248 (-18.95%)
Mutual labels:  web-app, data-visualization
Deep Viz
A React component library, providing concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.
Stars: ✭ 55 (-82.03%)
Mutual labels:  webgl, data-visualization
3d Force Graph Vr
3D force-directed graph component in VR
Stars: ✭ 112 (-63.4%)
Mutual labels:  webgl, data-visualization
Awesome Creative Coding
Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.
Stars: ✭ 8,696 (+2741.83%)
Mutual labels:  webgl, data-visualization
3d Force Graph
3D force-directed graph component using ThreeJS/WebGL
Stars: ✭ 2,386 (+679.74%)
Mutual labels:  webgl, data-visualization
Globe.gl
UI component for Globe Data Visualization using ThreeJS/WebGL
Stars: ✭ 479 (+56.54%)
Mutual labels:  webgl, data-visualization
React Map Gl
React friendly API wrapper around MapboxGL JS
Stars: ✭ 6,244 (+1940.52%)
Mutual labels:  webgl, data-visualization
Plotly.js
Open-source JavaScript charting library behind Plotly and Dash
Stars: ✭ 14,268 (+4562.75%)
Mutual labels:  webgl, data-visualization
Dash
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.
Stars: ✭ 15,592 (+4995.42%)
Mutual labels:  web-app, data-visualization

PixPlot

This repository contains code that can be used to visualize tens of thousands of images in a two-dimensional projection within which similar images are clustered together. The image analysis uses Tensorflow's Inception bindings, and the visualization layer uses a custom WebGL viewer.

App preview

Dependencies

To install the Python dependencies, we recommend you install Anaconda and then create a conda environment with a Python 3.7 runtime:

conda create --name=3.7 python=3.7
source activate 3.7

Then you can install the dependencies by running:

pip uninstall pixplot
pip install https://github.com/yaledhlab/pix-plot/archive/master.zip

Please note that you will need to use Python 3.6 or Python 3.7 to install and use this package. The HTML viewer also requires a WebGL-enabled browser.

Quickstart

If you have a WebGL-enabled browser and a directory full of images to process, you can prepare the data for the viewer by installing the dependencies above then running:

pixplot --images "path/to/images/*.jpg"

To see the results of this process, you can start a web server by running:

# for python 3.x
python -m http.server 5000

# for python 2.x
python -m SimpleHTTPServer 5000

The visualization will then be available at http://localhost:5000/output.

Sample Data

To acquire some sample data with which to build a plot, feel free to use some data prepared by Yale's DHLab:

pip install image_datasets

Then in a Python script:

import image_datasets
image_datasets.oslomini.download()

The .download() command will make a directory named datasets in your current working directory. That datasets directory will contain a subdirectory named 'oslomini', which contains a directory of images and another directory with a CSV file of image metadata. Using that data, we can next build a plot:

pixplot --images "datasets/oslomini/images/*" --metadata "datasets/oslomini/metadata/metadata.csv"

Creating Massive Plots

If you need to plot more than 100,000 images but don't have an expensive graphics card with which to visualize huge WebGL displays, you might want to specify a smaller "cell_size" parameter when building your plot. The "cell_size" argument controls how large each image is in the atlas files; smaller values require fewer textures to be rendered, which decreases the GPU RAM required to view a plot:

pixplot --images "path/to/images/*.jpg" --cell_size 10

Controlling UMAP Layout

The UMAP algorithm is particularly sensitive to three hyperparemeters:

--min_distance: determines the minimum distance between points in the embedding
--n_neighbors: determines the tradeoff between local and global clusters
--metric: determines the distance metric to use when positioning points

UMAP's creator, Leland McInnes, has written up a helpful overview of these hyperparameters. To specify the value for one or more of these hyperparameters when building a plot, one may use the flags above, e.g.:

pixplot --images "path/to/images/*.jpg" --n_neighbors 2

Curating Automatic Hotspots

PixPlot uses Hierarchical density-based spatial clustering of applications with noise, a refinement of the earlier DBSCAN algorithm, to find hotspots in the visualization. You may be interested in consulting this explanation of how HDBSCAN works.

Adding Metadata

If you have metadata associated with each of your images, you can pass in that metadata when running the data processing script. Doing so will allow the PixPlot viewer to display the metadata associated with an image when a user clicks on that image.

To specify the metadata for your image collection, you can add --metadata=path/to/metadata.csv to the command you use to call the processing script. For example, you might specify:

pixplot --images "path/to/images/*.jpg" --metadata "path/to/metadata.csv"

Metadata should be in a comma-separated value file, should contain one row for each input image, and should contain headers specifying the column order. Here is a sample metadata file:

filename category tags description permalink Year
bees.jpg yellow a|b|c bees' knees https://... 1776
cats.jpg dangerous b|c|d cats' pajamas https://... 1972

The following column labels are accepted:

Column Description
filename the filename of the image
category a categorical label for the image
tags a pipe-delimited list of categorical tags for the image
description a plaintext description of the image's contents
permalink a link to the image hosted on another domain
year a year timestamp for the image (should be an integer)
label a categorical label used for supervised UMAP projection
lat the latitudinal position of the image
lng the longitudinal position of the image

IIIF Images

If you would like to process images that are hosted on a IIIF server, you can specify a newline-delimited list of IIIF image manifests as the --images argument. For example, the following could be saved as manifest.txt:

https://manifests.britishart.yale.edu/manifest/40005
https://manifests.britishart.yale.edu/manifest/40006
https://manifests.britishart.yale.edu/manifest/40007
https://manifests.britishart.yale.edu/manifest/40008
https://manifests.britishart.yale.edu/manifest/40009

One could then specify these images as input by running pixplot --images manifest.txt --n_clusters 2

Plotting Poses

In addition to the Inception-based image vectors, one can generate Mobilenet-based pose vectors for input images by installing an additional dependency:

pip install tf-pose==0.11.0

Then, when building a plot, one can pass the --extract_poses flag to the pixplot call:

pixplot --images "datasets/oslo/*.jpg" --extract_poses

Demonstrations (Developed with PixPlot 2.0 codebase)

Link Image Count Collection Info Browse Images Download for PixPlot
NewsPlot: 1910-1912 24,026 George Grantham Bain Collection News in the 1910s Images, Metadata
Bildefelt i Oslo 31,097 oslobilder Advanced search, 1860-1924 Images, Metadata

Acknowledgements

The DHLab would like to thank Cyril Diagne and Nicolas Barradeau, lead developers of the spectacular Google Arts Experiments TSNE viewer, for generously sharing ideas on optimization techniques used in this viewer, and Lillianna Marie for naming this viewer PixPlot.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].