Become a child. Visualize || Visualization in programming

There are many helpful strategies to make the development process easier to work incrementally. There are many techniques like EDD (Error Driven Development) that can guide the programmer while building a specific feature. I would like to emphasize some of the most relevant aspects that I hope will help master a new technology quicker.

1. Plan. Visualize.
2. Take it slowly. With love to yourself. With love to your project.

I like to watch small children learn something new. A child does not think of methods and techniques. A child likes to draw. A lot. This way he can express thoughts and ideas.

Visualization helps us present information in a comprehensible way.

Convert programming into real life! Objects? They are everywhere. A car you see. A house. A room. Even you. Arrays? This collection of ordered items is everywhere as well, and you can manipulate them. Place pencils in front of you, change their order, count them, remove the first pencil and continue visualizing all this data in a variety of different means which are also available to you. You can of course use an amazing amount of data visualization tools. I enjoyed some of the tools Cameron Chapman listed in her article, and find these very useful:

• D3.js (a JavaScript library for manipulating documents using data)
• Chart.js (a simple but flexible JavaScript charting library)
• FusionCharts (a JavaScript-based option for creating web and mobile dashboards)
• Google Charts (a powerful, free data visualization tool that is specifically for creating interactive charts for embedding online)
• Sigma.js (a single-purpose visualization tool for creating network graphs)
• Chartist.js (open-source JavaScript library that allows for creating simple responsive charts)

I have experience working with Storybook (a development tool that helps you build components in isolation and record their states as stories. They also serve as excellent visual test cases) and highly recommend it.

Example of visual representation in Storybook. Interview Scheduler project.

The data can be represented in many ways, such as line graphs, bar charts, pie charts, maps, personal drawings, and pictures.

It is not only about an amazing quantity of tools a developer has. It is all about how he can see the data, and create the picture.

It is easy.

Take a piece of paper, cut out squares. Play. Take children’s cubicles, Lego. Use your whiteboard. Draw! Draw like a child! Our life is represented in visual graphics, signs, tables. The data is everywhere. This gives us the possibility to better understand programming concepts and master them.

Here is an example of MVC in action:

example of MVC in action (https://www.railstutorial.org)

Such tables make comprehension and perceiving the information easier.

When I start working on a project, I draw. The example below is not for guidance :-), this is simply a drawing for me to better understand and visualize the process.

First steps in planning the project

When I first started learning about such data structure as Linked List, I started to draw. As per Wikipedia,

“In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. It is a data structure consisting of a collection of nodes that together represent a sequence”.

My drawing of a Linked List :-)

You do not have to be an expert in the field to visualize even complex concepts. Moreover, by visualizing you make these concepts much easier.

But, do not stop on drawings and all available visualization tools. You can make these concepts alive by using simple toys.

My Link List

These simple tools and techniques open enormous possibilities.

Draw. Create. Visualize. Become that curious child who adores exploring the world. And enjoy your creations!

A Complete Overview of the Best Data Visualization Tools

Testing with Storybook

Ruby on Rails Tutorial