Interaction Design at Sheridan College
Public
Edited
Mar 28
recipeData = await d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQg9G_uv2U0M-a-vnBcAyjIH3Bj9q0kyNBztz1nLhHWRIGAQscvSc7zpUtZWSJq3mCSnIKIRAAU4lB2/pub?output=csv")
convertToDirectImageLink = (viewerUrl) => {
// Regular expression to extract the file ID from the Google Drive URL
const regex = /(?:drive\.google\.com\/open\?id=|\/d\/)([a-zA-Z0-9_-]+)/;
const match = viewerUrl.match(regex);
if (match && match[1]) {
const fileId = match[1];
return `https://drive.usercontent.google.com/download?id=${fileId}&authuser=0`
//return `https://drive.google.com/uc?id=${fileId}`;
} else {
throw new Error('Invalid Google Drive viewer URL');
}
}
fallBackImage = "https://media-hosting.imagekit.io//2570541a55354d5e/Microwave-mac-and-cheese-1200-8 - Francine Paguio (1).jpg?Expires=1837576563&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=kuvM1Zb8ppCFQbmscPlm35bG-Yyi1e4PQBsoBtxUjSkSImU7rzad7Vjr3RVAZjY3a59oi-ZYd7RuP4SEdaCawytwTK86E5NsVzLtr~R6iU8niEMUP3nsM8SVUe8xtJCeOq3iY5~yvkxAQCwZ9uLPAoWeZ-eIpHLP2z6OEjYoQmoPQNf66PE75RrRZV-a6tHn96j8RfOtJrRrxstDE~p7v4JF62LeePFDBCFKDCjlqBAQy3TnhkA1TmpHrP46U0O-XmNm26gTOnwhaEnIpn4jXSFBa-bLA7~lY7e68g~dH1-t9aQNwIASCfNzyVYMqYdayzNUuzN66uyl~PSXYt69~A__"
// This is where we process and fix the image URLs
fixedRecipeData = recipeData.map(function(d) {
return {
...d,
ImageURL: ( convertToDirectImageLink(d["Images:"]) || fallBackImage) // Fallback image if no valid URL
};
});
Plot.plot({
width: 600,
height: 400,
x: { label: "Estimated Cost per Serving ($)" },
y: { label: "Cooking Time (Minutes)", grid: true },
marks: [
Plot.ruleY([0]),
Plot.image(fixedRecipeData, {
// Debugging: Log data to check if the URLs and other properties are correct
x: (d) => {
const cost = parseFloat(d["Estimated Cost per Serving: "]);
console.log("Estimated Cost: ", cost); // Debugging
return isNaN(cost) ? 0 : cost;
},
y: (d) => {
const cookingTimeInMinutes = d["Cooking Time:"].split(":")[1];
console.log("Cooking Time: ", cookingTimeInMinutes); // Debugging
return parseInt(cookingTimeInMinutes, 10);
},
// Debugging: Check if the image URLs are correct
src: (d) => {
console.log("Image URL: ", d.ImageURL); // Debugging
return d.ImageURL;
},
r: 20, // Image size (adjust as needed)
// Optionally, add a title to images for debugging purposes
title: "Name" // Assuming there's a 'Name' property in your dataset
})
]
});
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
fixedRecipeData
X*
—
Y*
—
Color
—
Size
ImageURL
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
googleBananaPancakesFrancinePaguio = FileAttachment("google://banana pancakes - Francine Paguio.jpg").image()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
