Brainstormer (2021)

Description

Brainstormer is a simple brainstorming web application for quickly exploring various related words given an input word or sentence. 

This tool is for anyone looking for inspiration and new ideas. Brainstormer visualizes related words making it a great help in writing an essay and finding inspiration for brainstorm.

How to use

The app works on both desktop and mobile devices and the user is asked to type any word or sentence in a text field at the top of the page. After clicking on the "Brainstorm" button or pressing the "Enter" key, a diagram consisting of word nodes will be generated. The connections between each node represent their similarity in the meaning of words. 

 

The user can use the mouse scroll to zoom in/out the diagram and drag around nodes to place them as the user wants.

Process & Thoughts

I created this project mainly to learn and practice data visualization using D3.js during my winter break in early 2021. Data visualization is the practice of translating information into a visual context, such as a map or graph, to make data easier for the human brain to understand and pull insights from. D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers using SVG, HTML, and CSS.

I first learned the basics of Data Visualization and D3.js from the Youtube tutorial - Data Visualization with D3.js - Full Tutorial Course created by Curran Kelleher. The 13-hour long tutorial covers not only how to use D3.js but also the concepts and techniques of data visualization in general. I created some simple D3.js examples following the tutorial. While I already had some experience with SVG, it was somewhat challenging to understand how the enter/exit/update pattern works in D3.js. But it started to make more sense as I follow the tutorial and try to create and modify the examples myself.

After completing the tutorial, I wanted to build my own data visualization tool using what I learned. I decided to build a simple brainstorming application tool for quickly exploring various related words given an input word or sentence. Brainstorming is defined as an idea creation method for generating a large number of creative ideas in a short period of time. While there are quite a few brainstorming techniques, I decided to use a technique called mind mapping for my tool to generate ideas and visualize them. A mind map is a diagram used to visually organize information that conveys the relationship between individual ideas and concepts. 

Traditionally, it is required for the person who brainstorms to manually draw a mind map by generating ideas and making connections between them. While it can be a fun activity, it is time-consuming and the person may not come up with totally new ideas that the person has not thought or heard of. So I created this tool which automatically creates a mind map given an input word or sentence for anyone looking for quick inspiration and new ideas.

As soon as the user submits an input word or sentence, it will be sent to the Flask server to create and retrieve the data structure of word nodes in four levels (each parent node has five child nodes) by getting the nearest-neighbor words using Python NLP libraries spaCy and simpleneighbors. The retrieved data is then used on the client-side to draw word nodes and connections using D3.js. I also added interactivity and force simulation using D3.js's built-in functions for a better user experience.

Overall, I was pretty happy with the quality of the app and it was a great experience to learn about data visualization and the D3.js library. I plan to use D3.js for my future projects since I find it very useful for quickly building interactive data visualization.

Technical Details

Brainstormer uses D3.js for visualizing the words on the client-side, and it uses Python libraries spaCy and simpleneighbors for finding related words on the server-side. The words are pulled from List Of English Words.

​Source Code​

d3js-examples-screenshot.png
brainstormer-screenshot.png

Software Engineer | UX Designer | Creative Technologist