Project #10 Translation Device

How Many Hits?

My concept was triggered by my mom, who always thinks I am short. I know the idea of "body shame" has always exist, but I am curious to find out when this term started to be mentioned literally; from this starting point, people can find out other terms like dualism, LGBT, queer, etc. By seeing how many times they are used, we can see when they start to be noticable and how they become universal. So that's why I add in the search bar in my design - it gives the user freedom to look up things that they are interest of and read related articles via the provided URL.

Process

I can not find the API that connects me to the marriage data, which was my original concept, so I had to switch direction. I was suggested to find a functional API first, and work with it to build up my concept. So I follow the suggestion. I picked the New York Time API that searches articles. I would like the users to type in the keyword and be able to see the frequency of it: since when the keyword starts to be mentioned in articles and the count of the keyword in a chosen year. I think the count can be figured through “facet”. I even have an idea of the harder version of this idea, which is comparing two keywords’ frequencies in a year.

Currently I was able to pull out related articles’ headlines and abstracts by user’s keyword input. Also trying to figure out how to make web url clickable. I tried so hard to figure out the “facet” function to access the count of the keyword, but I am so confused on how to use it with little provided instructions, so this feature remains unsolved and I used the "hits" data instead. Also, the year of the articles are not directly part of the API catigories, they are all hidden inside the urls - thus I also need to extract the years data manually by some way(unsolved). I struggled a lot to have the content refresh everytime we search a keyword. Luckily, with my friend Simone's help, now the page is able to refresh and load new content with old contect erased. Still working on how to reposition the h1 element into the pink box that shows the counts of hits. I also want to make the black header stick to the top without being scrolled up with the articles. I put the header image on the canvas, and it was originally sitting on top of the canvas without problem. However, since I add the DOM elements, which are the input box and the botton, they first appeared above the canvas, creating a gap above the canvas. After I repositioned them on the canvas, the empty gap remains! I tried to fixed it by adding absolute position to the canvas, but if I do so, the DOM elements just disappeared. So I had to kept the gap for now. I think if I could figure it out, the canvas could help the header stick to the top of the page without being scrolled up with other content. https://developer.nytimes.com/docs/articlesearch-product/1/overview

Reflection

This assignment is quite difficult. From finding data without correlated API to switching for usable API with another topic; from accessing information to visualizing it, I sadly realized how weak I am on this assignment. I followed some tutorials online to get as far as I can, and it seems impossible to proceed forward. I can't figure out the facet function to access the count of the keyword, thus I have to use another data from this api. I originally planned to use the appearing time of the keyword to see when they become popular, since I can't access this data, I used the hits data, which is how many times this keyword-related article was hit. I think it also works because the more hit this article gets, the more the keyword is exposed. It makes me think of the phrase: "turn a bug into a feature" lol.

I want to reflect this project on the 5th principle of data femilism. This principle is about embracing pluralism. Given the freedom to search keywords, users can gain some knowledge of what they are interested of. From this new perspective of seeing how frequent was the keyword being called in articles of New York Times, users could embrace pluralism by looking at the text content differnetly.

Draft Storyboard

I collected data about marriage rate. In the data sets, it includes female/male/both sex marriage rate at the United State from 1960 to 2012. It also includes classes, races, region, kids/no kids, etc. Not 100% sure about this project. My understanding was that we are turning the data sets into some info graphic, or it’s a data visualization project. The first idea was inspired by an ancient Chinese love fairy tale. This celestial couple were punished to be separated and were only allowed to meet once a year. When they meet, millions of magbit birds build the bridge for them to reunite in the galaxy. For the theme, I want to turn the data into stars and turn the canvas into a galaxy. When the user clicks on one of the stars in the index, they will see the corresponding data graphic. Using the lines to connect stars makes it feel like the Zodiac signs. Viewers could see changes in the marriage rate of different races throughout the years.

The second idea was about wedding rings. Because my data is about marriage rate, so I thought the wedding ring might be a good fit for the theme. The hand on the bottom left will take viewers to the marriage rate data for male and the hand on the bottom right will take viewers to the marriage rate data of females. The ring comes with a diamond, and I plan to use the diamond to represent the marriage rate for different class levels in this data set.

The third idea is my favorite one. There are three keys to the heart, and each of them takes you to dataset for male, female and both sex. When you use the key to unlock the heart, you enter the corresponding data page. It will look like an ECG graphic. Because when you fall in love, your heart beat speeds up, and I think it’s a good fit to the marriage theme. When you click on the hearts, it shows you each data graphic that’s related to class, race, and age data, putting them together helps viewers to compare the different datasets.