2d:null 2e:["$","title",null,{"children":"ImageColours | wolfiex | Observable"}] 33:T620,smoothC = { var num = copycols var data = d3.range(num).map(i=>{ i=i/num; var s = d3.hsl(scaleC(i)) return [s.h,s.s,s.l] }) let model = new tsne({ dim: 1, perplexity: 50.0, earlyExaggeration: 5.0, learningRate: 150.0, nIter: 1000, metric: 'euclidean' }); model.init({ data: data, type: 'dense' }); // `error`, `iter`: final error and iteration number // note: computation-heavy action happens here let [errr, iter] = model.run(); // rerun without re-calculating pairwise distances, etc. //let [err, iteRr] = model.rerun(); // `output` is unpacked ndarray (regular nested javascript array) //let output = model.getOutput(); // `outputScaled` is `output` scaled to a range of [-1, 1] let outputScaled = model.getOutputScaled(); var sorting = data.sort(function(a,b) { return outputScaled[data.indexOf(a)] - outputScaled[data.indexOf(b)] }) var sortTSNE = d3.scaleLinear().domain(d3.range(sorting.length).map(d=>d/sorting.length)) .interpolate(d3.interpolateHcl) .range(sorting.map(e=>{ return 'hsl('+ e[0] +','+e[1]*100+'%,'+e[2]*100+'%)'} )); var cols = d3.range(1,copycols).map(i=>{ i=i/copycols; return sortTSNE(i) }) console.log(cols) var colstr = '[
'; cols.forEach(c=>{ colstr+= `

"${c}",

` }) colstr +=']' document.getElementById('copy').innerHTML = colstr //(''+JSON.stringify(cols)).replace(/","/g,'",

"') return sortTSNE //return {data,output,sorting} }34:[] 31:{"id":"0d286f7de670fc2a","slug":"imagecolours","title":"ImageColours ","thumbnail":"a0c56648119558014ac6c3e22b0e8ea567eec66e071cfadf938f5b394e889b7f","access_level":"public","create_time":"$D2018-12-27T15:57:18.872Z","update_time":"$D2019-06-27T22:22:32.197Z","view_time":null,"first_public_time":"$D2018-12-27T17:51:50.642Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"5ac3a182adb31463","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":"starter_2024"},"version":823,"publish_version":823,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null}],"members":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"ImageColours ","cells":[{"id":0,"value":"md`# ImageColours \n#### [@DanEllisScience](https://twitter.com/DanEllisScience)\n\n#########\n\n*Note: this may not work on safari - use chrome or opera*\n\nNature often serves as a muse when it comes to data-vis. It is not surprising that its symetric shapes and vibrant colours are often used to produce relatable and aesthetically pleasing methapors within our work. It is for this reason that it makes sense to draw much of our colour pallete choices from photographs we may have taken outdoors. \n\nHere we take a photograph and pixel-wise dissasemble it into its constituent colours, eventually producing a simple colour pallete we may use elsewhere. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof image = html`` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"canvas = {\n const context = DOM.context2d(imageData.width/2,imageData.height/2)//imageData.width, imageData.height);\n context.putImageData(imageData, 0, 0);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"size = [400,300]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"md` The first step comes with retreaving the rgb colour codes for all pixels in the photo. To reduce the number of pixels read, the photo is down scaled based on the 'size' parameter, and duplicate colours are removed. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"canvas2 = {\n const ctx = DOM.context2d(window.innerWidth*.9,size[1]/4)//imageData.width, imageData.height);\n var scale = window.innerWidth*.9/sortC.length\n //ctx.filter = `blur(2px)`;\n sortC.forEach((c,i)=>{\n i=i*scale\nctx.beginPath();\nctx.moveTo(i, 0);\nctx.lineTo(i, size[1]);\nctx.stroke();\n //console.log('hsl('+ c[0] +','+c[1]+'%,'+c[2]+'%)',i)\nctx.strokeStyle = 'hsl('+ 360*c[0]/resolution +','+c[1]/(resolution/100)+'%,'+c[2]/(resolution/100)+'%)';\n })\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"md`The rgb colours are then converted to hsl (hue, saturation, luminesence) since this is not only a better representation, but allows for easier sorting. All entries are then ordered by luminesence, saturation and hue respectively as well as their overall distance from eachother. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"\ntex.block`\n\\large\nd(x) = \\sqrt{h^2+s^2+l^2}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"canvas3 = {\n const ctx = DOM.context2d(window.innerWidth*.9,size[1]/4)//imageData.width, imageData.height);\n var scale = window.innerWidth*.9\n var num = 100.\n //ctx.filter = `blur(2px)`;\n d3.range(0,num).forEach(i=>{\ni=i/num;\nctx.beginPath();\nctx.moveTo(i*scale, 0);\nctx.lineTo(i*scale, size[1]);\nctx.stroke();\n ctx.lineWidth= scale/(num*1.1);\n //console.log('hsl('+ c[0] +','+c[1]+'%,'+c[2]+'%)',i)\nctx.strokeStyle = scaleC(i+1/num)\n//ctx.endPath();\n })\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"md `Finally a the list of numbers is turned into an iterator and fed through a t-Distributed Stochastic Neighbor Embedding (t-SNE) algorithm. This uses a force-directed graph style dimentionality reduction to obtain a one dimentional representation of our data in space. This 1D array now used to sort our remaining colours, and colours and produce the colour-bar below. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"canvas4 = {\n const ctx = DOM.context2d(window.innerWidth*.9,size[1]/4)//imageData.width, imageData.height);\n var scale = window.innerWidth*.9\n var num = copycols*10\n //ctx.filter = `blur(2px)`;\n d3.range(0,num).forEach(i=>{\ni=i/num;\nctx.beginPath();\nctx.moveTo(i*scale, 0);\nctx.lineTo(i*scale, size[1]);\nctx.stroke();\n ctx.lineWidth= scale/(num*1.1);\n //console.log('hsl('+ c[0] +','+c[1]+'%,'+c[2]+'%)',i)\nctx.strokeStyle = smoothC(i+1/num);\n //console.log(scaleC(i),i)\n//ctx.endPath();\n })\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"md` The rgb strings required to reproduce this within an interpolator are given below. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"md` Selecting the 10 colours we needed to generate the colourbar we have: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"canvas5 = {\n const ctx = DOM.context2d(window.innerWidth*.9,size[1]/4)//imageData.width, imageData.height);\n var scale = window.innerWidth*.9\n var num = copycols*1\n //ctx.filter = `blur(2px)`;\n d3.range(0,num).forEach(i=>{\ni=i/num;\nctx.beginPath();\nctx.moveTo(i*scale, 0);\nctx.lineTo(i*scale, size[1]);\nctx.stroke();\n ctx.lineWidth= scale/(num*1.1);\n //console.log('hsl('+ c[0] +','+c[1]+'%,'+c[2]+'%)',i)\nctx.strokeStyle = smoothC(i+1/num);\n //console.log(scaleC(i),i)\n//ctx.endPath();\n })\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"copycols = 11","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"md` If you then wish to use this with javascript this can easily be done using d3 and the following code - the above example interpolates an array of 10*copycols using the colours above. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"`\n//colourlist =['rgb(... <-- this is your colour list from above\n\nd3.scaleLinear()\n .domain(d3.range(colourlist.length).map(d=>d/colourlist.length))\n .interpolate(d3.interpolateHcl)\n .range(colourlist);\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"resolution = 10000 // int/resolution gives the floating point presicion. ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`# Functions\nIgnore anything below this...\n\n(and yes I know it is badly written code)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"scaleC = {return d3.scaleLinear().domain(d3.range(sortC.length).map(d=>d/sortC.length))\n .interpolate(d3.interpolateHcl)\n .range(sortC.map(c=>{\n //console.log('hsl('+ 360*c[0]/100000 +','+c[1]/1000+'%,'+c[2]/1000+'%)');\n \n return 'hsl('+ 360*c[0]/resolution +','+c[1]/(resolution/100)+'%,'+c[2]/(resolution/100)+'%)'}\n \n ));\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"sortC= sortColours(await sortColours(await sortColours(await sortColours(hslImageData,1),0),2,true),0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"hslImageData = { \n var data = imageData.data;\n var hsl = []\n for (var i = 0; i < data.length; i += 4) {///rgba\n hsl.push(await rgbToHsl(data[i],data[i+1],data[i+2]))\n }\n console.log(hsl.length);\n \n //return (unique.checked)?[...new Map(hsl.map( o => [JSON.stringify(o), o])).values()] :hsl;\n //return hsl;\n return [...new Map(hsl.map( o => [JSON.stringify(o), o])).values()];\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"async function sortColours(colours,column,dist=false) {\n return colours.sort(function(a,b) {\n \n \n \n if (!dist){\n return a[column] - b[column];\n }else{\n return Math.sqrt((a[0]/360)**2+(a[1]/resolution)**2+(a[2]/resolution)**2) - Math.sqrt((b[0]/360)**2+(b[1]/resolution)**2+(b[2]/resolution)**2) \n }\n});\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"async function rgbToHsl(r, g, b) {\n r /= 255, g /= 255, b /= 255;\n\n var max = Math.max(r, g, b), min = Math.min(r, g, b);\n var h, s, l = (max + min) / 2;\n\n if (max == min) {\n h = s = 0; // achromatic\n } else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n\n h /= 6;\n }\n\n return [ parseInt(resolution*h), parseInt(resolution*s), parseInt(resolution*l) ];\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"imageData = {\n \n if(document.getElementById(\"upload\").getAttribute('type')!='button' ){ \n \n return getImageData(image)\n }\n else{\n\n var ret = getImageData(\"https://image.shutterstock.com/image-photo/photography-view-camera-photographer-lens-450w-512096656.jpg\");\n \n document.getElementById(\"upload\").setAttribute(\"type\",\"file\");\n \n\n \n return ret\n \n \n }\n \n \n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"getImageData = async function(src) {\n // if src is a string (URL), fetch resource as a blob, else it should be a file (and thus already a blob)\n if (typeof src == 'string') {\n \n src = await (await fetch(src)).blob();\n \n }\n \n\n \n const bitmap = await window.createImageBitmap(src);\n const [width, height] = [bitmap.width, bitmap.height];\n\n // an intermediate \"buffer\" 2D context is necessary\n const ctx = DOM.context2d(size[0], size[1]);\n ctx.drawImage(bitmap, 0, 0,width,height,0,0,size[0]*.5, size[1]*.5);\n \n\n return ctx.getImageData(0, 0, size[0], size[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"d3 = require(\"d3@5\",\"d3-interpolate\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"tsne = require('https://bundle.run/tsne-js@1.0.3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"