2f:T6bf,chart = { const width = 600; const height = 400; const margin = { top: 20, right: 30, bottom: 50, left: 60 }; const x = d3.scaleLinear() .domain([10, 15]) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([40, 70]) .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .tickSize(-height + margin.top + margin.bottom) .tickFormat("")) svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y) .tickSize(-width + margin.left + margin.right) .tickFormat("")) .attr("stroke", "gray") svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .append("text") .attr("x", width / 2) .attr("y", 40) .attr("fill", "black") .attr("text-anchor", "middle") .text("Sugar (g)"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .append("text") .attr("x", -margin.left + 10) .attr("y", margin.top) .attr("dy", "-1em") .attr("fill", "black") .attr("text-anchor", "start") .text("Calories (kcal)"); svg.selectAll("image") .data(data) .join("image") .attr("x", d => x(d["sugar (g)"]) - 12) .attr("y", d => y(d["calories (kcal)"]) - 12) .attr("width", 24) .attr("height", 24) .attr("href", d => fruitScale(d["fruit type"])); return svg.node(); } 30:T5be,averageColor = async function(imageSrc) { // Accepts a URL string, HTMLImageElement, or Blob/File object const img = await (async () => { if (typeof imageSrc === "string") { const img = new Image(); img.crossOrigin = "anonymous"; // allow CORS for remote images img.src = imageSrc; await img.decode(); return img; } else if (imageSrc instanceof Blob) { const img = new Image(); img.src = URL.createObjectURL(imageSrc); await img.decode(); return img; } else if (imageSrc instanceof HTMLImageElement) { return imageSrc; } else { throw new Error("Unsupported input type for averageColor()"); } })(); // Draw image on an offscreen canvas const canvas = document.createElement("canvas"); canvas.width = img.naturalWidth || img.width; canvas.height = img.naturalHeight || img.height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // Get pixel data const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height); let r = 0, g = 0, b = 0; const len = data.length / 4; for (let i = 0; i < data.length; i += 4) { r += data[i]; g += data[i + 1]; b += data[i + 2]; } r = Math.round(r / len); g = Math.round(g / len); b = Math.round(b / len); const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b) .toString(16) .slice(1) .toUpperCase()}`; return { rgb: [r, g, b], hex }; } 31:[] 2d:{"title":"Fruits scale","cells":[{"id":0,"value":"# Fruits scale\n\nAn example of [`pixel-mark`](https://observablehq.com/@liris/pixel-mark) from the [Dataquilt paper](https://dataquilt.github.io/) by Zhang et al. and that re-recreas an example from their study material: it uses dataset based on fruits properties, as well as images to use to create a scatterplot with such images. ","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"Plot.plot({\n height: 400,\n grid: true,\n x: {\n label: \"Sugar (g)\",\n domain: [10, 15]\n },\n y: {\n label: \"Calories (kcal)\",\n domain: [40, 70]\n },\n marks: [\n Plot.image(data,\n {\n x: \"sugar (g)\",\n y: \"calories (kcal)\",\n //src: fruitScale,\n src: d => fruitScale(d[\"fruit type\"]),\n width: 24,\n height: 24\n }\n )\n ]\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"# Process\n\nLet's begin by copying/pasting the original dataset:","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"@liris/pixel-mark","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"csv = `ID,fruit type,juice type,calories (kcal),sugar (g),vitamin-c (mg)\n0,apple,Concentrated,54,13,0\n1,apple,Concentrated,46,11,3\n2,apple,Concentrated,50,11,0\n3,peach,Nectar,66,14,2\n4,peach,Nectar,55,12,1\n5,orange,Juice,50,12,3\n6,orange,Sweetened,62,14,1\n7,apple,Juice,50,12,2\n8,pear,Juice,48,11,1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"Next we parse the data and plot it as a regular scatterplot.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = d3.csvParse(csv)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"Plot.plot({\n height: 400,\n grid: true,\n x: {\n label: \"Sugar (g)\",\n domain: [10, 15]\n },\n y: {\n label: \"Calories (kcal)\",\n domain: [40, 70]\n },\n color: {\n label: \"Fruit Type\",\n legend: true\n },\n marks: [\n Plot.dot(data, {\n x: \"sugar (g)\",\n y: \"calories (kcal)\",\n fill: \"fruit type\",\n r: 6,\n title: d => `${d[\"fruit type\"]} (${d[\"juice type\"]})`\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"fruitScale.range()[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"Plot.plot({\n height: 400,\n grid: true,\n x: {\n label: \"Sugar (g)\",\n domain: [10, 15]\n },\n y: {\n label: \"Calories (kcal)\",\n domain: [40, 70]\n },\n marks: [\n Plot.image(data,\n {\n x: \"sugar (g)\",\n y: \"calories (kcal)\",\n //src: fruitScale,\n src: d => fruitScale(d[\"fruit type\"]),\n width: 24,\n height: 24\n }\n )\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"fruitScale.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {fruitScale} from \"cd38f3504d13f6c1\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"fruitScaleEmoji = d3.scaleOrdinal()\n .domain([\"apple\", \"banana\", \"orange\"])\n .range([\"🍎\", \"🍌\", \"🍊\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"Plot.plot({\n height: 400,\n grid: true,\n x: {\n label: \"Sugar (g)\",\n domain: [10, 15]\n },\n y: {\n label: \"Calories (kcal)\",\n domain: [40, 70]\n },\n color: {\n label: \"Fruit Type\",\n legend: true\n },\n marks: [\n Plot.text(data, {\n x: \"sugar (g)\",\n y: \"calories (kcal)\",\n fill: \"fruit type\",\n r: 6,\n text: d => `${fruitScaleEmoji(d[\"fruit type\"])} (${d[\"juice type\"]})`\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"htl.html`

\n ${[...Array(9)].map((_, i) => {\n const n = i + 1;\n const img = document.createElement(\"img\");\n img.src = fruitScale(n);\n img.width = 40;\n img.height = 40;\n img.alt = `${fruitScale.domain()[n]}`;\n return img;\n })}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof fruitColors = {\n const container = html`

`;\n\n // Get list of image URLs from fruitScale.range()\n const urls = fruitScale.range();\n\n // Asynchronously compute all average colors\n (async () => {\n const colors = await Promise.all(urls.map(async url => {\n const { hex } = await averageColor(url);\n return hex;\n }));\n\n // Add a colored square for each average color\n for (const hex of colors) {\n const square = html`

`;\n container.append(square);\n }\n })();\n\n return container;\n}\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}