100 Days of Visualization

100 Days of Visualization with d3.js

From the first day of 2018, I have been doing  daily project of data visualization, especially with d3.js. For the first 30 days, I have been learning how to use the library and exploring visual possibility with it. Since the day 31, I have created a data visualization piece as every two days work. The first day is for data collection, analysis and sketching an idea, and second day is for coding to make it into an application on web.

Source code   |   Instagram

Click each day to play the work


Day 1


Day 2


Day 3


Day 4


Day 5


Day 6


Day 7


Day 8


Day 9


Day 10


Day 11


Day 12


Day 13


Day 14


Day 15


Day 16


Day 17


Day 18


Day 19


Day 20


Day 21


Day 22


Day 23


Day 24


Day 25


Day 26


Day 27


Day 28


Day 29


Day 30


Day 31-32

A visualization of worldwide ramen rating. Where would be the best country? Dominant type? Ramen bowl is a visual metaphor. Possible to compare average rating by country. Click a country to see all of ratings in that country, classified by type of ramen. (Data : The Ramen Rater by Hans Lienesch)


Day 33-34

A visualization representing the change of paid parental leave days among OECD countries from 1990 to 2016. I was stuck with an article about paid parental leave since I spent with my kids all day. Inspired by the 100 meter sprint infographic, I will make a vis of race(?). The line below, 55.2 days, represents the average days in 2016 among all countries and the line above is the highest one in 2016, which is Estonia. (Data : Length of parental leave, OECD)


Day 35-36

A visualization of disagreement on movie review. Where is your favorite haunt for movie review? Who do you believe more, eminent critics or users like you? It visualizes difference between users and critics rating in Rottentomatoes and Metacritic. Each length indicates difference of review score between users and critics for certain movie. (Data : raw data of ‘Be suspicious of online movie ratings’ article, Fivethirtyeight)


Day 37-38

What if reading visualization could be like playing game? It’s a sort of guessing game with data, 224 types of lost properties founded within MTA in 2015. One dot represents 100 of each item. You can get a hint when hovering mouse on each dot. (Data : raw data of ‘The most common items lost on New York City transit system’ article, Fivethirtyeight)


Day 39-40

A visualization for New York Knicks virtual trade simulation, especially about 3-point. As a poor Knicks fan I’m not sure agin about the latest movement. Which player can make team better in terms of which?? 3 points might be the one Knicks should improve as they are at the bottom. You can drag to add and remove player, and the expected team average stats will automatically be updated. The ball size shows total 3-point made and the stroke width shows 3-point %. (Data : 2017-2018 NBA season total player stats from Basketball-reference.com)


Day 41-42

A visualization of 1,738 satellite orbiting the earth by the year when it launched. Each color indicates the purpose of it. (e.g. Military) (Data : USC satellites database)


Day 43-44

Guess what 500 most frequently used passwords are. (Data : Top 500 passwords / Information is beautiful)


Day 45-46

A visualization of mass shootings happened in US from 1/1/2017. It’s painful to even try to abstract every valuable life into statistics. Only thing I can try is mourning emptiness. Empty(white) area is rather significant information. The empty area in the top shows days that shootings occur and cause deaths. The bottom shows when every life was lost without any aggregation. I pray for no more void. (Data : Mass shooting data from gun violence archive)


Day 47-48

I Found an interesting database, called ‘AudioSet’, which is manually annotated audio events from YouTube including such as ‘snoring’. It’s quite addictive to see(?) those audio. Because which video sounds which audio is interesting, it’s better to show all of thumbnails of video when a category is selected. You can hear 25000 audio sets among 450 categories from YouTube. Thumbnails seems already to make a sound before the video is played. (Data : AudioSet by google)


Day 49-50

Which country draw the simplest moon? the most complicated moon? A visualization of 1000 simplest(top) and 1000 most complicated(bottom) drawings of moon by country. When you mouseover each country code, you see information of proportion and all of drawings from the country. (Data : Quick drawing, The data by google)


Day 51-52

Drawing endless ZIGZAG with zigzag drawing data. Stopped at 1000th zigzag today.. Still have 115,635 zigzags to run a relay.. (Data : Quick drawing, The data by google)


Day 53-54

A visualization of world migrants map. What shape would ethnic diversity in your nation look like? You can choose two nations(destinations) to compare how diverse the origins of migrants are in that nation and which origins are dominant. (Data : UN, World migrants stock by origin and destination,2017)


Day 55-56

A visualization of relationship between the number of car(blue) and population(green). I was just wondering where all those cars come from and how many cars in this country while I was in traffic. I collected data about the number of cars and total population by country to compare how much each country loves car. And I’m stuck in traffic again.(Data : vehicles in use from OICA, world population from The World Bank)


Day 57-58

NBA vol.2. Who would be the most balanced player? Tripple-double, which consists of point,assist and rebound, is one of the metric widely used when we value a player. Trying to compare the shape of how much each player is balanced with a triangular visual. You can find out who is the most balanced player in NBA 2017-18 season. Each edge of triangle indicates the average point, assist and rebound per game. The farther the each edge is from the center of a profile image, the more the player relatively stands out for it. Bigger and more regular shaped triangle means more outstanding and balanced player. Among top players, Russell Westbrook is great as last year and Nikola Jokic looks quite balanced as he has an amazing season.(Data : 2017-18 season all player stats per game from basketball -reference.com)


Day 59-60

I was so shocked when I read an article that my country has one of the highest suicide rate and the rate of male is even higher than female’s. It shows suicide rates from 2000 to 2015 by country and gender. There’s significant difference between female and male. You can toggle buttons to see total trend by gender and choose a country to see trend over the course of years. A good news. Generally rates have been decreasing. (Data : suicide rate per 100,00 population from WHO)


Day 61-62

A visualization of a list of the most viewed biography of females in Wikipedia. Among 11,341 pages, only 1,495 are of female. Arcs categorized by occupations shows what percentage of female account for(with length) and how many there are(with thickness). You can sort by both categories by clicking each button at the top. Below the arcs, the list of names are shown in descending order by the number of total page views, and you can click it to visit each of Wikipedia page.(Data : Pantheon 1.0 by Macro Connections group at The MIT Media Lab.)


Day 63-64

A visualization of how many days you had in your life. Like tree ring, every circle represents time(instead of year, it’s one day). I have already 12,596 rings in my life. To appreciate your time, you can compare it with life expectancy of the past in your country. I’m thankful for big, many rings. (Data : Life expectancy from Gapminder.org)


Day 65-66

As I got older, got married and had kids, things that make me happy are totally changed. I came across an interesting dataset about happiness, which is crowd sourced testimony about happy moments, called HappyDB. How does a single man’s happiness differ from a married woman with kids? Happiness Sorter allows you to classify them into various conditions, age, gender, marriage and parenthood.(Data : Happy DB)


Day 67-68

I Came across an interesting dataset from an experiment that they asked 1,354 people to choose an arbitrary 3 playing card and recorded the results. What would be the most dominant instinctive choice in playing card? Which card does it lead to? It’s a visualization of network of choices among 1,354 players. The bigger a node is, the more it is chosen. Lines show linkage of cards chosen before and after of the node. (Data : Pick a card data from Jay Olson)


Day 69-70

While I have lived in US, I met so many Jayden who are my kid’s asian friends. I’m just wondering if there is particular preference on baby’s name based on parent’s ethnic group. It’s a visualization showing changes of preference on baby’s name in NYC by mother’s ethnic group for recent years. (Data : Most popular baby name, New York City from data.gov)


Day 71-72

Waiting for sunny days, I grabbed some data about parks. It visualizes of how many visitors were in each national park in US last year and how different they are from 10 years ago. The size of each cell indicates the total number of visitors last year. The color of cell indicates the difference from 10 years ago. The more it’s green, the more it has gained popularity. The more it’s brown, the more it has lost popularity. (Data from nps.gov)


Day 73-74

When I was asked “where is your home”, I hesitated to answer right back. Planned to make a collection of pieces of places that you can call them as one of homes, using raster tile images from web map open source. It’s an experiment to create your own tiles of map embodying your geographically embed memory of your homes.


Day 75-76

Whenever I watch a TED talk, one word for sure I can always hear is ‘idea’. It’s all about idea. What types of idea are there? How does a speaker choose a modifier for idea? Novel? Innovative? Biggest? It’s a visualization of types of modifier for idea that speakers of TED talk have addressed. From transcripts of about 2,500 talks, there are more than 200 types of modifier for idea. The First layer shows the type and the second layer shows each sentence including that type.(Data : 2,500 TED talks transcript from Kaggle)


Day 77-78

Another trial with data about TED talks. Each talk has several tags representing subjects of talks and there are different kinds of 450 tags from 2,500 talks. How frequently are they chosen and what are relationships between tags? Each talk has several tags and there are 450 kinds of tags in total. The size of each circle tells how frequently they were chosen. When you click each tag, it will show relationship with others that were chosen along with that tag together. (Data : 2,500 TED talks metadata)


Day 79-80

Over the past year, I have tracked my personal location information with Openpaths. As I live a completely different life between weekday and weekend like any other daddy, I planned to visualize one year of my path in this city, assuming there might be significant difference in the place where I have been according to day. (Data : a personal dataset from Openpaths)

more to come


Day 81_82

I was trying to collect the context of a certain place where I am right now. One of the context would be what kinds of venues surround me. Foursquare provides 908 categories of venues. I assigned each category with a certain color and planned to make a mobile web to visualize color mesh of your current location by the category of venues. (Data : Foursquare venue categories and search API) / To play the demo, please access with https


Day 83_84

As part of my thesis project, I’m developing a mobile web to play with texts along with New York City for creating your own poetry. The play also becomes a process of creating datapoint about the places. [Step 1 ] collected 451 songs’ lyrics inspired by New York City and parsed them into 18,163 phrases as the source of the poetry. [Step 2] At any place in the city, I can get a phrase by selecting two keywords inspired by the place and the right moment. [Step 3] When I decide to choose a phrase, I play with it by situating it on top of the scenery. [Step 4] Save the phrase and information about the place(coordinates, weather, places nearby) / No demo as it needs WebARkit app to play

more to come