sophiakoukla-blog-blog

[sophiakoukla-blog-blog]

Reflection Nr. 2: Achieving the Course Goals

To be perfectly honest I am afraid of CS classes. Ever since I embarked upon my MAS major by taking CS110 and CS111 in the same semester it has been a struggle but also eye-opening experience about myself and my learning capabilities. When I came to Eni’s class I came having to finish my major and I knew that it was going to be a really hard class for me – even though it was senior spring. But, I do actually enjoy doing CS, I’m just not very good at it.

Side note: It’s interesting how things that scare us the most are actually the most fun.

So anyways, going into this class I didn’t have that many personal goals besides firstly pass, but also, try to remember some of the coding stuff I did about 1.5 years ago. It was going to be rough…

 But now, looking back at all my milestones, projects, and blog posts I am so proud of myself. I can actually see the progress and I indeed have learned SO SO much – both about CS and my own capabilities. I think in many ways I needed this class to remind me that if I put my mind to something I can learn, I na short period of time, new things that will help me reach certain goals, especially new technologies. It has taught me to always as for help in a group – assignments get done SO much faster when you collaborate. It has taught me that no matter what your age or level of experience you have something to contribute to an assignment. It has taught me to persevere even when I don’t think I can do it, because you know what? In the end, I kind of did. That is something I will be eternally grateful for going out into the scary “real world” where I will face similar situations and my up-coming job. I think my blog post: Just do it #nike

Sums up pretty well how I thought I couldn’t do something and then when I took some time away, and came back to it believing I could I actually did. The only barriers are mental barriers and if we persist enough with something we will figure it out. So although I didn’t “accomplish” the goals I set out for myself I did accomplish a lot and most importantly I accomplished what I think every college grad should learn by the time they graduate – which is to believe in themselves and to see that be translated into personal success.

As for the course goals I would say I learned all of them – interesintingly enough! All the AM’s helped me to:

•    write sophisticated programs in Javascript that perform dynamic manipulation of the DOM, deal with external data (JSON or other formats), and implement meaningful user interactions

•    understand how Web APIs work and use them effectively in your own web applications to dynamically get public data or apply API methods to access a user's personal data

•    use a full-stack Javascript platform such as Meteor to create web applications that store user data using MongoDB

•    create interactive visualizations of data using existing Javascript libraries (e.g. D3.js)

      Side note: I’m not great at this and I didn’t complete the AM5 but I at least have the skills to do it at an elementary level and could figure out something more complicated if need be….

•    critique code from your peers or other external sources using technical language that indicates your understanding of topics and issues

I would even go as far as to say I also learned the transferable skills that Eni set out for us to learn:

           Learning to learn new technologies quickly – basically all the AM’s for me since I was so out-of-practice from what I had learned in CS over the years.

Be persistant in face of uncertainty and challenges – mostly AM6 and my IP.

Improving at communicating problems and solutions in writing – the code reviews and the IP reviews.

Collaborating with peers in solving complex problems – AM4 and the team project!

 If I was to take this course again I would do everything I did again - but I would probably try to go to office hours more and make an effort to work in groups. I definitely learned the most from peer interaction. I wish we had set up some kind of “study groups” - just the students in the beginning of the semester when people’s schedules were still being figured out. I think this would also make scheduling down the line easier. I think this is something that could be suggested to future classes. Otherwise I don’t think the class should be changed. Oh, I also liked that it met 3 times a week. I think 2 would have been too little.

This class was truly a blessing in disguise. I needed it before I graduated. I have always shied away from CS because I didn’t think I was good enough. But low and behold I did it. I figured out the home works, I put in the time, I made myself learn new skills, and believe in my abilities. I still do not think I will change the world with my CS skills but I now know I can do it – even though I am out of practice. I have the logic and the mindset for this. Primarily though, this is because by having to reflect on my experience and having talked to Eni (who pointed this out to me) I was able to figure that out. Reflecting is SO important. We should be made to do that for every course, assignment, or whatever that we do. I don’t think people value enough the importance of reflection. I recently started up my journal again and even when I go back to my entries from February I see all the progress I’ve made and things that I’ve learned. I’m glad we had to keep a blog during this class and reflect on our experience.

Thank you Eni for a great finale to my Senior Spring!!

[sophiakoukla-blog-blog]

Reflection Nr.1: Team Project Presentation

•    How well did your team use the allocated time? Did each of you get the same amount of time to speak? Did you have good transitions?

Unfortunately our team was the last to go so our time was limited. However, we did use the full time. Everyone spoke for similar amounts of time. I probably spoke the least but because we had an un-even number of slides and I spoke last I didn’t have as much to talk about. Our slides and content matter made transitions fairly smooth. I think us as speakers could have been a little smother with transitioning in between. I noticed we almost “hiccupped” when it was our turn to speak or we changed the slide instead of continuing to speak as we changed the slide. This is something to improve for the future. Another thing I noticed is that we didn’t really have a “topic sentence” for our different sections. It may have helped our audience to compose our speeches more like an essay so they understood what to expect from our talk and be better able to follow along.

•    How was your performance in terms of using the right eye contact, voice, pace, and avoiding mannerism?

Personally I enjoyed my performance. I thought I had good eye-contact with the audience most of the time. I had a steady voice and when I was talking it were mostly complete sentences. I do see that I am a bit of a “handsy” speaker – although, back when I did debate in high-school this was the case as well so I think this perhaps something stylistic about my method of speaking. Instead of changing it I would like to work for the future towards helping it to emphasize my choice of words and to make a point. I also think that holding my hands together in front of my chest doesn’t project the best stance. However, the other instances of hand-use seemed to be effective. Finally, I would have liked to rehearse my speech a little more for more flow. When I was giving an example of finding friend’s exercise meetings on the app I wasn’t as smooth in my delivery of the example as I could have been.

•    If you were to give this presentation again, what are the good things you'll continue to do? What are the aspects that you will improve?

             If I were to do this presentation again I would continue to keep eye-contact like I did, keep a steady audible voice, maintain my pace (maybe slow it down just a little), and keep my hand movements. I would try to improve upon the flow of the content of my speech by keeping a more rigid organizational pattern with a topic sentence and conclusive sentence to make it easier for my audience to follow and I would be slightly more strategic with my hand movements.

[sophiakoukla-blog-blog]

IP Review: What is Wellesley Watching?

Project name: What is Wellesley Watching?

(suggested name: WWW) 

1.     Big issues:

a.     Does the project meet the goals of the assignment?

                                               i.     Yes.

b.     Does it address “the problem”?

                                               i.     The problem is a little ambiguous. I think you need to clarify whether you are creating this to spark conversations (because then I would include other features) or whether you are doing this so that people can get inspiration and ideas for what to watch by seeing what is popular and what kinds of reviews those movies got.

                                              ii.     Route 1: Conversation topics. I would stay away from this one. I think it is too ambiguous and too far reaching. Although movies and tv shows are ways to spark up conversation with people I don’t think your app would really be solving this problem. It would not be able to fully meet the purpose of the problem.

                                            iii.     Route 2: Inspiration board. If you look at your app as a way for people to see in real time what others are watching and are interested in and to share with their friends I think the app would work much better. In this route you are addressing the problem of what to watch. In doing this you also foster community and organically can create topics of conversation. However, going back to the essential problem. People don’t know what to watch. There are so many options out there. I could see you taking this project in a direction in which you help people see what others are watching, combine that with Rotten tomato reviews, maybe even a questionnaire when they first enter the site to create a profile, so you can generate suggestions for them.

2.     What are the strengths:

a.     Wellesley specific. I like that this project is Wellesley specific because it makes the reviews and impact of real-time watching statistics more powerful. It also is a good conversation starter as mentioned in the IP. Moreover, although everyone at Wellesley is very different I do think that large chunks of people have very similar tastes in movies but are sometimes at a loss for what to watch so hearing other’s like-minded suggestions could be quite helpful!

3.     Respectfully critique elements for improvement: (features that my not work as intended, areas that need more thought, aren’t addressed, need explanation)

a.     Collecting initial data: You will need to create incentives for people to sign on to this app and share with you what they are watching and what they like watching. Once you have a good amount of people you will be able to build on this data but initially you will have to rely on friends or classmates to answer, questions, etc. What will be exciting about this though is that the more people participate each day you will see new growth in the percentages of what people like watching and what kinds of preferences they have.

b.     Usefulness of Rotten tomatoes: I don’t know about you but I rely on a friend’s review of a movie more so than Rotten Tomatoes. I understand this is a requirement of the IP project but I personally would much rather read a review that my friend wrote about a movie they liked/or didn’t like than read one on Rotten Tomatoes. Perhaps instead you could use a user’s Facebook likes of movies or TV shows to help generate suggestions as a way of incorporating an API we have used in class in your project. (Just a suggestion)

c.      Interface: You are going to probably have two sides to this app. The first will be the general home page where you will see bar-charts, etc. of what people are watching also reviews of what people liked and didn’t like. Then the second part would be once you sign in you will be given suggestions based on what people are watching and perhaps also a questionnaire that you can fill out. Kind of like how Netflix does it when it tries to figure out what you have watched and what you liked by rating key movies.

[sophiakoukla-blog-blog]

IP Review: something something

1.     Big issues

a.     Does the project meet the goals of the assignment?

                                               i.     Yes.

b.     Does it address “the problem”?

                                               i.     The app is essentially addressing the uncertainty of the Peter Pan. It is giving people estimates of when the bus will be arriving, when they will be arriving, and whether there is a space for them on the bus during peak times. What this solves is the anxiety around getting in and out of Boston, being disappointed when you can’t make something, or not knowing what to tell a friend who is meeting you. Quelling this anxiety is useful because it would make people more likely to use the bus by having this extra freedom through transparency. This would make people “happier.”

2.     What are the strengths:

a.     Ability to check the next available bus without logging in. I really like this aspect of the project because it reminds me of when I am waiting for the subway. I am so much more calm when I know I have 10 minutes till the next train is there. Even if this screws up my plans, knowing when the next train will be there is very comforting.

b.     Ability to see if there is a space for you on the bus. Especially during peak times and with bus drivers that are “mean” it is good to know this in case you should order an Uber or look up the next commuter rail times. Perhaps if you have time there could be a link to the commuter rail Worcester/Framingham line schedule.

c.      Estimate of arrival times. Especially when you have to take 40 min- 1 hour to meet someone or do something it is good to give people an estimate of when you will be there because everyone’s time is precious.

3.     Respectfully critique elements for improvement: (features that my not work as intended, areas that need more thought, aren’t addressed, need explanation)

a.     “Checking-in”: In theory this is a great way to see how full the bus is and for people who are on the ground waiting to be picked up to see if they can get on. However, you would have to create incentives for people to check in. People who have gotten on the bus and found a seat are no longer worried about this task. They are already thinking about what is next, whether that’s emailing people or catching up on some reading. However, this is problematic because since they don’t have an incentive to “check in” the people at the other stops won’t know whether there are still spots on the bus and these are the people who want that information. Perhaps the app could send some “push” notification to remind the person to “check in” – or make a super easy way for them to by just pressing a button. I think that for this feature to work in the app needs to create certain incentives for people to check in besides “helping others.” Something to think about is how do those checking in benefit?

b.     “Checking out”: You mentioned in your project that people wouldn’t have to check out because they would just enter their destination and once they got there they would automatically be checked out. However, if this is an extra task to complete when checking in I think it further diminishes the incentives to check in. Is there a way you can take this step away but at the same time have them automatically check out?

c.      Factoring in traffic: I know there are some very sophisticated apps that do this in general for rush hour, etc. However, I think this is something you need to think more about. It was left a little vague in your IP, which I can totally understand, however I think this will be one of the challenging aspects of your IP. Having said that, I think it would be AWESOME if you could do this. It would eliminate a lot of the headache around making plans and knowing when you will actually get to places.

[sophiakoukla-blog-blog]

AM5 - update

What have you accomplished? 

So far I have figured out what templates I am going to use to create my final visualization. I have even tried one out... See screen shot below.

What difficulties are you encountering? 

What I am having difficulty with is trying to integrate the elements of the code I want in a way that I can combine things. What I realize is that first I have to spend a lot of time figuring out the code that I have found to figure out which elements are connected so that I make sure I take all the elements with me. If all else fails though I will make a very elementary visualization like the one below. Here’s hoping that doesn’t happen!

[sophiakoukla-blog-blog]

Just do it #nike

In working on the am6 I had an “aha” moment I would like to share. I kept coming across errors and after fixing my code and reading the notes over and over again I got REALLY annoyed. My immediate instinct was to go to OH or email Eni. (even though it was past mid-night) Yay me... But I couldn’t so instead I left it. Spent some time away from it. Then when I looked at it again I realized the smallest stupidest things that were wrong. Like not putting the call for a template inside the body or not putting the word “target” after an event. It was when I took the time, stepped away, (this is the big one) believed I could figure it out on my own - that I finally did. And it was so simple!

SO

next time you are having trouble with something and your knee jerk reaction is to email Eni or just go to OH where someone else will essentially hint it out for you - don’t. Take some time away from it, do some other work, or sleep, or do a couple jumping jacks, hang out with friends, or enjoy a cone of ice-cream. Then come back to it, believe you an do it, and you will. I promise it is that simple. Really though.

[sophiakoukla-blog-blog]

AM5 - April 12th post

Here are some examples I what I plan to do: A.) Bubble chart - showing all the data at once http://bl.ocks.org/mbostock/4063269

This only seems useful to me as it creates different sizes for the bubbles.

B.) Static bubbles showing a comparison of size http://www.ununpentium.co.uk/pages/planets.jsp 

Here is an example where I used my data with the visualizations’ html and js code: myhttp://cs.wellesley.edu/~szachare/cs249/AM5/AscendingBubbles.html  I modified it only slightly to not rearrange the bubbles to go in size order. This one is fairly straight forward - although there is a lot of code for something so small!

C.) Interactive bubble chart http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07

In retrospect this is not particularly useful to me.

D.) Interactive bubble categorization of data http://sunsp.net/demo/BubbleMenu/ This visualization is most close to what I want to create. In addition to using the split up of categories I want to combine it with option b to show a bubble for every year. What I don’t understand about this one is how they create the interactions. Meaning, how do they create the commands for when the central bubble is clicked. I would like to make it so that when the central bubble is clicked a row of bubbles (each representing a year of enrollment) show gradually underneath the bubble. This way one could compare enrollment across CS 111, ARTH 101, and ECON 101 vertically through the bubble sizes. Also, I plan to implement an “interaction” whereby if you hover over the bubbles they would show the exact number roof enrollment to the side.

[sophiakoukla-blog-blog]

AM5 - BarChart

I made bar charts for all three of my JSON files for ECON101, ARTH101, and CS111.

[sophiakoukla-blog-blog]

AM5 milestone - Data

I have my data for AM5. I took the enrollment data for CS111, ECON101, ARTH101 for 2000-2015 and made them into 3 separate JSONs.

[sophiakoukla-blog-blog]

Dear Data Visualization Review

From Dear Data I chose “A Week of Emotions”

http://www.dear-data.com/week-11-a-week-of-emotions

This particular week in the “Dear Data” experiment is supposed to represent Giorgia’s and Stefanie’s emotions throughout the week. Each girl went about collecting data in different ways. George would write down every time she noticed a “change of sensation” as well as noticing the activity or person she was with at the time whereas Stefanie would measure every hour what she was feeling. 

Although I think Giorgia’s is more visually attractive I think she was trying to do too much at once with tracking emotions as well as her surroundings and then also splitting them into different categories. I would rather she had split them up into days and then tracked emotions throughout comparing them across days to see how her emotions changed chronologically in relation to external forces. I like Stefanie’s method of data collection more - however, it seemed to be impractical because of her work life.  Given that she had a lot of information i appreciated that she edited it down. The only problem with this is that we only get the highlights and extremities - which as she said are either stressed and anxious or excited and happy. I would expect this. I do like however, that her visualization is intuitive and chronological. The colors make it easy to spot patterns and the lining up of data make it easy to compare across. Clearly emotions are a difficult thing to track and in tracking them we also skew the data. However, overall I think that Stefanie did a better job of representing her data in a way that would allow us to find patterns and make comparisons. The only short-comings I see are that the data doesn’t show the nuances - instead it shows the highlights, and there could be more labels to show us times during the day as well as specific emotions instead of always turning over the card to refer to the color key.

If I did this project with a friend using code instead of drawing I would collect data like Stefanie - tracking all my waking hours. I would use lines that had warm colored bars on the top (for “positive” emotions) and cool colors on the bottom (for “negative” emotions) kind of like a x/y graph. This would be created for each day and lined up according to matching hours. Also, if there was a special event that made me exhibit a special emotion I would make a small animation that would show up every 5-10 seconds by the section of the path that represented that occurrence in my day. 

[sophiakoukla-blog-blog]

Design and Redesign - Thoughts

a) Which of the four presented redesigns resonates the most with you and for what reasons?

The visualization of the redesigned distribution of Republic vs. Democratic Votes of 2004 where the country’s size was augmented to reflect population distribution as well as how counties voted resonated the most with me. Although it is more difficult to understand because you are not used to seeing the USA in that way it makes more sense given the population distribution and counties. Otherwise, as was stated previously, it just looks like the entire country is basically voting Republican. It would be hard to believe that this type of visualization did not impact people’s opinions. I do wonder though if there is an even better way to represent this data that is more comprehensive....

b) If you were asked to critique a visualization, what criteria (or good practices) discussed in the article would you keep in mind to apply? 

Potential good practices:

1.) Express visually (and in words) the purpose of the visualization so as to be transparent about any types of pre-existing biases. This will also bring to light and simplifying assumptions the designers use to present the data.

2.) Establish a pre-existing dialogue with the designer and team to allow for critique and re-design without developing unproductive conversation and resentment between parties. This will help both parties (designer and critique) create the most useful result!

[sophiakoukla-blog-blog]

AM5 question

Given that there are only 76 objects in each semester on the information given to us does that mean that not all courses are represented? 

If we want to represent courses that have changed the most in enrollment over the last 14 years (2000-2014) is it ok to use the limited selection?

[sophiakoukla-blog-blog]

Metaxas Lecture

In this lecture I learned a lot about the history of the WWW. Specifically, the different version that originally came about like Xanadu, Memex, and NeXT. It was interesting to me that they do a lot of the same things that computers and the web do today just in a different format. Something that surprised me was that originally the creators of the WWW didn’t think it would be profitable - even creating a search engine (like Google today)... 

I think this lecture applies to what we have been learning in our class because the idea of the WWW was initially to better link knowledge in a more “human” and intuitive way through association. We, similarly, are taking different areas of knowledge and combining them together in new and innovative ways through association. Looking at it in a big picture kind of way it now makes sense why this is so important because we think and learn like computers. SO we need to make their inner workings and processes more similar to our in ways that are also organized and efficient. I think the best example of this is creating things through metaphors. A good example is that Memex was originally designed like a work desk. 

[sophiakoukla-blog-blog]

AM4 - reflection post

I wanted to beef up my coding skills. I think it was good for me to take on the back end of this project because it made me get more comfortable with js again but also remember all those things I had learned in s111 - like, looking for patterns in code, making one thing work, and then making it so that everything works, thought processes, looking up methods, etc. I think I accomplished my goal. I would have liked to have had cleaner code but I think that was partly due to not separating properly the roles of who did what.

I think we should have listened to the teacher’s instructions as to how to split up the roles. This would have made it so we didn’t have such messy code and there weren’t small errors. I also think we should have thought it out more before we started coding. Finally, I think more group meetings would have been helpful because that was when we really got work done so when we are all together not only can you ask people questions but also make sure you are doing the right thing. The pitfalls that can be avoided by doing this is losing code or not being on the same page. I think some good practices are making sure you are constantly communicating but also being forgiving when your team members have other things going on or their schedule doesn’t completely overlap with you.

For me, it was worth taking the red pill. I was proud that I stuck it out and made it work - even though initially I didn’t think I could. It also wasn’t “as” difficult as I thought it was going to be but it reminded me of a lot of things I needed reminding of. 

[sophiakoukla-blog-blog]

Reflection on Fashion Visualization

Link: http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/

Purpose: Exploration To explore the looks of each designer but also show the prevalence of certain colors at different shows. This is important for brands and department stores because then they can make predictions about color trends as a lot of money is bent on whether their predictions are right or now.

What is this: A fashion infographic This visualization uses the data of multiple designers. It takes the pictures of each model in the show and puts them all together in a rectangle so you only see a bit of the picture (mostly the color of the garment and the face of the model). This is smart because people like to be able to see everything in front of them. This way it allows you to see all the looks at once and if you hover over any particular one it will let you see it up close. Also, the design aesthetic that is used when you hover over them mimics a deck of cards or in this case photos as if you were flipping through them yourself. It uses an easily relatable metaphor!

Analysis: In terms of form vs. function this visualization does a good job of aggregating all the information together by designer but I think their condensation of all the color graphs below is mediocre. It is hard to pull out specific color trends. I also think they could have done more to accentuate silhouette and dress trends based on things like neck cut, waist accentuation, length of skirt/dress, etc. This is especially noticeable in Proenza Schoeler, Altuzarra, and Michael Kors. Moreover, the designer only made the individual color palettes (let’s call them) for a couple designers I would have appreciated it to be done for all designers and then grouped in a way that I could see the trends but also access them individually like on the page. Perhaps some kind of sphere that revolves and when you zoom in or click on a specific bubble or cube the designer’s runways show comes up like above. Clearly as far as accessibility this is only seen by NYTimes subscribers. It is meant to be something fun - not necessarily commercial. However, a trend forecasting firm could definitely take this idea further to make suggestions to their clients. Finally in terms of basic elements. The visualization uses proximity and similarity well for the top elements and bottom little boxes but doesn’t combine them well. I also appreciate that there is a dark background so the colors are accentuated. The contrast and font type is clear and easy to read. The designer “div”s are well balanced on the page but they are a tad small. I would have liked it that when I hovered over the image not only did I see the whole thing but it also bulged out and became bigger - similar to what i-tunes does when you are going through songs when choosing something to listen to. In conclusion, although this is an interesting data set that uses some good principles of design and function I think the designer could have gone farther in terms of converting all the data but also making it more enticing as a whole. I don’t think there needed to be the bottom boxes of color instead it could have all been aggregated together and then through simple intuitive was of either zooming in or clicking you could delve further into different designers and looks.

[sophiakoukla-blog-blog]

AM4 - Meeting #5

Wednesday March 11th

I finally go the intersection of the two categories to work - and Clare helped me by fixing the syntax and making it more concise. However, we then ran into errors with different unexpected scenarios. We are going to help-room tonight to figure out the bug. It should be something small in how we declare the different events. Other than that, Clara is done - she just wants to add some CSS and so we will be finished. Yay!

[sophiakoukla-blog-blog]

AM4 - Meeting #4

Monday March 9th

(Should have posted this then)

Clare and I got everything to work in UI.js except creating a function that looped through each array for each category to produce a combined array. Our hw was to figure this out for Wednesday.