2e:null 2f:["$","title",null,{"children":"Recreating (and Customizing) Spots by Damien Hirst with D3 | Marius Hogräfer | Observable"}] 34:[{"id":"17e623c7f51913b652b3d93d42bcd7b692f864a5e67da6e99556ce99cbdaadf23cbe9c9904fb9b80821c4c4ac8d92c503d82aeb87fcb6aa88cdfa8493c5c7136","href":"https://static.observableusercontent.com/files/17e623c7f51913b652b3d93d42bcd7b692f864a5e67da6e99556ce99cbdaadf23cbe9c9904fb9b80821c4c4ac8d92c503d82aeb87fcb6aa88cdfa8493c5c7136","name":"download.png","type":"image/png","lastModified":1639399634907.38,"size":14095}] 32:{"id":"65f574a88c49c0dc","slug":"recreating-and-customizing-spots-by-damien-hirst-with-d3","title":"Recreating (and Customizing) Spots by Damien Hirst with D3","thumbnail":"0d054944278caea1e2b56ff44408b082f2136b10bd354720e0fef7b4c47ced75","access_level":"public","create_time":"$D2021-12-12T15:57:23.564Z","update_time":"$D2021-12-13T17:06:49.997Z","view_time":null,"first_public_time":"$D2021-12-13T13:15:30.390Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":"starter_2024"},"version":303,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null}],"members":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a775c8abcb3c9601","slug":"interesting-datasets","title":"Having fun with data","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"type":"notebook","body":{"title":"Recreating (and Customizing) Spots by Damien Hirst with D3","cells":[{"id":0,"value":"# Recreating (and Customizing) _Spots_ by Damien Hirst with D3\n\nThis notebook recreates the series of minimalistic oil paintings [_Spots_](https://damienhirst.com/texts1/series/spots) by English artist [Damien Hirst](https://en.wikipedia.org/wiki/Damien_Hirst) in Observable, allowing you to make your own.\n\nThe paintings consist of equal-sized dots aligned in a regular pattern of columns and rows, and each dot has a color from a pallet containing around 20 colors.\nThis regular way of creating art makes it ideal for \"recreating\" it computationally.\n\nBelow 👇, you can adjust the variables that drive the rendering of your very own D3 variant of _Spots_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"html`

\n If you like what you see, you can download your artwork and print it out, which btw is much cheaper than buying any of the real artworks 😜. \n Open the cell menu in the left margin to download any SVG cell as either SVG or PNG.\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof columns = Inputs.range([0, 40], {label: \"columns\", step: 1, value: 23});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof rows = Inputs.range([0, 20], {label: \"rows\", step: 1, value: 10});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof radius = Inputs.range([1, 20], {label: \"radius\", value: 13, step: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof height = Inputs.range([500, 1000], {label: \"height\", value: 625, step: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"viewof margin = Inputs.range([radius, width/2], {label: \"margin\", value: 4*radius, step: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"viewof pallet = Inputs.select(pallets, {value: \"spots\", label: \"Color Scheme\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"chart = { \n const canvas = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#f6f6f6\")\n .style(\"border\", \"1px solid #ccc\");\n \n const spots = canvas.append(\"g\")\n .attr(\"class\", \"spots\")\n .attr(\"transform\", `translate(${width/columns}, ${height/rows})`);\n\n // draw the spots\n spots.selectAll(\"circle.spot\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"class\", \"spot\")\n .attr(\"r\", radius)\n .attr(\"fill\", d => color(d[2]))\n .attr(\"cx\", d => margin + d[0] * spotsWidth / (columns+1))\n .attr(\"cy\", d => margin + d[1] * spotsHeight / (rows+1));\n\n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"# Appendix\nSome internal variables used to draw the visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"data = d3.range(columns)\n .map(col => d3.range(rows)\n .map(row => [col, row, Math.floor(Math.random() * selectedPallet.length)]))\n .flat();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"color = d3.scaleOrdinal(selectedPallet);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"spotsWidth = width - 2*margin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"spotsHeight = height - 2*margin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"spotScheme = [\n \"#f27f86i\", \"#ab191a\", \"#84231a\", \n \"#add6f2\", \"#5aade1\", \"#113f7b\", \n \"#113f7b\", \"#ffe03a\", \"#fdba69\", \n \"#95caba\", \"#76beaa\", \"#06725b\", \n \"#e7c3c7\", \"#a1a4c5\", \"#9588bd\"\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"pallets = [\n \"spots\",\n \"schemeCategory10\",\n \"schemeAccent\",\n \"schemeDark2\",\n \"schemePaired\",\n \"schemePastel1\",\n \"schemePastel2\",\n \"schemeSet1\",\n \"schemeSet2\",\n \"schemeSet3\"\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"palletDict = {\n return {\n spots: spotScheme,\n schemeCategory10: d3.schemeCategory10,\n schemeAccent: d3.schemeAccent,\n schemeDark2: d3.schemeDark2,\n schemePaired: d3.schemePaired,\n schemePastel1: d3.schemePastel1,\n schemePastel2: d3.schemePastel2,\n schemeSet1: d3.schemeSet1,\n schemeSet2: d3.schemeSet2,\n schemeSet3: d3.schemeSet3\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"selectedPallet = palletDict[pallet]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"