Color-Dust: A Data Visualization Application of Image Color Based on K-Means Algorithm

Abstract

This application, Color Dust, extracts and filters the color of image pixels online through Canvas, then performs clustering analysis and statistics based on the K-Means algorithm. With the help of front-end libraries such as D3.js, Vue.js, and Vuetify, the data visualization of image color is realized. The color extracted by the K-Means algorithm is the average of several tones that frequently appear in the image, and it is a good reference for harmonizing colors. After the extraction is completed, various methods of data visualization are used to display the information about colors in the picture in real time with D3.js and Vue’s responsiveness, and the color of the website can be changed according to different images in real time. In addition, this project encapsulated the algorithm steps of extraction process into npm packages, which can be quickly transplanted to Node.js or front-end of website.