30: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; } 31:[] 2e:{"title":"Named Colors","cells":[{"id":0,"value":"md`# Named Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"mutable colorName = \"hover to fill cell\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"svgNode = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":6,"value":"data = load('https://gist.githubusercontent.com/leoyuholo/a7321949b38ace92ba619efbac4240dd/raw/d6d116f511b6f9f68ed34fea52b749f9c3cb51ed/color_names.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":135,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":155,"value":"sortedColors = sortColors(rgbArr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"hexed = sortedColors.map(rgbToHex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"orderedData = data.sort((a,b)=>a.hex>b.hex?1:-1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {load} from \"@bumbeishvili/fetcher\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"JSON.stringify(sortedColors)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}