Overview:
I have an unhealthy obsessions with Postcards, specially those that carry a very Edgy-vintage design that looks like they were made using Paint 🙂 and since the 1st of October coincides with the World Postcard day I have decided to create a non commissioned postcards to my favorited museum ever the MoMA (Museum of Modern Arts).
I went on Kaggle and found a dataset of with LITERALLY ( 67695 ) of MoMa artist so thought first of distinguishing the non American artist with the color grey to emphasize on the global domain of the MoMa and the scattered the name of the artist all over the screen, and then I printed at the Middle of the screen postcards from MoMA.
So the Data Visualization part is that this code distinguishes the American from the Non American Artist visually by color. which If I would have thought of creating this postcards by hand would have been a nightmare for me as a designer wen I have a dataset of 67695 artists 🙂
Embedded sketch:
Mockup Rendering:
Highlight of the code I am proud of:
This was my first time I work with Dataset and it wasn’t easy at all. So I guess I am proud of my logic of distinguishing the artists Nationality.
// Define the box parameters
let boxX = 50;
let boxY = 50;
let boxWidth = width - 2 * boxX;
let boxHeight = height - 2 * boxY;
// Extract artist data from the CSV
for (let i = 0; i < table.getRowCount(); i++) {
let row = table.getRow(i);
let artistName = row.get('Name');
let nationality = row.get('Nationality');
let status = row.get('Status');
if (artistName && nationality) {
artistData.push({ name: artistName, nationality, status, x: 0, y: 0 });
}
}
The above code defines the parameters for a rectangular “box” on a canvas, specifying its position and dimensions. It then iterates through rows of a CSV file, extracting artist data such as name, nationality, and status. If both the name and nationality exist, this data is stored in an object and added to the artistData array. This process prepares the artist data for subsequent display within the specified box on the canvas.
Reflection:
This was my hardest Assignment yet as that finding a dataset and thinking of an idea to model the dataset was not easy at all however, I am very happy with the end result as that If I found that on the shelf of the MoMA I would love to have that postcards that keeps all the names of the artist I was impressed by their work closer to me, so that I would take the opportunity to google the artist that my eye falls into. And I am writing an email to MoMA perhaps they are interested to take this into their postcards collection :0.
Future improvements:
If I would have attempted this assignment once again I would:
- Enhanced User Interaction: The inclusion of interactive elements, such as mouse-based actions or keyboard input, can empower users to explore the artist data interactively. This might involve enabling users to filter artists based on specific criteria or offering additional information upon clicking an artist’s name.
- Responsive Design: Implementing a responsive design approach ensures that the project can adapt seamlessly to various screen dimensions and orientations, guaranteeing an optimal user experience across different devices.
- Informational Overlays: Providing informative overlays or tooltips that furnish users with supplementary details about each artist when they hover over or click on an artist’s name can enhance the user’s understanding of the data.
- Dynamic Animations: The addition of fluid animations for transitions, color alterations, and text movements injects dynamism into the visualization, thereby engaging users more effectively.
- Search Functionality: Incorporating a search feature empowers users to search for particular artists or filter data based on various attributes, thereby enhancing usability.
- Sorting Mechanisms: Offering sorting options for the artist list, permitting users to sort by attributes such as name, nationality, or status, enhances the user’s ability to explore and comprehend the data.
- Data Updates: By enabling real-time data updates through either connecting to a live dataset or facilitating the upload of new CSV files, the project can remain current and relevant.
code:
//Batool Al Tameemi, Intro To Im
//Assignment 5: Datasets and visualization
let table; // Declare a variable to hold the CSV data
let artistData = []; // Initialize an array to store artist data
function preload() {
// Load your CSV file
table = loadTable('artists.csv', 'csv', 'header');
}
function setup() {
createCanvas(800, 600);
noLoop();
// Define the box parameters
let boxX = 50;
let boxY = 50;
let boxWidth = width - 2 * boxX;
let boxHeight = height - 2 * boxY;
// Extract artist data from the CSV
for (let i = 0; i < table.getRowCount(); i++) {
let row = table.getRow(i);
let artistName = row.get('Name');
let nationality = row.get('Nationality');
let status = row.get('Status');
if (artistName && nationality) {
artistData.push({ name: artistName, nationality, status, x: 0, y: 0 });
}
}
// Draw a box
noFill();
stroke(0);
rect(boxX, boxY, boxWidth, boxHeight);
// Display artist names with the specified conditions
textSize(12);
textAlign(LEFT, TOP);
for (let artist of artistData) {
let x = random(boxX, boxX + boxWidth - textWidth(artist.name));
let y = random(boxY, boxY + boxHeight - textAscent());
// Check for overlap with existing text
let overlapping = false;
for (let existing of artistData) {
if (artist !== existing) {
let d = dist(x, y, existing.x, existing.y);
if (d < 20) {
overlapping = true;
break;
}
}
}
// Set text color based on conditions
if (artist.nationality !== 'American') {
fill(192, 192, 192); // Silver
} else if (artist.status === 'Dead') {
fill(255, 215, 0); // Gold
} else {
fill(0); // Default text color
}
// If not overlapping, display the text
if (!overlapping) {
text(artist.name, x, y);
artist.x = x;
artist.y = y;
}
}
}
function draw() {
textSize(30);
textAlign(CENTER, CENTER);
fill(random(0,255)); // Set text color to black
// Set the built-in font
textFont("Georgia");
stroke(color(255));
// Calculate the center of the canvas
let centerX = width / 2;
let centerY = height / 2;
// Use frameCount to create a continuously changing color
let hue = (frameCount * 2) % 360; // Adjust the factor for color speed
let textColor = color(0);
fill(textColor);
// Display the text at the center of the screen
text("Postcards from ", centerX, centerY - 90);
textSize(160);
text("MoMA", centerX, centerY);
}
