2e:null 2f:["$","title",null,{"children":"Named Colors | David B. | Observable"}] 34:T62a, function sortColors(colors) { // Calculate distance between each color var distances = []; for (var i = 0; i < colors.length; i++) { distances[i] = []; for (var j = 0; j < i; j++) distances.push([colors[i], colors[j], colorDistance(colors[i], colors[j])]); } distances.sort(function(a, b) { return a[2] - b[2]; }); // Put each color into separate cluster initially var colorToCluster = {}; for (var i = 0; i < colors.length; i++) colorToCluster[colors[i]] = [colors[i]]; // Merge clusters, starting with lowest distances var lastCluster; for (var i = 0; i < distances.length; i++) { var color1 = distances[i][0]; var color2 = distances[i][1]; var cluster1 = colorToCluster[color1]; var cluster2 = colorToCluster[color2]; if (!cluster1 || !cluster2 || cluster1 == cluster2) continue; // Make sure color1 is at the end of its cluster and // color2 at the beginning. if (color1 != cluster1[cluster1.length - 1]) cluster1.reverse(); if (color2 != cluster2[0]) cluster2.reverse(); // Merge cluster2 into cluster1 cluster1.push.apply(cluster1, cluster2); delete colorToCluster[color1]; delete colorToCluster[color2]; colorToCluster[cluster1[0]] = cluster1; colorToCluster[cluster1[cluster1.length - 1]] = cluster1; lastCluster = cluster1; } // By now all colors should be in one cluster return lastCluster; } 35:[] 32:{"id":"3c018852f045dea4","slug":"named-colors","title":"Named Colors","thumbnail":"d707bdf194de1e8da963e2368a923e5b92d3458a2468b6b50b2e97e4100fd7e8","access_level":"public","create_time":"$D2018-09-25T09:10:56.370Z","update_time":"$D2019-04-15T03:32:15.410Z","view_time":null,"first_public_time":"$D2018-09-25T09:55:19.588Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024"},"version":162,"publish_version":162,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null}],"members":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"beac97df7de1954a","slug":"work-components","title":"Work Utils","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"title":"Named Colors","cells":[{"id":0,"value":"md`# Named Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"mutable colorName = \"hover to fill cell\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"svgNode = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"d3.select(svgNode).selectAll('rect').on('mouseenter',function(){\n \n const color = d3.select(this).attr('data-color');\n\n mutable colorName = JSON.stringify(dataObj[color],null,' ')\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = load('https://gist.githubusercontent.com/leoyuholo/a7321949b38ace92ba619efbac4240dd/raw/d6d116f511b6f9f68ed34fea52b749f9c3cb51ed/color_names.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"dataObj = {\n const result = {};\n data.forEach(d=>{\n result['#'+d.hex] = d;\n })\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":" function rgbToHex(rgb) {\n return \"#\" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":" function colorDistance(color1, color2) {\n // This is actually the square of the distance but\n // this doesn't matter for sorting.\n var result = 0;\n for (var i = 0; i < color1.length; i++)\n result += (color1[i] - color2[i]) * (color1[i] - color2[i]);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"rgbArr = {\n var rgbArr = orderedData.map(d=>'#'+d.hex).map(hex=>{\n hex = hex.substring(1, hex.length);\n var r = parseInt((hex).substring(0, 2), 16);\n var g = parseInt((hex).substring(2, 4), 16);\n var b = parseInt((hex).substring(4, 6), 16);\n \n return [r, g, b];\n \n });\n \n \n return rgbArr\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"sortedColors = sortColors(rgbArr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"hexed = sortedColors.map(rgbToHex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"orderedData = data.sort((a,b)=>a.hex>b.hex?1:-1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {load} from \"@bumbeishvili/fetcher\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"JSON.stringify(sortedColors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"