Parsons Masters in Data Visualization | Major Studio 1
See interactive visualization here
Created a new json file (finalyClippedFileAndHeight.json) that had all sculpture objects with additonal link to image.
See bgrmv.ipynb, ran using jupyter notebook
Manually excluded images of sculptures that did not work with the OpenCV clipping script (images that were only partially clipped or were not clipped at all). I also manually cropped any photos that were clipped enough to be usable but had additional space at the top or bottom that needed to be removed in order to map the correct height.
See sculptures2.js for full script
Select html elements where scaled images will go:
// scaled images
let mainSmall = document.querySelector(".mainSmallImage");
console.log(mainSmall);
let myImageMedium = document.querySelector(".mainMediumImage");
console.log(myImageMedium);
let myImageLarge = document.querySelector(".mainLargeImage");
console.log(myImageLarge);let extraSmallSculptures = [];
let smallSculptures = [];
let mediumSculptures = [];
let largeSculptures = [];
let extraLargeSculptures = [];
// loop through sculpture objects and categorize (add group to clipped sculptures objects, and also push to array for each category)
clippedSculptures.forEach(sculpture => {
if (sculpture.height <= 10) {
sculpture.group = "extraSmall";
extraSmallSculptures.push(sculpture);
} else if (sculpture.height > 10 && sculpture.height <= 50) {
sculpture.group = "small"
smallSculptures.push(sculpture);
} else if (sculpture.height > 50 && sculpture.height <= 100) {
sculpture.group = "medium";
mediumSculptures.push(sculpture);
} else if (sculpture.height > 100 && sculpture.height <=200) {
sculpture.group = "large";
largeSculptures.push(sculpture);
} else {
sculpture.group = "extraLarge";
extraLargeSculptures.push(sculpture);
}
});Create function to change element attributes onClick & map height (example for small sculptures):
function changeSmall(){
imageIndex++;
mainSmall.setAttribute("src", "resized_clipped_tranparent_png/" + smallSculptures[imageIndex].fileNamePNG);
overviewSmall.setAttribute("src", "resized_clipped_tranparent_png/" + smallSculptures[imageIndex].fileNamePNG);
mainSmall.style.height = baseHeight * smallSculptures[imageIndex].height + 'px';
overviewSmall.style.maxWidth = overviewWidth;
overviewSmall.style.height = 'auto';
smallOverviewDescription
.html(`<b>${smallSculptures[imageIndex].Title}</b> (${smallSculptures[imageIndex].endDate})<br/><br/><b>${smallSculptures[imageIndex].height} cm | ${(smallSculptures[imageIndex].height * 0.393701).toFixed(2)} inches</b><br/><br/>${smallSculptures[imageIndex].Medium}<br/><br/>${smallSculptures[imageIndex].Culture}`)
.attr('class', 'sculptureDescriptionSmall');
if (imageIndex > smallSculptures.length) {
imageIndex = 0;
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent