Members: Sarah Oliver
Idea Generation and data processing: I wanted to use interactions to show change in termperature over time. First I created some ideas of how I wanted to do that, and decided an interesting layor would be to compare this to fossil fuel emissions. I found the right data and from there decided what I could implement.
Data Processing and Design: I had to make a lot of edits to the data throughout the course of the visualization making. I mostly made all the edits using javascript, but some were made in excel to the original file. I had to reshape the data and find global averages, combining all the information for each country. For design, It was a lot of trial and error and learning new things. I tried to originally implement both the animations for the line chart and the heatmap in vegalite, which proved to be unsuccessful so I moved to d3. This was actually a lot easier than I thought it would be and I think I learned a lot about visualizations, d3, and problem solving in the process. I also made the area chart and the stacked area chart with brushing and linking based off our class example.
Members: Le Lyu, Peiyu Zhong
Idea Generation and data processing: we want to make two functionalities, meaning two kinds of User Interactions (UIs), in this web page. The first UI consists of a search box and a bar chart, which allows the user to search for a country and compare its CO2 output to the world's average. The second UI consists of a map and a bar chart, which allows the user to click a country on the map and customize a comparison list. A clear order button is added to clear the bars and scales in the second bar chart in case it gets too messy. We used the data from data.world which has 20+ categories of data and from late 18th century all the way up to 2014. Before using it, I (Le) downloaded it and opened in numbers, then manually deleted all the data categories that I don't need and only kept the data for the year 2014. By the end of my data processing, the csv file contains 171 lines of four different data categories: year, country name, the countries' CO2 output in 2014, and the overall CO2 output in the world.
Implementation: the tool used for the most is d3.js. For the first UI, I (Le) followed through a vedio on Youtube and read documentations in order to implement a search box. Inside the search box, whenever a type event is triggered, the (precomputed) search items (cards) that include the input values are displayed. By default and when the input is empty, the cards are hidden. Whenever the type events are present, the cards get displayed. Then, there are event listeners to the cards, and the cursor and background color are changed to prompt the user to click a card. When the click event happens, d3 will open the data, filter it based on the name of the country, and pass the filtered data to the render barchart function. Then the barchart gets generated. For the second UI, inspired by the third miniproject, I (Peiyu) downloaded the world and use d3 to implement it. Because bar-chart has a great advantage when comparing different objects, we thought of using bar-chart to compare the CO2 emissions of different countries. When the user clicks on a country, the icon will form a bar representing that country's CO2 emissions in 2014. And the height of each bar will be adjusted according to the maximum value existed in the graph. Besides, we also created a "Clear Order" button, which allows users to clear all the existed data. In other words, the chart will be reinitialized.
Improvements made: we made changes on a lot of the places. At first we did not come up with the world map in d3 so we chose vegalite, but we then changed back into d3. Second, in the prototype, the search box cards (search items) are displayed first by default, taking a lot of the space. But its logic is changed so that the functionality is more clean. Third, we did not have a good country comparision visualization in the prototype, so we added the customizable bar chart given output from the click events on the map.
Members: Ashna Ramaswamy
Idea Generation and data processing: I originally wanted to create a line chart showing the impact of climate change on changes in glacial mass. I found data and tried to use Vega-lite to create a linked chart with a brushing feature, however the data was not valuable enough for the story. Instead, I decided to search for data related to disasters to break down how the frequency and types of natural disasters have changed over time. I also created the story board for the low-fidelity prototype. The datasets were difficult to work with at first since Vega-lite needed specific formats, so I tried a lot of conversions through Github and ultimately used a csv file through d3.
Implementation: I originally used Vega-lite to create a line and bar chart that were linked together showing the average mass of glaciers over time and the number of observations. The chart had a brushing feature to see the number of observations in the bar chart corresponding to the area brushed of the line chart. Since this wasn't valuable, I switched to a stacked bar chart with a different data set, which includes natural disasters over the years grouped by category.
Improvements: I added a zoom feature to the stacked bar chart to compare the frequency of natural disasters in adjacent years. I attempted to add a tooltip based on lab 4, but the position of the tooltip stayed in the bottom left, underneath the chart, and the position would not update upon mouseover. Furthermore, the data wouldn't display. I wasn't sure how to improve this, so I abandoned the tooltip.