data visualization with mappa and mapbox

For the visualizing with spatial data, I used data of “New York city locations providing seasonal flu vaccinations” from

I referred to the tutorial of mappa github ( and got helped from Genevieve. (Thank you Genevieve!)

First, I practiced to use mapbox studio and customized my own map image. Bring the map to canvas first, I also had to bring data of flu shot locations. I used the data with ‘csv’ file format. In terms of the map visualizing part, it was new for me that every map that I made with mapbox studio has its own style url. (I do not know I should call it url or key)

The mapbox has a lot of functions allowing me to customize my own map. For this practice, I pointed park area with green color and saved it.

The next step was creating dots representing flu shot spots. The problem was dots were created over and over whenever the map was moved. So later, the location of dots did not make sense and there was a tons of dot layers on the map like the below.

The problem was I did not set ‘clear’ function whenever dots created. Then it worked well.

Work with text

For the assignment, I worked with texts. In this stage, it is more likely a tool rather than data visualization, but I tried to developed it step by step.

My project was making an English studying page. When a user could learn 1) etymologies of it, 2)related words, 3)example sentences including that word and 4) its definition.  For the data collecting, I used an API of wordlink ( and studied from the beginning with watching Shiffman’s videos, Programming from A to Z.

The process was like the below.

  1. Building the page with HTML
  2. Decide what kind of date I will use
  3. Bring data with JSON format
  4. Keep checking I could bring it rightly with console
  5. Visualization

For me, it was confused to understand how to make visual effect using a text editor. Because For me, data analyzation and visualization could not be combined in my head. But after the office hours with Genevieve, I could understand it and learned a lot what I could not do it before.

<The page before entering input>

The pre-set keyword is “example”.

When you pushed the first button, it shows the origin of the “example”. Now, only example words were set to be shown on the black canvas, so the other results are shown the below of it.


When you pushed the second button, it will show you the related word of “example”. All of them are located in random position on the black canvas.

Working with related words was the hardest part for me. First, it only brought numbers not an actual data. There were so many children under it such as synonym, antonym and so on, I was confused how can I reach each of them. Data analyzing is very difficult..


This is the definition function.

I am still learning how to put data in an array and bring it. In this assignments, I started what I could make rather than what I really want to make. But for the next time, I want to think about from a concept that I want to do it and try to make it real even it would take much time.


Data Self-Portrait (Trial and error)

For making a self-portrait with my data, I thought about components consisting of me. And I felt my data are like nutrients consisting of my body. Even my major in my undergraduate was Food & Nutrition, so I thought to represent myself in the way of nutrition facts like food was an interesting idea to convey data about me.

Step 1. Data about me

  • characters from my nationality
  • my personal characteristics
  • what I like
  • experience (mostly from the last two weeks)

Step 2. Creating concept


The next step was creating a concept of the representation. As my basic idea, I thought about several options such as drinks, box, eggs package etc. Finally, I chose a disposable coffee which people consume almost every day and need it that much.



Step 3. Choosing data to use and materials to represent it

  • Korean => Spice pepper powder which is the most used for Korean cooking
  • my characteristics: a little bit weak in body these days=> pills
  • what I like: cats, => cat food / drawing/illustration  => papers, erasers and pencils

Step 4. Making