WEb Development & Data Visualization

Intro

For this class project I was asked to tell a compelling and newsworthy story using APIs and an interactive element. I was inspired to create a data-driven piece about reducing food waste after exploring the negative effects of mass producing food on the environment.

What I learned

Good data tells its own story, but only if properly showcased. It is also important not to compromise the story or message with a distracting interactive element. I learned to instead aim for something complementary to the story's call to action.

How it's made

"Combat Food Waste" was created using HTML, CSS, JavaScript and jQuery. I used the Food2Fork API to build an interactive two-ingredient search for recipes and a YouTube API to display a trailer for "Wasted! The Story of Food Waste." Using Charts.js, I drew a graph to convey how food is lost or wasted through the food supply chain. I also drew a graph showing the deficiencies that threaten food banks using Taucharts and an Ajax call to JSON data.

Intro
Intro

In a class I was challenged to design a website that looked as similar as possible to a major news publication's website. I chose The Washington Post and decided to write a data-driven piece on vaccination research.

How it's made
What I learned

It is essential that graphs and tables are responsive in a data-driven piece, which can require some creativity and compromises. It is also important to build a story around a dataset instead of finding a dataset to suit a story.

"White, wealthy and exempt from vaccinations" was created using HTML, CSS, JavaScript and jQuery. I drew two charts using Highcharts. The first shows the relationship between median household income and personal belief exemptions from vaccinations in California. The second was created using an Ajax call to JSON data and shows the relationship between the percent of the population that is white and the percent of the population with personal belief exemptions. I built a table on vaccination statistics by generating the rows recursively in JavaScript, also using an Ajax call. I used Taucharts and an Ajax call to draw a scatter plot on the relationship between poverty, urban living, ethnicity and vaccination rates within the states.

Intro
Intro

For this project I was asked to make an informative website that used an interactive element to deliver information to the audience. I chose a personal subject of interest: Arabian horses, a breed I've loved riding and caring for since I was a child.

What I learned

The audience is more likely to interact with an educational piece if they can make decisions about what they learn and how much time they spend learning. Large amounts of text can also be distracting and detract from the learning.

How it's made

This project was created using HTML, CSS, JavaScript and jQuery. I painted the outline of a horse in Adobe Illustrator and used it to make an interactive SVG. The user can click on different parts of the horse drawing to see facts on Arabian horses. A Google Geochart was used to make an interactive map in which users can see which countries have the most Arabian horses.

© 2019 by Andrea Brucculeri