Week 14: Final

May 14, 2019

For your final project, design and build a one page website on a topic of your choosing. Use Datavisual, D3, and/or APIs. You may use your own data, open data sets or APIs as a source of data.

Put your files on Dropbox and be prepared to present your website to the class on May 14th.

Week 10: JavaScript and APIs

April 9, 2019

Today we will be using what we learned about JavaScript and jQuery to pull live data from other websites and databases using an API (Application Programming Interface). Pretty much every App or Website is pulling data from another service through an API. We will specifically focusing on APIs for Open WeatherMapbox and Giphy.

Lecture

API Examples Code

In Class / Homework

Explore the world of APIs. Think of a website or topic that you are interested in and try and find an open API where you can pull that data into your own website.

Start to think about what you want to build for your final project. This can be an interactive version of your midterm, a website around your personal data or a creative way to use data from APIs.

Week 9: JavaScript and jQuery

April 2, 2019

Today we will be talking about how to program for the web using JavaScript. We will be covering most of the same programming topics we discussed with Processing including: variables, arrays, loops, if statements, functions and objects. These topics are basically the same for JavaScript, just using slightly different words. We will also be talking about a JavaScript framework called jQuery that makes it much easier to write code in JavaScript.

Suggested Reading: JavaScript and jQuery, by Jon Duckett

Lecture Slides

In Class Assignment / Homework

Create a simple clock using JavaScript and jQuery. Once you have that try and do something creative with those values. Change the color of an HTML element, the size, location, etc.

Tips:

  • Create a function to display the time.
  • Use the Date object to get the current time.
  • Use setInterval(displayTimeFunction, 1000); this updates the function every second.

Inspiration

Alexander Chen
Stewart Smith
Arcade Fire – The Wilderness Downtown

 

Week 8: Data, the Web and Datavisual

March 26, 2019

Today we will move from the desktop to the browser and discuss the reason for going to a digital environment when visualizing and interpreting data. We will talk first about the layout and design of the web using HTML (hypertext markup language) for content and CSS (cascading style sheets) for the style. We will also be covering using Datavisual for the web.

Lecture Slides

In Class Assignment / Homework

Create a simple webpage using HTML and CSS. The content of the webpage should be information about you, think of it as an about page. Please include at least one interactive Datavisual chart into this webpage.

Helpful Links and Tutorials

HTML and CSS Book Website
w3schools

 

Week 7: Midterm

March 19, 2019

Create an infographic and print it out for our midterm presentations next week. You must use the Illustrator graphing tool and/or Datavisual and/or Processing to create any data driven graphics (charts and graphs). Please design the over all layout to reflect the overarching theme. I would suggest using either InDesign or Illustrator for the overall layout. It must be at least 20″ x 30″ and printed out on a nice printer either at Klapper 108 (which is free) or something like Staples.

Week 5: Infographics, Data Storytelling and Datavisual

March 5, 2019

Today we will be discussing the difference between data visualization and an infographic. We will also be talking about how design can help the infographic and when it can just turn into “chartjunk” and distract the user from understanding the data.

When it really comes down to it data visualization is all about clearly telling the data’s story. Because there are so many interesting data points available to us now, journalists are using this data as facts supporting their story. Today we will talk about how multiple data points can work together to help support an over arching story.

We will also be talking about the data visualization software I created called Datavisual. This tool makes it easy to design charts, graphs and maps for both print and web applications. We will be talking about how to create a bar chart, pie chart, choropleth map, centroid map and geo location map; how to upload data and export a PNG image, vector SVG and PDF as well as a interactive web-embed.

Example Data

Lecture Slides

In Class Assignment & Homework

Reading: Pages 73-86

Continue working on your infographic. When complete print it out for our midterm presentations in two weeks. You must use either (or both) the Illustrator graphing tool or Datavisual to create any data driven graphics (charts, graphs and maps). Please design the over all layout to reflect the overarching theme, think about color, iconography, typography to support your designs. I would suggest using either InDesign or Illustrator for the overall layout. It must be at least 20″ x 30″ and printed out on a nice printer either at Klapper 108 or something like Staples.

Week 4: The Psychology of Information Design and Illustrator

February 26, 2019

The way we see and comprehend our surroundings is extremely important to understand when visualizing information. First and foremost you want the visualization to be clear and easily understood. Mostly, everyone on this planet is born to understand this world through our sight. Thats why it is so important to interpret any dataset visually, it would take a much longer time to gain any insight staring at a spreadsheet or trying to calculate a mathematical equation. Today we will be talking about this need to understand how we see and comprehend and how we can use this knowledge to become better information designers.

We will also learn how to use Adobe Illustrator to help us visual interrupt these numerical values.

Lecture Slides

How We Got To Now – Clean

In Class Assignment

Take one of the data sets you have been playing with the last few weeks and use Adobe Illustrator’s Graphing Tool to design a simple chart. Make sure you use the right chart type for the data set you will be visualizing.

Homework

Reading: Pages 153-204

1. Find a successful data driven design (chart, graph, map, infographic) to share with the class that you find interesting, beautiful and/or easy to understand. This can be a static visualization, interactive, motion graphic, photographic, wayfinding, etc.
2. Find a chart, graph, map or other data visualization that is NOT successful to share with the class.
3. Continue your research and collecting data on the topic you chose to focus on for your midterm. Start sketching out your poster design to determine the layout and the type of content you will be using to create your 20″ x 30″ poster. Think about the hierarchy of your content and the story you are trying to tell with the data. Do you want to want to call out any data specific points in your design? Include headers, subheaders and captions to make your design as easy to digest as possible. Make sure you save where you found your data to include a source text footnote.

Week 3: Scrubbing and Analysis

February 19, 2019

Today we will be talking about a necessary evil when it comes to working with data, cleaning it. Unfortunately, if you are relying on someone else collecting the data for you, its usually not in the right format that you need it in and there might be some data points that are incorrect. Once you have scrubbed your data then you can go on to analysis. We will be talking about many tools you can use to analyze your data, but ultimately you should use what you are most comfortable with. During this analysis process we will be visualizing the data for insight only. No need to worry about design at this stage.

Lecture Slides

In Class Assignment

Find a data set online, clean it up and put it in a format you can work with. Feel free to use the data you found during our last class.

Once the data is clean, use either Google Sheets or Excel to start to play with the values, visualize for insight and pull out interesting points.

Homework

Reading: Pages 111-146

Decide on a topic to research for your midterm. Find at least two datasets based on that topic, analyze it and visualize for insight. Be prepared to discuss your findings next week.

Example: If you are interested in climate change legislation you can look at data around its cause and effect, i.e. temperature data, extreme weather, carbon emissions, methane emissions, extinction rates, government environmental policies and see if there is any correlation.

Some websites to get data from are:
NYC Data
US Census Data
UN Data