The Blog for Data Visualization

Phase 3_ Final Project_ Update 3_ The visualization of of the Mocap

The Github Link [LINK]



Based on the photoshop prototype last week. This week, I finally successfully print the motion trail dots. Also in order to make this project maintainable. I optimized the CSV file, which simply contains 3 (x,y,z) and a column of heart. I manually change the original file and combine the color tone of dots with the heartrate. 

We build a website to show all the comparison. we didn’t present the project as the prototype last week. However, I realize that it’s direct and concise to show 3 images together at theot  same time.  We need a further discussion to decide it. However, the basic function is all realized now.

I’m happy that through this project,  I learned a lot about ThreeJs, D3js, and motion capture format file. Jade is an interesting person and fun people to work with.

Phase 3_ Final Project_ Update 2_ The visualization of of the Mocap

This week, I successfully push the dots’ location inside. I want to combine the color tone with the heart rate. However, currently, I do not have the heart-rate data. Therefore I randomly generate some numbers.



This is to give a quick flash about what happened in general. I got inspiration from a KUNGFU Visualization video on Vimeo (

Phase 3_ Final Project_ Update 1_ The visualization of of the Mocap

Today, I’m trying to visualize the mocap data to reproduce the movement.  At first, I set up a local enviroment and establish a server using the vagrant and virtual box  so that I can run the Threejs. Then, I tried to load the FBX file. I open it and scan and find that the file is a binary version of FBX file. Three.js has their formal version of FBX loader. However, I remember that last version of Threejs doesn’t support the binary version loading.  Then I check the Github and find they have updated the new version supporting the binary file loading. Good! So I edited the code and tried to load the FBX and but the error in the Console saying that

Error: THREE.FBXLoader: External library Inflate.min.js required, obtain or import from

Therefore, I import the inflast.min.js in the library.  However, this time I got another error saying that

URIError: URI malformed

I did the research and found that this is because of the format of my FBX file doesn’t fulfill the requirement. I have to update the version of FBX and I find there are two options to fix this problem.

  1. importing the FBX file to 3DSMAX and re-export the file to update the version. Some report said that the movement will become strange and broken sometimes after doing this. However, I find 3DSMAX only available for windows. I may try this solution later to see how will it work.
  2. there is a formal version of the plugin which can help us convert the FBX file to JSON animation, which requires us to use the JSONLoader.

I tried to use the converter to convert the file but the file is too large and too much. Then i find there is BVH file in the drive. Then i google it and find that BVH may be a better solution. Next, i will try to figure out how can i load the BVH

Report of The Scientific Study On VR User Engagement

Download (PDF, 510KB)


Download (PDF, 5.25MB)

Visiting NYSCI

Data visualization has always been a significant method to interpret and analyze data in my opinion.  However, after visiting the NYSCI, I realize that data visualization could also be utilized in many fields like medical and education.

In Connected Worlds showroom, the immersive and interactive education system enables kids to be a part of the huge ecosystem. The plants and creatures are imaginary in this system for easily interacting and communicating with kids. However, based on the data provided by the Earth Insititute at Columbia University. the connection with the environment reflects real-world interactions between human and natural systems. Kids can play with the system like blocking the stream or spreading the seed to understand the importance of the ecosystem balance. The visualization directly shows the result of each action.

There is no doubt this system change the traditional way to teach. On the screen, there is a system tracing and recording the change in the ecosystem. Catherine explains that all the data has been collected since 2015. However, during the time I was there, I noticed that lots of kids have no idea about what they are doing. They use the stuff to block the stram but never observe what will happen to the system. I cannot get the point and meaning to collect these data when these kids don’t even know what they are doing. I express my confusion to Catherine but the answer is not clear and persuasive. I feel that, not only in education but in many fields, we are aimlessly collecting the data. How to implement and what kind of data is worth collecting is still a key lesson we have to learn.

After the Connected Worlds, We use the limited time visiting the mathematical part in the NYSCI. The most impressive part is the equipment to show the normal distribution. The device vividly present the possibilities of distribution through the falling balls. The process is interesting and the result is perfect as well. Lost of mathematical formula are visualized using various methods. It’s excited and happy to see that the education could be so interesting.

Project Phase 1 / Post 3 __ Reflection

The presentation of project phase 1 is accomplished today. I’m satisfied with these 3 different parts and especially the crime ranking through Tableau.  I learned a lot from the online course and the help of the online community.  The feedback of my classmate seems not that bad. However, I do realize some aspect needed to be polished.

  • The color chosen seems to be carefully considered. I choose the color before from designing perspective. However, the pale color of the chart confuses my audience. I should have thought more about the functional part of my visualization by combining the meaning of color and crime name.
  • The explanation of my chart is not sufficient enough to understand the content. I was trying to explain more through context but forget to make it clear thought eh title of charts.
  • It’s still hard to combine three different parts in different platforms. I will make a website to show them on the same page to enforce the consistency.

Data Visualization Phase 1 Project

The Sample DataSet I download from Open Data NYC contains 5 attributes including:

  • ParkName
  • Borough
  • Size
  • Category
  • CrimeNumber

There are 1158 Parks and 7 kinds of crime.

There are 4 workbooks in total from Q3/2016 to Q4/2017

My Phase 1 Project contain 3 parts:

  • Number Of Park Crimes From Q3/2016 — Q4/2017 (I cannot use iframe to embed 🙁 ) [LINK]
    • In the first section, I focus on the total number of each crime from Q3/2016 to Q4/2017. I find it interesting that the number of crime decrease in Q1 and Q2. I guess it’s about the weather. Therefore, I combine the average temperature and the crime number together.
  • Park Crime Number Ranking [LINK]
    • In the second section, I focus on the most dangerous park which the number of crime is large. I rank the 4 quarters and obtain the top 10 of each quarter. I also made a search for end users to search by park Name. I combine the line chart in the ranking chart to make it easy to see the change,
  • NYC Borough Park Crime Number [LINK]
    • In the third section, I focus on the borough part. I want to utilize the map and mark each park. However, I find it too hard to write 1158 destination in  geojson file. I change my mind and decide to use the area map to see the level of security of each borough. I download a geojson file and add “Crime_Number” property inside.

The Whole 3 sections look like this 🙂


Project Phase 1_/Post 2_ Learning __Visualizing Dense Data: How to Show Rank without Overcrowding

Today, when I was trying to visualize my park crime data to a dangerous park ranking. I’m having some problems. I grab the data through the crime ranking number and made this sheet 🙂

It’s kind of hard to visualize it in a simple way because it’s all about the park name and number. Not all parks show up in all quarters.  I cannot directly show their name through the color connection. Then I google and find this article I want to share [How to Show Rank without Overcrowding Your Viz].

The author of the article combines the line chart and ranking chart together to visualize the connection. Also, He uses the abbr to concisely show the park, which makes it easy to read. This is the optimized sheet:)


Project Phase 1_/Post 1 _The Process Of How I Choose My Dataset

When I check the approved dataset list, I find the OpendataNYC is an amazing website containing tons of interesting datasets. Therefore, I decided to choose one from these datasets.

Here are several factors in my consideration.

  • Timeliness and freshness
  • Size of dataset
  • The relevance of each dimension and measures
  • expansibility

At the beginning,  I want to analyze the date of CityBike, because the shared biking business is a rising industry in China. It must be interesting to analyze the relevance of subway station, bike renting station, climate,  subscriber, and the biking route. However, to my surprise, the monthly dataset of CityBike contains over 500’000 rows of data. Considering my limited time of this assignment and feasibility, I have to quit this Idea.


Then,  I tried Noise Report, Facebook Ad, Driving Violation, and Trump New Hired List, but all failed for some reason. These data somehow were too old and pointless to analyze anymore. Most of them contain lots of NULL value in the dataset and hard to ease the noise data.

Finally, I find the dataset of NYC Park Crime Dataset from Q3 2016 to Q2 2017.

The data size is doable and fresh. The dataset contains park name, the borough, size, category, and numbers of crime, which enable me to analyze the relationships among them. I also have four quarters records so that I can compare the number of each season. It also involves the location, which seems enable me to use the map visualization 🙂

Then, I use Tableau to do some easy analyses.



In the following days, I will try to optimize my visualization

My Toolkit Presentation

Download (PDF, 310KB)

© 2018 dATAv

Theme by Anders NorenUp ↑