Data cleaning prepares gathered information for visualization by analyzing, cleaning, formatting, and standardizing it. It often takes substantial time and requires patience and diligence. section 14.1 section 9.4
A practical cleaning workflow is:
- Define what information the visualization should show before searching for data. section 14.1
- Gather relevant records from different sources, then analyze their structure and content. section 14.1
- Clean and format the records into a standardized dataset that the visualization can use. section 14.1 section 9.4
- Define the data scope early so later handling does not become overwhelming. section 9.4
Preparing Van Gogh artwork data
A visualization of Vincent van Gogh’s paintings, drawings, and letters requires records gathered from several resources, analyzed and formatted so they can be situated in time and compared across artistic phases. section 14.1
Listing 14.1 Extracting data from Van Gogh’s paintings on Wikipedia
const tables = [ #1
{ index: 0, medium: "oil" },
{ index: 1, medium: "oil" },
{ index: 2, medium: "oil" },
{ index: 3, medium: "oil" },
{ index: 4, medium: "oil" },
{ index: 5, medium: "oil" },
{ index: 6, medium: "watercolor" },
{ index: 7, medium: "print" },
{ index: 8, medium: "print" },
];
const domTables = document.querySelectorAll( #2
".wikitable.sortable"
);
const paintings = []; #3
domTables.forEach((table, i) => { #4
if (i <= tables.length - 1) {
const medium = tables[i].medium;
const rows = table.querySelectorAll("tbody tr");
rows.forEach(row => {
let title; #5
if (row.querySelector(".thumbcaption i a")) {
title = row.querySelector(".thumbcaption i a")
.textContent;
} else if (row.querySelector(".thumbcaption i")) {
title = row.querySelector(".thumbcaption i")
.textContent;
} else {
title = null;
}
let imageLink; #6
if (row.querySelector(".thumbinner img")) {
const image = row.querySelector(
".thumbinner img"
).srcset;
imageLink = `https${image.slice(
image.indexOf("1.5x, ")+6,-3
)}`;
} else {
imageLink = null;
}
paintings.push({ #7
title: title,
imageLink: imageLink,
medium: medium
});
})
}
});
console.log(paintings); #8
A JavaScript listing demonstrates extracting painting records from multiple Wikipedia tables and organizing them by medium before visualization. section 14.1
