31:[{"id":"0d1363cd3af4e45a09af5169364d7de7f438e309e0e38342d9b8af10d4c42b7f1da9d9ea2c45b75d28b0085152a4ba49e4b1e2e03ead1427380bca6a4ec890c1","href":"https://static.observableusercontent.com/files/0d1363cd3af4e45a09af5169364d7de7f438e309e0e38342d9b8af10d4c42b7f1da9d9ea2c45b75d28b0085152a4ba49e4b1e2e03ead1427380bca6a4ec890c1","name":"eclipse_js.jpg","type":"image/jpeg","lastModified":1638397261901.674,"size":22086},{"id":"a021f508a97d9aa9d4ab3d15dae7d9f1fecd8fb1ebac2a5623358df482266e915c0e73db844f4ab66990697e6774027c5b73e64f04a668ff757d9377a8d12144","href":"https://static.observableusercontent.com/files/a021f508a97d9aa9d4ab3d15dae7d9f1fecd8fb1ebac2a5623358df482266e915c0e73db844f4ab66990697e6774027c5b73e64f04a668ff757d9377a8d12144","name":"apod.json","type":"application/json","lastModified":1638429511143.856,"size":112647},{"id":"819b19d8f413b3d3a2af7a54962581e160a5c60d69c13bd717790ea6347638c6a7a481a03ee9d4ca156d335f7182e6efc98e46e1200eb499c7a2f68aca6f4622","href":"https://static.observableusercontent.com/files/819b19d8f413b3d3a2af7a54962581e160a5c60d69c13bd717790ea6347638c6a7a481a03ee9d4ca156d335f7182e6efc98e46e1200eb499c7a2f68aca6f4622","name":"us-president-favorability.csv","type":"text/csv","lastModified":1638465961262.198,"size":8515},{"id":"29ac93cbe01c7424ebebc712498737a19e3a45e4d72ce8f6d897835d34985d8ee53aebad87f1c56e61ab52e5c0ce9356ed4ee185a5ffb5501f6e456a91ba1147","href":"https://static.observableusercontent.com/files/29ac93cbe01c7424ebebc712498737a19e3a45e4d72ce8f6d897835d34985d8ee53aebad87f1c56e61ab52e5c0ce9356ed4ee185a5ffb5501f6e456a91ba1147","name":"zap.svg","type":"image/svg+xml","lastModified":1638473179036.325,"size":282},{"id":"94c968a3f33eac63c63b87b2f0f6cd97e2db624c65646d6839a5eb4d9c1b5543e922befd040cc5d55deaaa1c7e57c0075a186aa25874490616f2652d11f08592","href":"https://static.observableusercontent.com/files/94c968a3f33eac63c63b87b2f0f6cd97e2db624c65646d6839a5eb4d9c1b5543e922befd040cc5d55deaaa1c7e57c0075a186aa25874490616f2652d11f08592","name":"x-square.svg","type":"image/svg+xml","lastModified":1638473179049.9,"size":368},{"id":"4f471124c1e90c41bc267ab3a2381bc08c49de87173dc21902fa9976922b9e690fdb09356c6e8a6096a0cbec27622f2bb8a4d62af8dbe5ace22196ae5fbe6cc6","href":"https://static.observableusercontent.com/files/4f471124c1e90c41bc267ab3a2381bc08c49de87173dc21902fa9976922b9e690fdb09356c6e8a6096a0cbec27622f2bb8a4d62af8dbe5ace22196ae5fbe6cc6","name":"2016-12-11T173502JunoPerijove3Peach1024.jpeg","type":"image/jpeg","lastModified":1638516660676.189,"size":165720},{"id":"3917899b7468c526a5bfe18f94d3cf1cfedf7a7c808976870a866d71d4a322af778ffb34fd3c06783be80ff60b10be3279d5dbc82f07a7201f4978130bc8edd6","href":"https://static.observableusercontent.com/files/3917899b7468c526a5bfe18f94d3cf1cfedf7a7c808976870a866d71d4a322af778ffb34fd3c06783be80ff60b10be3279d5dbc82f07a7201f4978130bc8edd6","name":"activity.svg","type":"image/svg+xml","lastModified":1638869559578.63,"size":282}] 2f:{"title":"Image Mark / Observable Plot","cells":[{"id":0,"value":"

Image Mark / Observable Plot

Observable Plot › Marks › Image · API

\n\n# Plot: Image\n\nThe **image** mark centers an image at the given position in *x* and *y*, similar to the [dot mark](/@observablehq/plot-dot?collection=@observablehq/plot). For example, the scatterplot below shows recent [Astronomy Picture of the Day](https://apod.nasa.gov/apod/astropix.html) entries from NASA; *x* represents the date, and *y* represents the date’s weekday.","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"// https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&count=100\napod = (await FileAttachment(\"apod.json\").json())\n .filter(d => d.media_type === \"image\") // only consider images\n .map(({date, ...d}) => ({...d, date: new Date(date)})) // coerce dates\n .sort((a, b) => d3.descending(a.date, b.date)) // chronological\n .map((d, i) => (d.index = i, d)) // add an index.","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"Plot.plot({\n marginLeft: 20,\n x: {inset: 8},\n y: {type: \"point\", grid: true, tickFormat: Plot.formatWeekday(\"en\", \"narrow\")},\n marks: [\n Plot.image(apod.slice(0, 40), {x: \"date\", y: d => d.date.getUTCDay(), src: \"url\", title: \"title\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"As another example, the scatterplot below (contributed by [Robert Lesser](/@rlesser)) shows the favorability of U.S. presidents over time. Sorry, Nixon! The default size of an image is only 16×16 pixels, but it can be increased if we want to show more detail, at the risk of also increasing occlusion. Images are drawn in input order, and hence the more recent presidents are drawn on top below.","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"favorability = FileAttachment(\"us-president-favorability.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"viewof metric = Inputs.select([\n {\n name: \"Net favorability\",\n value: (d) =>\n d[\"Very Favorable %\"] +\n d[\"Somewhat Favorable %\"] -\n d[\"Very Unfavorable %\"] -\n d[\"Somewhat Unfavorable %\"]\n },\n {\n name: \"Favorable\",\n value: (d) =>\n d[\"Very Favorable %\"] +\n d[\"Somewhat Favorable %\"]\n },\n {\n name: \"Unfavorable\",\n value: (d) =>\n d[\"Very Unfavorable %\"] +\n d[\"Somewhat Unfavorable %\"]\n },\n {\n name: \"Undecided\",\n value: (d) =>\n d[\"Don’t know %\"] +\n d[\"Have not heard of them %\"]\n },\n], {\n format: d => d.name,\n label: \"Favorability metric\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"Plot.plot({\n inset: 30,\n width: 960,\n height: 600,\n x: {\n label: \"Date of first inauguration →\"\n },\n y: {\n grid: true,\n label: `↑ ${metric.name} (%)`,\n percent: true,\n tickFormat: \"+f\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.image(\n favorability,\n {\n x: \"First Inauguration Date\",\n y: d => metric.value(d) / 100,\n width: 60,\n src: \"Portrait URL\",\n title: d => `${d.Name}\\n${d[\"First Inauguration Date\"].getUTCFullYear()}`\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1147,"value":"Images can also be used in scatterplot to produce categorical symbols:","pinned":false,"hidden":false,"mode":"md"},{"id":860,"value":"data = [\n [0.241, \"x\"],\n [0.367, \"x\"],\n [0.036, \"x\"],\n [0.112, \"o\"],\n [0.382, \"x\"],\n [0.594, \"x\"],\n [0.516, \"o\"],\n [0.634, \"o\"],\n [0.612, \"x\"],\n [0.271, \"x\"],\n [0.241, \"x\"],\n [0.955, \"x\"],\n [0.336, \"x\"],\n [0.307, \"o\"],\n [0.747, \"x\"]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"Plot.plot({\n grid: true,\n x: {inset: 8, axis: null},\n y: {domain: [0, 1]},\n marks: [\n Plot.ruleY([0, 1]),\n Plot.image(data, {\n x: (d, i) => i,\n y: ([value]) => value,\n src: ([, type]) => icons[type]\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"// https://feathericons.com/\nicons = ({\n o: await FileAttachment(\"activity.svg\").url(),\n x: await FileAttachment(\"x-square.svg\").url()\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1259,"value":"A convenient alternative, if the symbols are available as a text font, is to use a [text mark](/@observablehq/plot-text?collection=@observablehq/plot), for example with emoji like in the chart below. In the future, we plan on adding a [proportional symbol mark](https://github.com/observablehq/plot/issues/41) to Plot with symbols designed to maximize differentiability.","pinned":false,"hidden":false,"mode":"md"},{"id":1273,"value":"Plot.plot({\n inset: 8,\n grid: true,\n x: {axis: null},\n height: 280,\n marks: [\n Plot.ruleY([0, 1]),\n Plot.text(data, {\n x: (d, i) => i,\n y: ([y]) => y,\n text: ([, type]) => type === \"x\" ? \"❎\" : \"💎\",\n fontSize: 17\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"Back to images, if we want to scale them, we have to compute their *width* (or *height*) explicitly: there is no *r* channel like for dot marks, and no associated scale. Remember to compute the *width* or *height* with a square root to make the symbol’s *area* proportional to the quantity it describes.","pinned":false,"hidden":false,"mode":"md"},{"id":1195,"value":"Plot.plot({\n grid: true,\n x: {axis: null, inset: 16},\n y: {domain: [0, 1]},\n marks: [\n Plot.ruleY([0, 1]),\n Plot.image(data, {\n x: (d, i) => i,\n y: ([value]) => value,\n width: ([value]) => Math.sqrt(value) * 30,\n src: ([, type]) => icons[type]\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1047,"value":" Images can be of any format supported by your browser—note that the spec, however, covers only JPEG, PNG and SVG (the behavior for animated GIFs is left to the browser).","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"Images are referenced by the *src* channel, a string matching one of the following protocols: **https**, **http**, **blob**, **file**, or **data**.","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"Set the image size with the *width* and *height* options, either as a constant number or a channel. (If only one is specified, *width* defaults to *height* and *vice versa*.)","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"Plot.image(apod.slice(0, 10), {x: \"index\", src: \"url\", height: 120}).plot({height: 160})","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"Control how the image fills the space with the [*preserveAspectRatio*](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) option. A few typical options appear in the following menu below.","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"viewof preserveAspectRatio = Inputs.select(\n [\n \"none\",\n \"xMidYMin meet\",\n \"xMidYMid meet\",\n \"xMidYMax meet\",\n \"xMidYMin slice\",\n \"xMidYMid slice\",\n \"xMidYMax slice\"\n ],\n {\n label: \"preserveAspectRatio\",\n value: \"xMidYMid meet\" // default\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"Plot.plot({\n marginLeft: 0,\n marginRight: 0,\n x: {type: \"point\"},\n height: 160,\n marks: [\n Plot.image(apod.slice(0, 10), {\n x: \"index\",\n src: \"url\",\n width: 64,\n height: 100,\n preserveAspectRatio\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"As we mentioned above, the *src* channel can be specified with several different protocols. These introduce tiny nuances in the way the image is loaded into the plot, and the browser’s security model might preclude some operations, such as downloading a png copy of the chart. We’ll explore these in details in the following section.","pinned":false,"hidden":false,"mode":"md"},{"id":462,"value":"The **http** protocol is never considered secure (with the possible exception of a server set on localhost). Your browser will probably accept to load the image and display it on the plot, but it will not allow any operation such as the rasterization needed to “download as PNG”.","pinned":false,"hidden":false,"mode":"md"},{"id":471,"value":"The **https** protocol is considered secure if the images are hosted on the same server, for example the url of an observable file attachment:","pinned":false,"hidden":false,"mode":"md"},{"id":479,"value":"// https://science.nasa.gov/southern-jupiter-perijove-3\njunoAttachedUrl = FileAttachment(\"2016-12-11T173502JunoPerijove3Peach1024.jpeg\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"Plot.image([{ url: junoAttachedUrl }], { x: 0, src: \"url\", width: 300 }).plot({\n width: 300,\n x: { axis: null },\n height: 250\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"However, when an image is hosted on a server with a different domain name (‘cross-origin’), it is considered secure only if it was explicitly called with a crossOrigin: anonymous header and the server allows it. If it doesn’t, you can use a proxy. To see the difference, use the “Download PNG” option on the gallery below, which uses a CORS proxy, and on the gallery above, which takes its images directly from the APOD website.","pinned":false,"hidden":false,"mode":"md"},{"id":505,"value":"Plot.image(apod.slice(10, 10 + width / 182), {\n x: (d,i) => i,\n src: d => `https://corsproxy.io/?${encodeURIComponent(d.url)}`,\n width: 182,\n height: 300,\n preserveAspectRatio: \"xMidYMid slice\",\n //crossOrigin: \"anonymous\" // this option is not supported by any browser\n}).plot({\n width,\n x: { axis: null, type:\"point\" },\n height: 320,\n marginLeft: 0,\n marginRight: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"The **data** protocol allows to use images that are defined as a full URL. This can be handy for SVG images.","pinned":false,"hidden":false,"mode":"md"},{"id":763,"value":"xSquareIconDataUrl = `data:image/svg+xml;utf8,${await FileAttachment(\"x-square.svg\").text()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1264,"value":"activityIconDataUrl = `data:image/svg+xml;utf8,${await FileAttachment(\"activity.svg\").text()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"Plot.plot({\n marks: [\n Plot.frame(),\n Plot.image(data, {\n src: d => d[1] === \"o\" ? activityIconDataUrl : xSquareIconDataUrl,\n x: (d, i) => i,\n y: null\n })\n ],\n x: {type: \"point\"}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"The **blob** protocol allows to use images that have been stored in memory, like the eclipseBlob below:","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"eclipseBlob = FileAttachment(\"eclipse_js.jpg\").blob().then(URL.createObjectURL)","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"Plot.image([eclipseBlob], { x: 0, src: (d) => d, width: 300 }).plot({\n width: 300,\n x: { axis: null },\n height: 250\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"Finally, the **file** protocol will load images directly from your hard-drive—this works only in a context where Plot is launched from an HTML file that is also loaded directly.","pinned":false,"hidden":false,"mode":"md"},{"id":1239,"value":"Note that Plot.image will pass the *crossOrigin* option to the generated svg image elements; however browser support for this attribute is, at the time of this writing, [inexistent](https://caniuse.com/?search=svg%20crossorigin). (For more details on this topic, see “[Plot.image and crossOrigin](https://observablehq.com/@observablehq/plot-image-and-crossorigin).”)","pinned":false,"hidden":false,"mode":"md"},{"id":896,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}