Learning D3 and the art of making ugly/bad charts

I started using D3.js last semester for my Impossible Maps final  and I want to learn more on how to use this library to create Data Viz projects. Thus, one of my goals during this semester in our Data Art class, is to explore more of it.

Therefore, when the teacher asked us to create three different visualizations for the same dataset for our first assignment I started my D3.js crash course.

In order to understand the basic commands, I started follwing these YouTube tutorials, that I thought are very good.

I made some really ugly and random drawings that reminded me of my early P5.js days.

From there, using the dataset provided, my very little new acquired knowledge of D3, and some examples available online, created 3 basic (and ugly, and probably not very user friendly) charts to visualize it in different ways.

You can check the code in my Data Art/Week1 Github repository and the examples below.

Bubble Chart



Bar Chart



Not Very Understandable Pie Chart



As you can see there is a lot to improve!!! But that was only the beginning 🙂

I’m exciting to keep exploring Data Viz, Data Art and the D3.js library.












Systems Thinking and Superfoods

#1 Assignment

For this first assignment of Temporary Expert we given a random research topic related to “energy” in order to learn how to analyze it through Systems Thinking. It was a random topic since the idea is not to necessarily get deep and enthusiastic on the topic itself but the methodology of research.

My random topic is Superfoods.

What actually defines a superfood? Nutritional value? Comparing to what? How “exotic it is? Marketing? Culture? Economy? … when did it started to be used? Why?

I hope I’ll be able to understand this term and map the systems behind it in the next paragraphs.


But first… What is Systems Thinking?

According to Howard Silverman, “A system is a set of interacting or interdependent component parts forming a complex/intricate whole.” It has three basic features that are (A) parts or elements, (B) interactions or relationships, and (C) a function or purpose or emergent properties or behaviors.

With that, we can think about different systems such as education, democracy, a social network, eastern medicine, and so on. As our teacher, Marina Zurkow,  illustrated when she was presenting this concept, the same exact thing can and probably will be analyzed very differently through the eyes of different systems, as we can check below.

When we think about religions, and branches inside those religions, we can also see totally different ways to see the same concept or value.

In another study case, when following a heated discussion on twitter to organize a protest in which environmentalists plan to destroy a crop of genetically modified wheat, Steve Easterbrook identified a couple of systems that helped him analyze this issue. You can understand the idea behind the system of the scientists doing research, the system behind research ethics and risk management, the economic system in which investment in R&D is expected to boost the economy, a system of intellectual property rights and the corresponding privatization of public goods and so on.

Thus, as we can understand, each system has a specific perspective and point of view.

With that, on the next paragraphs  I’ll make some research around my topic (superfoods) to figure out how to identify and map existing systems (and points of view) around it.


Superfoods: a bit of research

Starting with the basics

Let’s see what Oxford dictionaries has to say about Superfoods.

and, of course, Wikipedia.

Initially, once reading the definitions and examples from these sources, we can understand that, generally speaking, superfoods refer to foods — especially fruits and vegetables — whose nutrient content confers a health benefit above that of other foods. However, there is no technical definition of the word and the scientific evidence for the health effects of these foods, once the main interests of creating this concept and making it become popular come from a marketing perspective of economical interests.

But let’s dig deeper.

How academy sees Superfoods

According to this book Diet Cults: The Surprising Fallacy at the Core of Nutrition Fads and a Guide  by Matt Fitzgerald (a nutritionist, athlete, coach who writes for a bunch of nutrition and sports magazines), and this very interesting paper on the Parallel Food Classifications in Developing and Industrialized Countries  , the idea of the superpower of foods is old, very old.

I mean, it does make sense, food is what makes us alive and that’s already a crazy power. So now imagine that you don’t live in an industrialized, globalized world. Therefore, in your life, agriculture takes a way bigger role and tangible importance than today. If there is a dry season, you are directly impacted by it. If there is a plague, same. So having the ability to receive energy from food and having it in abundance, is, by itself, a super power.

Derrick B Jellife explains more about this relationship in some societies with specific foods, classifying those sources of energy as cultural superfoods.

“The characteristics of cultural superfoods are that they are usually, but not always, the dominant staple and main source of calories, while their production and preparation occupy a major part of the community’s work time, both agriculturally and domestically. Because of their importance for the survival of the particular community, they often have a semidivine status, being interwoven into local religion, mythology and history”.

Below you can check some examples of how he classified cultural superfoods.

Still, even though having a god/superpower like relationship with that specific food, the label superfood was not a term that the Aztecs used to describe cacao and chocolate for example.

So when did it start to be used and why?

Nutrition Academics don’t use the term Superfood as described in the dictionary

So from our definition of superfoods, I wanted to have a broad definition and general idea of what nutrients our body actually needs and what are the essential nutrients  – because even though I am a human that eats, I haven’t touched this subject since Biology class in High School.

According to this giaenourmous book of Oxford Press on human nutrition (Essentials of Human Nutrition, by Jim Mann, Stewart Truswell)  there are essential nutrients that a human body needs to function in a healthy basis. Those are defined as “chemical substances that cannot be synthesized at all or in sufficient amounts in the body, and are necessary for life, growth and tissue repair.” As a result, essential nutrients are carbohydrates, fats, fiber, minerals, proteins, vitamins, and water.

I would love to enter in more detail on that, but, for the matter of time and focus for this first week assignment, I feel this is not really necessary – I need to understand the systems surrounding the superfood term, rather than try to define or test the term myself. So i decided it was better to stop there.

The most curious thing regarding systems mapping on superfoods that I took from this book?

It mentioned superfoods only twice. Both related to the word popularity in a market/economical sense. It became popular since it was labeled (the authors do not specify by who, but I think we could imply that as companies, enterprises) as a superfood. This book was edited recently, in 2012, seems to be one of the nutritionist “bibles”on the subject.

In this paper from the British Nutrition Foundation by J.Lunn entitled Superfoods, he starts with the sentence “These days, competition in the supermarket is fierce…”. He does highlight that it is a term that was used in scientific press, but usually to describe more energy dense ones rather than foods that are richer in a nutrient that would have a specific benefit.

With those sources in mind, I believe we can assume that this is not a word that comes from a nutritional experts background but from a Marketing/Economical one.

The trending market of  Superfoods

According to this article from The Harvard School of public Health, “the earliest recorded example may have taken place in the early 20th century around World War I, used as part of a food marketing strategy. The United Fruit Company initiated an enthusiastic advertising campaign to promote its major import of bananas. It published informational pamphlets including Points About Bananas and the Food Value of the Banana. [1] Initially the company had advertised the practicality of bananas in a daily diet, being cheap, nutritious, easily digested, available everywhere, good when cooked and not cooked, and sealed by nature in a germ-proof package. To get people to eat more, they suggested adding bananas in cereal for breakfast, in salads for lunch, and fried with meat for dinner.”

In other sources, it  appears to have been first used in a Canadian newspaper in 1949 when referring to the supposed nutritional qualities of a muffin.

Since the beginning of the 90’s the term “superfood” has been frequently used as a marketing tool for selling specific foods, dietary supplements, foods with selected food additives, and self-help books about diets, promising an enhancement to health. The essentials are in place: scientific research on a particular food, catchy headlines from the fast-paced popular press, as well as infomercials and marketing campaigns of involved food industries.

Coinciding with the natural foods movement and greater public awareness around healthy eating, in 2012, 61% of people in the UK have purchased a food because it had been labelled a superfood, accordingto YouGovresearch commissioned by Bupa.

According to Mintel Global New Products Database (GNPD), superfoods, including superfruits or supergrains, saw an increase of over 200 percent in new product launches between 2011 and 2015.

The Superfood Evangelists

According to this article from Refinery 29, “Superfood” is was first coined by Michael Van Straten in 1990 in his Superfoods cookbook. Like Michael, we can find a lot of evangelists and  ‘specialists’ in Superfoods with a considerable number of books, articles and youtube videos on the subject.

They are advocates of healthy eating and very passionate about teaching the powers of specific fruits and vegetables. They believe that our nutrition potential is finally catching up with technology, that now with globalization and the ability to have quality products and knowledge from nutrition around the globe “a new day is dawning in the world of nutrition”.  David Wolfe and Debora Klein are some examples.

In his book, entitled Superfoods, David Wolfe splits what he calls special foods into three ancient food groups: the Living, raw plant foods; Superfoods; and Superherbs. This is the first description of Superfood used in his book:

He describes superfoods as both a medicine and a food. His book revolves around the benefits of specific foods and how to include it in your diet, focusing mainly on the top ten superfoods described as:

Public Departments and Labeling food

While the term may seem official, the U.S. Department of Agriculture — which has regulated the word “organic” since the ‘90s and the term “gluten-free” since 2013 — has yet to create any guidelines for “superfood,” explains Sharon Akabas, PhD, the associate director at the Institute of Human Nutrition at Columbia University. “The word ‘superfood’ has no actual meaning,” she says.

In fact, in 2007 the EU legislation banned the use of the term superfood unless it is accompanied by a specific authorised health claim that explains to consumers why the product is good for their health.

Systems Thinking: Mapping Superfood

From this brief research and understanding of superfood and its Systems, this is where I arrived.

This was just a first quick glance at the Systems surrounding Superfood. I will deepen this research in the next weeks.

I believe there is further research needed in order to understand  the  Systems that create legal regulations towards labeling Superfoods and mainly about the “trend of healthy eating” and Exoticism, that associates Superfoods with Western Medicine.



What does Open Source means to me?

Open source is a way to create digital projects. To share your ideas, to help and get help. To co-create and make projects happen. Open Source – ideally – is an extension of what the utopia of the internet is: democratic, accessible and collaborative.

Even though Open Source represent all of the amazing rainbow shiny things mentioned above, I’ve never contributed to any Open Source project. I have definitely flirted, and still am actively flirting with some, but it’s usually more of a platonic relationship rather than a collaborative one.

I really identify with  Vesha Parker said in almost all of her interview with Jen Kagan, mostly when she mentions how intimidated she was about actively collaborating on Open Source Projects. As a beginner on programming, I don’t feel that I am quite prepared to start trying to fix issues or to be part of a community of  “experts”.

Like I’m not on that level yet.

I see projects like Serenata de AmorThree.js, AR.js and it really inspires me to keep studying and looking forward to becoming a better coder.  I do believe in the quote by Matt Mullenweg, also mentioned in the Vesha Parker interview, that “open source is a moral thing”.  We should support each other and look forward to create tools hat can help users, that can make content and data more democratic and to make this process explicit and accessible.

I hope that with this class I can “break the ice” and actively become part of the open source community.

In sum, for me, Open Source is: democratic, collaborative, a great way to help change the world AND intimidating – YET.

for I am a woman: revisiting the morning orthodox jewish blessings

For my electronic rituals and fortune telling class final project I wanted to create a ritual/moment that helped me connect in a daily basis with things that go beyond my daily routine. Still, once I wasn’t really sure to what specifically and how to create this connection, I started to research ritualistic practices within my family and my religious background for inspiration. In this process, I came across the everyday jewish morning blessing: Birchot Hashachar.

In spite of being practiced only by orthodox jews and not commonly used by all people that follow judaism, Birchot Hashachar contains an excerpt that makes me feel very uncomfortable as a jewish woman: in the Orthodox daily prayer service, men thanks ‘God who has not made me a woman‘, whereas the parallel
blessing for women is thanking ‘God for making me according to his will‘.

Blessed be he who has not made me a woman

בָּרוּךְ אַתָּה יְיָ אֶלֹהֵֽינוּ מֶֽלֶךְ הָעוֹלָם, שֶׁלֹּא עָשַֽׂנִי אִשָּׁה

It is not new that, like other western world’s major religions, Judaism fosters gender hierarchy and traditional gender ideologies. The Jewish tradition defines separate spheres for men and women, with men occupying the public sphere and women limited to the private sphere. Accordingly, women are exempted from many of the religious rituals that could undermine their devotion to domestic responsibilities. Still, I was surprised by such a straightforward Gender discriminatory statement that is recited daily by such a large amount of men.

In response to that, I created for I am a woman. It is a Chrome Extension that gives me a daily  reminder of the existence of this discriminatory blessing  with a small dose of inspiration of people who defied/defy this status-quo.

At every 10AM this Chrome Extension pops up a window in my browser to show information about a different extraordinary person that helped/helps define, establish, and achieve political, economic, personal, and social equality of genders.

The pop up randomly chooses one inspirational person to display, selected from a json file where I manually added the data. This was the pop up that I received today.

This was the first chrome extension I created. At first, the idea for this project was to create a webpage. But, as I started to research and user test, people often asked me “when would I visit this page??”. I couldn’t come up with a good answer for that, and that’s when the idea of developing it as something that would pop up in your screen at a specific time seemed more appropriate.

In the background.js file on the Chrome Extension, I added this code that checks the time and displays the pop up with the content once its 10 o’clock.

var popup = chrome.extension.getURL('foriamawoman/index.html');
var win;


function buttonClicked(){
console.log("button clicked")

setInterval(checkTime, 10000);

var alarmTriggered = false;

win = window.open(popup, '', 'width=750, height=360');

function checkTime(){
var now = new Date;
var hour = now.getHours();
if (hour == 10){
if (!alarmTriggered){
win = window.open(popup, '', 'width=750, height=360');
alarmTriggered = true;
} else if (hour > 10){
if (alarmTriggered){
alarmTriggered = false;

You can check the code on my github.







Impossible Maps Final Idea

When I moved to New York, besides becoming a student again, a newbie in town, a foreigner and so on… I became a “Latina”.  An the truth is that I’ve never thought of myself as a latina. I am Brazilian. My first language is portuguese. I do not have any hispanic origin in my family. But yes, I was born in Latin America.

Accordingly, at the same time that it is uncomfortable to fill census reports and forms here in the United States, it is still interesting to understand how my identity as a human being is redefined once moving to a foreign country.

My goal is to play with that idea of how culture, bias and identity are created and defined in American society and somehow transform that into a map. One reference that I really like is Alfredo Jaar’s  A Logo for America, a piece that doesn’t explicitly talk about those concepts but have them in its statement.

I’m not sure how I would develop that but I’ll look into more references and update it soon.






Feminist mapping and biased satellites

For this week’s readings we went over the article What would Feminist Data Visualization look like? and the chapter on Representation and the Necessity of Interpretation form Laura Kurgan. Both readings invite us to rethink about the way data is shown in maps, in order to understand that it is presented for a reason and purpose and therefore there will always be a bias and therefore a relationship of power involved.

The first article touches in the concept of how feminist standpoint theory would approach data visualization, mentioning that  all knowledge is socially situated and that the perspectives of oppressed groups including women, minorities and others are systematically excluded from “general” knowledge. Despite that, it suggests interesting approaches that creators should think when trying to develop “unbiased” maps according to feminist data viz, such as developing new ways to represent uncertainty, invent new ways to reference the material economy behind the data and create ways to make dissent possible so we can find ways to go back to the material that originated that visualization.

The second reading starts by breaking down the perception that satellite images analysis are somehow neutral and can be deliberately taken as statements. It mentions about the use of satellite images to justify the invasion on Iraq, proving this point. Accordingly, it states that there is no such thing as raw-data and suggests that working with data is a para-empiricism.

I believe that both readings prove their points. I really liked the suggestions on the Feminist article about new ways to present data that would clarify the choices and make the “bias” explicit. What if we visually problematized the provenance of the data? The interests behind the data? The stakeholders in the data? I believe that it is part of the visualization experience to highlight some aspects over others, according to the maps functionality. Thus is impossible not to create somehow biased maps. Accordingly, as creators, it is our responsibility to be aware of those choices and keep them explicit to the public.

How does income gap affects violence rates?

So for this assignment we were asked to play with our own .csv files to create a data visualization inside a map using Mapbox.  Thus, Hadar and I decided to compare two datasets: the gini index of each country with its deaths by firearms.

Gini index or Gini coefficient is is a measure of statistical dispersion intended to represent the income or wealth distribution of a nation’s residents, and is the most commonly used measurement of inequality. Death by firearms is identified as the number of deaths caused by the use of firearms during an year in that specific country. By collecting these data I aimed to analyze how does income inequality relates to violence rate.

You can check the map here.

The blue circles are the gini index (the bigger the gini index, the more social inequality), and the red circles represent the deaths by firearms.

According to this map it doesn’t become clear if there is a connection between these two datasets. I believe we have to map the values better and to add the actual number of the datasets when the user hove some of the circles. Also, there are some circles that are too big and are covering some of the countries, which makes it hard to identify.

Besides, the datasets we used to collect this data are not very reliable. First, they didn’t include all country’s in in and second, the data is not correspondent from the same year.

Still, even though this map needs iteration, this was a very interesting experiment.






Magic Windows Final Project Documentation

As mentioned in the last post for my final for Magic Windows I continued developing a project on recreating Washington Square Park in 1968 by creating a story of 2 characters and visually placing archival images in space through AR while the monologues are played.

The monologues and their respective visual scenes are be created using geolocation and the final scene when the 2 characters meet triggered by image targeting – once the meeting point is set to be under the park’s arch.

Therefore, I worked with Mapbox to set the geolocation in the park and with ARKit 1.5 for the image targeting with the app.

I used Mapbox and set two points, one in each extreme side of the park. For each side I placed two different GameObjects to SetActive, so I created a script that checks the device location and triggers the GameObject related to the point that the user is closest to. And after some weeks of iterating. meeting with mapbox and some work, it worked great!

(as i move closer to the right side of the park the red square is triggered, if i move to the left side, the green ball is triggered)

Here follows the *messy* script I’m using:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Mapbox.Unity.Location;

public class locationRelative : MonoBehaviour {

public DeviceLocationProvider locationProvider;
public Vector2 parkLocation;
public float boxBounds;

public GameObject[] objects;
public Vector2[] locations;

// public GameObject sphere1;
// public GameObject sphere2;
// public GameObject sphere3;
// public GameObject sphere4;
// public GameObject sphere5;
// public GameObject sphere6;
// public GameObject sphere7;

// Use this for initialization
void Start () {


// Update is called once per frame
void Update () {

//location ONE
Vector2 myLocation = new Vector2 (

float minDistance = 9999999999;
int minIndex = -1;
for (int i = 0; i < locations.Length; i++) {
Vector2 location = locations [i];
float distance = Vector2.Distance (myLocation, location);
if (distance < minDistance) {
minDistance = distance;
minIndex = i;

if (minIndex == 0) {
} else {

// if (locationProvider.CurrentLocation.LatitudeLongitude.x < parkLocation.x + boxBounds && // locationProvider.CurrentLocation.LatitudeLongitude.x > parkLocation.x - boxBounds){
// if (locationProvider.CurrentLocation.LatitudeLongitude.y < parkLocation.y + boxBounds && // locationProvider.CurrentLocation.LatitudeLongitude.y > parkLocation.y - boxBounds){
// sphere1.gameObject.SetActive(true);
// sphere2.gameObject.SetActive(true);
// sphere3.gameObject.SetActive(true);
// sphere4.gameObject.SetActive(true);
// sphere5.gameObject.SetActive(true);
// sphere6.gameObject.SetActive(true);
// sphere7.gameObject.SetActive(true);
// }
// }


I also added the image targeting using the new ARKit 1.5, which was very exciting since it works great!!! Check below.

For now I’ve been working mostly with placeholders, so as the device recognizes the arch, a blue capsule appears.


At that point mapbox/arkit 1.5 were living in different projects so the next step technically was to have the 3 scenes (character 1, character 2 and the encounter) inside the same project.

This took me a bit longer than expected, but once closely analyzing the files and replacing the older version of ARKit for the 1.5 inside the mapbox example it finally happened.

Next step then is to add the actual images to the scene in space in a – nice – ux  way.

So that’s what I’ve been playing with lately, because it’s kind of hard actually.

One idea was to set the images active once the planes were detected. But as you can see below this was not the best. The images appear too close and as you have not much control over how they will show up I don’t believe it would work in this project scenario.

So I decided to add GameObjects set as colliders randomly on space. Now, again, they have materials so I can see them and play with their arrangement.

On the following video (made during the snow storm) I changed the locations to be able to test it on ITP’s floor all those features (geolocation, image targeting, objects colliding) are working.

Below follows the script I made to generate the random colliders and add the images in an array squence.

using UnityEngine;
using System.Collections;

public class CamSpawn : MonoBehaviour

public GameObject[] imageScene;

public GameObject sceneNYU;

public GameObject colliderObject;

private int imageCount = 0;
public int imageMax = 10;

private Camera cam;

int num = 0;
int collideLoop = 10;
int loopNum = 2;

int spawnCount = 0;
int spawnLimit = 2000;
float delayCount = 0.5f;

private bool TapSpawn = true;

void Start()
cam = GetComponent();

for (int hey = 0; hey < collideLoop; hey++){
Spawn ();

void Update(){

// ///Touch
// int touchNum = Input.touchCount;
// Touch[] myTouches = Input.touches;
// for (int i = 0; i < Input.touchCount; i++) {
// if (Input.touchCount == 1) {
// }
// }

void minSpawnCount(){
spawnCount -= 1;

void spawnBool(){
TapSpawn = true;

void Spawn(){
for (int b = 0; b < loopNum; b++) {
Vector3 position = new Vector3 (Random.Range (-10.0f, 10.0f), 0, Random.Range (10.0f, 50.0f));
GameObject obj = (GameObject)Instantiate (colliderObject, position, Quaternion.identity);
obj.transform.parent = sceneNYU.transform;

void OnTriggerEnter (Collider other) {
if (spawnCount <= spawnLimit && TapSpawn == true) {

float DistanceToCamera = 3.0f;
Vector3 position = cam.transform.forward * DistanceToCamera + cam.transform.position;

GameObject obj = (GameObject)Instantiate (imageScene[imageCount], position, Quaternion.identity);

//this object is the child of scene nyu
obj.transform.parent = sceneNYU.transform;

spawnCount += 1;

float tempRate = Random.Range (60.0f, 70.0f);
GameObject.Destroy (obj, tempRate);
InvokeRepeating ("minSpawnCount", tempRate, 0.0f);

TapSpawn = false;
InvokeRepeating ("spawnBool", delayCount, 0.0f);

imageCount += 1;

if (imageCount == imageMax) {
imageCount = 0;



The “colliders” way to spawn images in the park worked well, but it got harder once the colliders were transparent. Some times they would cluster in a specific region and it was not creating the experience I wanted to.

So I developed another script that spawned the images according to the distance from the camera, and it worked well. It was a bit of a hustle having to customize all images to be in the right height and size but it’s working well.

Also, for better user testing, I added a “demo UX” with the introduction audio.

Below you can check the demo: