Class Activities

Web Design and D3

Natural Disaster Visualization

Practice web development basics by creating a basic visualization of natural disasters

HTML, CSS, and SVG

In User Interface 1, I was able to refresh my memory with basic HTML and CSS with respect to creating a webpage. In Visual Interfaces, I had the opportunity to do the same, creating a basic visualization for data related to the cost of natural disasters. In the first activity, I plotted the cost of three natural disasters in 2017. The size of the circle is related to the cost, and the position on the line represents the date.

JavaScript

In the second activity related to front-end development, we used JavaScript to more easily plot the rest of the natural disasters. In addition, we added different colors to denote the type of natural disaster, and added opacity to the circles so they would be visible when they overlapped.

If I were to continue this activity, I would add labels to the lines to show the year that is represented by each one. Additionally I attempted to display the name of the disaster when the circle was hovered over, but I was unable to get it working during the class period. If I were to continue I would also work on that functionality so users can see which disasters cost the most.

D3.js

Our final introductory activity introduced us to the D3.js library. I had a little bit of experience using D3 from a few tutorials that I did in the fall, but it was nice to get a refresher on the library. Our task was to implement the same visualization that we made using vanilla JavaScript, this time in D3. The purpose was to show the limitations of JavaScript in creating visualizations. In later lessons we would learn how to add interactivity, transitions, and details on demand.

More Activities

Design Critique

Back to Class Page

Page updated

Google Sites

Report abuse