31:[{"id":"17e623c7f51913b652b3d93d42bcd7b692f864a5e67da6e99556ce99cbdaadf23cbe9c9904fb9b80821c4c4ac8d92c503d82aeb87fcb6aa88cdfa8493c5c7136","href":"https://static.observableusercontent.com/files/17e623c7f51913b652b3d93d42bcd7b692f864a5e67da6e99556ce99cbdaadf23cbe9c9904fb9b80821c4c4ac8d92c503d82aeb87fcb6aa88cdfa8493c5c7136","name":"download.png","type":"image/png","lastModified":1639399634907.38,"size":14095}] 2f:{"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"},{"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"},{"id":105,"value":"viewof columns = Inputs.range([0, 40], {label: \"columns\", step: 1, value: 23});","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof rows = Inputs.range([0, 20], {label: \"rows\", step: 1, value: 10});","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof radius = Inputs.range([1, 20], {label: \"radius\", value: 13, step: 1});","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof height = Inputs.range([500, 1000], {label: \"height\", value: 625, step: 1});","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof margin = Inputs.range([radius, width/2], {label: \"margin\", value: 4*radius, step: 1});","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof pallet = Inputs.select(pallets, {value: \"spots\", label: \"Color Scheme\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":265,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":261,"value":"# Appendix\nSome internal variables used to draw the visualization.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":117,"value":"color = d3.scaleOrdinal(selectedPallet);","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"spotsWidth = width - 2*margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"spotsHeight = height - 2*margin","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":165,"value":"selectedPallet = palletDict[pallet]","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}