Polarization in Western Democracies is a significant concern and has led new and existing nonprofit organizations (NGOs) to focus on this problem. Knowing that we are stronger together, I wondered how their actions combine and generate an even more substantial impact.
How are the focus and actions of Nonprofit Organizations interconnected?
In this project, I used D3.js to generate a network of NGOs linked by their shared fields of action like immigration, democracy, and social justice. The visualization is architected for exploration, to discover the scale at which these NGOs operate (Global, National, Regional, etc.) and other organizations with which they share one or many fields (s) of action.
Finding an angle of analysis
When starting a data visualization project, you usually have a dataset in hand, or at least a subject about which to find data. Once you've explored your dataset and made some necessary observations, you can start thinking about which type of data visualization would suit it best. The visualization is at the service of the data, not the reverse.
For this project, I went against best practices and did precisely the reverse. The reason is, this project started with a design requirement for my website, where I wanted to display a network. You see, I entered the field of data visualization with the desire to support science, journalism, and democracy with my work, knowing that all of our little contributions combine and make a real difference. I planned to symbolically suggest this motivation with a network visualization, where connections pull and push nodes until they find equilibrium. Kind of like in real life!
At first, I hoped to find a dataset of NGOs with information about their field of action, the countries in which they provide services, and maybe even how they collaborate. Unesco did assemble a Yearbook of International Organizations, which seemed like an interesting starting point, but the price didn't match a personal project's budget. After a few hours of research, I was getting a little discouraged and was about to start searching for a different angle. But luckily, I stumbled upon a dataset assembled by Carl V. Lewis in 2018 and available on data.world. This data was collected manually by the author, focusing on nonprofits fighting polarization in Western society. Although this dataset is by no means complete and concentrates mainly on organizations operating from the United States, it matched my initial subject and contained enough information to create a rich visual. Also, 163 organizations seemed like a reasonable amount to make what I had in mind. I was relieved, I had a base to start with!
Exploring and understanding the data
I began my exploration of the data by listing the type of information available for each organization. I knew right ahead that it would be interesting to represent the estimated number of people impacted visually. I also observed that I could link organizations by tags, representing each organization's field of action, and group the nodes by type of organizations, which is their main area of focus. My imagination was firing, thinking about all the visual possibilities. I quickly concluded that this data visualization could be a project on its own. I would later extract a simplified version of it for my website (the idea finally didn't cut the final design of my website). Also, some information was missing from the original dataset. But after an afternoon of data gathering, I filled the gaps.
I then used SQL and python to clean and prepare the data. For example, I grouped the tags into an array for each organization. I found that D3 needs a specific data format to realize a force simulation (used to position the links and nodes in a network). It requires a JSON file with the nodes' information grouped in an object, and the connections between each node explicitly listed in another one. Here's how it looked like for me:
1/* Data format sample */23{4 "nodes": [5 {6 "id": 1,7 ...8 },9 {10 "id": 2,11 ...12 },13 ...14 ],15 "links": [16 {17 "source": 1,18 "target": 2,19 "weight": 120 },21 ...22 ]23}
Even for a relatively small dataset of 163 organizations, this format generates a massive file of many thousand lines. Not something you wanna write by hand… Fortunately, I could quickly obtain the structure I needed by writing a small Python script.
Realizing that the dataset contained 21 types of organizations, I decided to group them into meta-categories: Communications, Civic life, Community, Economy, Technology, and Education, allowing to represent them by color.
Initial visual explorations: positioning the nodes
To create the network visualization, I turned to D3's force module and warmed myself up with a rudimentary visual displaying a node for each organization and linking them by shared tags. As you can see in the following image, the result was certainly not exciting. Still, I could already see some groups forming naturally, the organizations sharing more tags being pulled closer together by the force simulation.
I then colored each node based on the organization's primary focus (the six categories mentioned previously) and calculated it's the nodes areas based on the estimated number of people impacted.
D3 allows parameters like each node's initial position and the strength pulling nodes together when running a force simulation. It also lets you calibrate how much force to apply in the x and y directions and locate the center of mass of the whole simulation. After playing with these parameters for a bit, I finally decided to position the starting position of each organization's type around a circle. I also used the collide parameter to ensure that each node would be placed at least 5px from each other and avoid overlap.
Designing the links
Designing the linksAlthough I started to be happy with the nodes' position, I knew I had to do something about the links. There are 1056 links in this visualization, and showing them all is confusing and doesn't invite the users to explore further.
The first step was to give the links a different width based on how many tags they shared with another node. By reducing the opacity of the links sharing only one tag, a visual hierarchy started to appear. But that was not enough to make it pleasing to the eye.
To reduce the contrast between the circular nodes and the very straight links, I chose to generate curved paths between the nodes instead of simple lines. That was reasonably easy to do with D3's path generator, using the circle's center as the starting and endpoints. This article explains how to calculate an SVG path's different attributes with greater details. To give a more cohesive appearance, I also adjusted the paths' curvature based on their length.
Inspired by the visualization Nadieh Bremer created for UNESCO's intangible Cultural Heritage, I applied a color gradient to the links, based on the color of the two nodes it was connecting. That looked much better!
Shaping the nodes
Although I started to like the visualization, there was still room to provide more visual information. I was interested in the scale at which each organization operates (Global, Continental, National, Between 2 nations or Regional). Are global organizations always reach more people than National or Regional ones?
I designed a set of graphics, one for each scale. For example, Global organizations ended up being represented by six circles grouped in a flower-like shape. In contrast, regional organizations use a circle with a white dot in the center, suggesting that they target a specific area within a larger one. I was pleased with the result.
Extracting the final SVG
As I already mentioned, I provided specific parameters regarding the nodes' starting point and the forces holding them up together. From that information, D3 runs a simulation that iterates until it finds the right balance given the initial conditions. This process is fun to watch but didn't bring much valuable information. Contrariwise to my foodprint project (link), it was no more than a distraction. I opted to extract the final SVG and to add it inline to the DOM. In the final project (link), I use D3 solely to handle the user's interactions since they are tightly coupled with the original data.
Exploring the visualization
Now that I had my visual, it was essential to allow users to explore the organizations and how they connect. To do so, I first designed an interaction revealing linked organization as we hover nodes with the mouse. This interaction also shows an infobox, containing information such as the hovered organization's mission, scale, the estimated number of people impacted, and its website's URL.
To provide information about what exactly links the organizations together, I opted for a simple overhead information box disclosing which tags are shared by the highlighted organizations.
Besides, it felt essential to allow users to explore further highlighted organizations. To do so, clicking on a node freezes the current highlighted state and allows for rolling over the related organizations.