2f:T108c,function sort_colors_by_lab_distance(hexColors, useMin = true){ function hexToLab(hexColor) { return chroma(hexColor).lab(); } function labDistance(color1, color2) { let L1 = color1[0], a1 = color1[1], b1 = color1[2]; let L2 = color2[0], a2 = color2[1], b2 = color2[2]; return Math.sqrt(Math.pow(L2 - L1, 2) + Math.pow(a2 - a1, 2) + Math.pow(b2 - b1, 2)); } function calculateTotalDistance(sequence, distanceDictionary) { let totalDistance = 0; for (let i = 0; i < sequence.length - 1; i++) { totalDistance += distanceDictionary[sequence[i]][sequence[i + 1]]; } return totalDistance; } function getPairLabDistances(labColors, dict) { // get all pairwise distances for (let i = 0; i < labColors.length; i++) { for (let j = i + 1; j < labColors.length; j++) { let distance = labDistance(labColors[i], labColors[j]) // Initialize nested dictionary if not already present if (!dict[i]) { dict[i] = {}; } // Add distance to the nested dictionary dict[i][j] = distance; // initialize and add for the reverse as well to make lookups easier if (!dict[j]) { dict[j] = {}; } dict[j][i] = distance; } } } function* generatePermutations(list, n = list.length) { if (n <= 1) yield list.slice(); else { for (let i = 0; i < n; i++) { yield* generatePermutations(list, n - 1); // wow recursion! const j = n % 2 ? 0 : i; [list[n-1], list[j]] = [list[j], list[n-1]]; // ES6 destructuring swap } } } // get Lab colors let labColors = hexColors.map(hexToLab); // take the original order as base and pre-calculate the distances. the ordering will always follow this inital sorting from 0 to n let distDict = {} getPairLabDistances(labColors, distDict); // prepare variables const n = Object.keys(distDict).length; const indices = Array.from({ length: n }, (_, index) => index); let minOptSeq = []; let maxOptSeq = []; let minOptDist = Infinity; let maxOptDist = -Infinity; // don't store permutations just get them on the fly /* for (let permutation of generatePermutations(indices)) { const totalDistance = calculateTotalDistance(permutation, distDict); if (totalDistance < minOptDist) { minOptDist = totalDistance; minOptSeq = [permutation]; } else if (totalDistance === minOptDist) { minOptSeq.push(permutation) } if (totalDistance > maxOptDist) { maxOptDist = totalDistance; maxOptSeq = permutation; } else if (totalDistance === maxOptDist) { maxOptSeq.push(permutation) } } */ // Damn that takes long! function findGreedySequence(distanceDictionary, findMax = false) { const n = Object.keys(distanceDictionary).length; let currentColorIndex = 0; // Arbitrary starting point let visited = new Set([currentColorIndex]); let sequence = [currentColorIndex]; while (visited.size < n) { let nextColorIndex = null; let bestDistance = findMax ? -Infinity : Infinity; for (let i = 0; i < n; i++) { if (!visited.has(i)) { let distance = distanceDictionary[currentColorIndex][i]; // Decide whether to minimize or maximize the distance if (findMax ? distance > bestDistance : distance < bestDistance) { bestDistance = distance; nextColorIndex = i; } } } currentColorIndex = nextColorIndex; visited.add(nextColorIndex); sequence.push(nextColorIndex); } return sequence; } // Usage: let greedyMinSequence = findGreedySequence(distDict, false); console.log("Greedy Min Sequence:", greedyMinSequence); let greedyMaxSequence = findGreedySequence(distDict, true); console.log("Greedy Max Sequence:", greedyMaxSequence); let sortedColors = null; if (useMin){ sortedColors = greedyMinSequence.map(index => hexColors[index]); } else { sortedColors = greedyMaxSequence.map(index => hexColors[index]); } return sortedColors; }30:T2765,function make_sample_treemap(colorscheme){ let data = {"name":"flare","children":[{"name":"analytics","children":[{"name":"cluster","children":[{"name":"AgglomerativeCluster","value":3938},{"name":"CommunityStructure","value":3812},{"name":"HierarchicalCluster","value":6714},{"name":"MergeEdge","value":743}]},{"name":"graph","children":[{"name":"BetweennessCentrality","value":3534},{"name":"LinkDistance","value":5731},{"name":"MaxFlowMinCut","value":7840},{"name":"ShortestPaths","value":5914},{"name":"SpanningTree","value":3416}]},{"name":"optimization","children":[{"name":"AspectRatioBanker","value":7074}]}]},{"name":"animate","children":[{"name":"Easing","value":17010},{"name":"FunctionSequence","value":5842},{"name":"interpolate","children":[{"name":"ArrayInterpolator","value":1983},{"name":"ColorInterpolator","value":2047},{"name":"DateInterpolator","value":1375},{"name":"Interpolator","value":8746},{"name":"MatrixInterpolator","value":2202},{"name":"NumberInterpolator","value":1382},{"name":"ObjectInterpolator","value":1629},{"name":"PointInterpolator","value":1675},{"name":"RectangleInterpolator","value":2042}]},{"name":"ISchedulable","value":1041},{"name":"Parallel","value":5176},{"name":"Pause","value":449},{"name":"Scheduler","value":5593},{"name":"Sequence","value":5534},{"name":"Transition","value":9201},{"name":"Transitioner","value":19975},{"name":"TransitionEvent","value":1116},{"name":"Tween","value":6006}]},{"name":"data","children":[{"name":"converters","children":[{"name":"Converters","value":721},{"name":"DelimitedTextConverter","value":4294},{"name":"GraphMLConverter","value":9800},{"name":"IDataConverter","value":1314},{"name":"JSONConverter","value":2220}]},{"name":"DataField","value":1759},{"name":"DataSchema","value":2165},{"name":"DataSet","value":586},{"name":"DataSource","value":3331},{"name":"DataTable","value":772},{"name":"DataUtil","value":3322}]},{"name":"display","children":[{"name":"DirtySprite","value":8833},{"name":"LineSprite","value":1732},{"name":"RectSprite","value":3623},{"name":"TextSprite","value":10066}]},{"name":"flex","children":[{"name":"FlareVis","value":4116}]},{"name":"physics","children":[{"name":"DragForce","value":1082},{"name":"GravityForce","value":1336},{"name":"IForce","value":319},{"name":"NBodyForce","value":10498},{"name":"Particle","value":2822},{"name":"Simulation","value":9983},{"name":"Spring","value":2213},{"name":"SpringForce","value":1681}]},{"name":"query","children":[{"name":"AggregateExpression","value":1616},{"name":"And","value":1027},{"name":"Arithmetic","value":3891},{"name":"Average","value":891},{"name":"BinaryExpression","value":2893},{"name":"Comparison","value":5103},{"name":"CompositeExpression","value":3677},{"name":"Count","value":781},{"name":"DateUtil","value":4141},{"name":"Distinct","value":933},{"name":"Expression","value":5130},{"name":"ExpressionIterator","value":3617},{"name":"Fn","value":3240},{"name":"If","value":2732},{"name":"IsA","value":2039},{"name":"Literal","value":1214},{"name":"Match","value":3748},{"name":"Maximum","value":843},{"name":"methods","children":[{"name":"add","value":593},{"name":"and","value":330},{"name":"average","value":287},{"name":"count","value":277},{"name":"distinct","value":292},{"name":"div","value":595},{"name":"eq","value":594},{"name":"fn","value":460},{"name":"gt","value":603},{"name":"gte","value":625},{"name":"iff","value":748},{"name":"isa","value":461},{"name":"lt","value":597},{"name":"lte","value":619},{"name":"max","value":283},{"name":"min","value":283},{"name":"mod","value":591},{"name":"mul","value":603},{"name":"neq","value":599},{"name":"not","value":386},{"name":"or","value":323},{"name":"orderby","value":307},{"name":"range","value":772},{"name":"select","value":296},{"name":"stddev","value":363},{"name":"sub","value":600},{"name":"sum","value":280},{"name":"update","value":307},{"name":"variance","value":335},{"name":"where","value":299},{"name":"xor","value":354},{"name":"_","value":264}]},{"name":"Minimum","value":843},{"name":"Not","value":1554},{"name":"Or","value":970},{"name":"Query","value":13896},{"name":"Range","value":1594},{"name":"StringUtil","value":4130},{"name":"Sum","value":791},{"name":"Variable","value":1124},{"name":"Variance","value":1876},{"name":"Xor","value":1101}]},{"name":"scale","children":[{"name":"IScaleMap","value":2105},{"name":"LinearScale","value":1316},{"name":"LogScale","value":3151},{"name":"OrdinalScale","value":3770},{"name":"QuantileScale","value":2435},{"name":"QuantitativeScale","value":4839},{"name":"RootScale","value":1756},{"name":"Scale","value":4268},{"name":"ScaleType","value":1821},{"name":"TimeScale","value":5833}]},{"name":"util","children":[{"name":"Arrays","value":8258},{"name":"Colors","value":10001},{"name":"Dates","value":8217},{"name":"Displays","value":12555},{"name":"Filter","value":2324},{"name":"Geometry","value":10993},{"name":"heap","children":[{"name":"FibonacciHeap","value":9354},{"name":"HeapNode","value":1233}]},{"name":"IEvaluable","value":335},{"name":"IPredicate","value":383},{"name":"IValueProxy","value":874},{"name":"math","children":[{"name":"DenseMatrix","value":3165},{"name":"IMatrix","value":2815},{"name":"SparseMatrix","value":3366}]},{"name":"Maths","value":17705},{"name":"Orientation","value":1486},{"name":"palette","children":[{"name":"ColorPalette","value":6367},{"name":"Palette","value":1229},{"name":"ShapePalette","value":2059},{"name":"SizePalette","value":2291}]},{"name":"Property","value":5559},{"name":"Shapes","value":19118},{"name":"Sort","value":6887},{"name":"Stats","value":6557},{"name":"Strings","value":22026}]},{"name":"vis","children":[{"name":"axis","children":[{"name":"Axes","value":1302},{"name":"Axis","value":24593},{"name":"AxisGridLine","value":652},{"name":"AxisLabel","value":636},{"name":"CartesianAxes","value":6703}]},{"name":"controls","children":[{"name":"AnchorControl","value":2138},{"name":"ClickControl","value":3824},{"name":"Control","value":1353},{"name":"ControlList","value":4665},{"name":"DragControl","value":2649},{"name":"ExpandControl","value":2832},{"name":"HoverControl","value":4896},{"name":"IControl","value":763},{"name":"PanZoomControl","value":5222},{"name":"SelectionControl","value":7862},{"name":"TooltipControl","value":8435}]},{"name":"data","children":[{"name":"Data","value":20544},{"name":"DataList","value":19788},{"name":"DataSprite","value":10349},{"name":"EdgeSprite","value":3301},{"name":"NodeSprite","value":19382},{"name":"render","children":[{"name":"ArrowType","value":698},{"name":"EdgeRenderer","value":5569},{"name":"IRenderer","value":353},{"name":"ShapeRenderer","value":2247}]},{"name":"ScaleBinding","value":11275},{"name":"Tree","value":7147},{"name":"TreeBuilder","value":9930}]},{"name":"events","children":[{"name":"DataEvent","value":2313},{"name":"SelectionEvent","value":1880},{"name":"TooltipEvent","value":1701},{"name":"VisualizationEvent","value":1117}]},{"name":"legend","children":[{"name":"Legend","value":20859},{"name":"LegendItem","value":4614},{"name":"LegendRange","value":10530}]},{"name":"operator","children":[{"name":"distortion","children":[{"name":"BifocalDistortion","value":4461},{"name":"Distortion","value":6314},{"name":"FisheyeDistortion","value":3444}]},{"name":"encoder","children":[{"name":"ColorEncoder","value":3179},{"name":"Encoder","value":4060},{"name":"PropertyEncoder","value":4138},{"name":"ShapeEncoder","value":1690},{"name":"SizeEncoder","value":1830}]},{"name":"filter","children":[{"name":"FisheyeTreeFilter","value":5219},{"name":"GraphDistanceFilter","value":3165},{"name":"VisibilityFilter","value":3509}]},{"name":"IOperator","value":1286},{"name":"label","children":[{"name":"Labeler","value":9956},{"name":"RadialLabeler","value":3899},{"name":"StackedAreaLabeler","value":3202}]},{"name":"layout","children":[{"name":"AxisLayout","value":6725},{"name":"BundledEdgeRouter","value":3727},{"name":"CircleLayout","value":9317},{"name":"CirclePackingLayout","value":12003},{"name":"DendrogramLayout","value":4853},{"name":"ForceDirectedLayout","value":8411},{"name":"IcicleTreeLayout","value":4864},{"name":"IndentedTreeLayout","value":3174},{"name":"Layout","value":7881},{"name":"NodeLinkTreeLayout","value":12870},{"name":"PieLayout","value":2728},{"name":"RadialTreeLayout","value":12348},{"name":"RandomLayout","value":870},{"name":"StackedAreaLayout","value":9121},{"name":"TreeMapLayout","value":9191}]},{"name":"Operator","value":2490},{"name":"OperatorList","value":5248},{"name":"OperatorSequence","value":4190},{"name":"OperatorSwitch","value":2581},{"name":"SortOperator","value":2023}]},{"name":"Visualization","value":16540}]}]} const width = 200; const height = 200; // Specify the color scale. const color = d3.scaleOrdinal(data.children.map(d => d.name), colorscheme); // Compute the layout. const root = d3.treemap() // .tile(tile) // e.g., d3.treemapSquarify .size([width, height]) .padding(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value)); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Add a cell for each leaf of the hierarchy. const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); // Append a tooltip. const format = d3.format(",d"); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join(".")}\n${format(d.value)}`); // Append a color rectangle. leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", 1) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); return Object.assign(svg.node(), {scales: {color}}); }31:T592,function make_sample_linechart(colorscheme){ let svgheight = 200 let svgwidht = 200 let padding = {top: 20, left: 20, right: 20, bottom: 20} let noise = octave(perlin2, 2) var seed = 1; function random() { var x = Math.sin(seed++) * 10000; return x - Math.floor(x); } let svg = d3.create("svg") .attr("width", svgwidht) .attr("height", svgheight) for (let color of colorscheme){ let line = d3.line().curve(d3.curveCatmullRom) let arr = [] let r = random() for (let i = 0; i < 10; i++){ arr.push([i * ((svgwidht - padding.left)/10) + padding.left, svgheight/2 + noise(i/10 + r, 0.8)*150]) } svg.append("path") .attr("stroke", color) .attr("fill", "none") .attr("stroke-width", 4) .attr("d", line(arr)) .style("stroke-linecap", "round") svg.append("line") .attr("x1", padding.left) .attr("y1", svgheight - padding.bottom) .attr("x2", svgwidht - padding.right) .attr("y2", svgheight - padding.bottom) .attr("stroke", "#ddd") .attr("stroke-width", 3) .style("stroke-linecap", "round") svg.append("line") .attr("x1", padding.left) .attr("y1", padding.top) .attr("x2", padding.left) .attr("y2", svgheight - padding.bottom) .attr("stroke", "#ddd") .attr("stroke-width", 3) .style("stroke-linecap", "round") } return svg.node() }32:[] 2d:{"title":"Categorical Color Palettes","cells":[{"id":478,"value":"# Categorical Color Palettes","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"Possible contribution: having guidelines \n\n- pay lots of attention to color ordering: a lot of our reasoning over palettes is given by the ordering\n- pay lots of attention to background too!","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"Tableau10, reference: https://www.tableau.com/blog/colors-upgrade-tableau-10-56782","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"colorscheme_footprint(d3[\"schemeTableau10\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"colorscheme_footprint_Min(d3[\"schemeTableau10\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"colorscheme_footprint_Max(d3[\"schemeTableau10\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"Old tableau10, called in d3 \"category10\"","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"colorscheme_footprint(d3[\"schemeCategory10\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"colorscheme_footprint_Min(d3[\"schemeCategory10\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"colorscheme_footprint_Max(d3[\"schemeCategory10\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"# ColorBrewer palettes","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"ColorBrewer paper: https://www.tandfonline.com/doi/abs/10.1179/000870403235002042","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"12 variations, qualitative palette","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"{\n let s = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928']\n return colorscheme_footprint(s)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"{\n let s = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928']\n return colorscheme_footprint_Min(s)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"{\n let s = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928']\n return colorscheme_footprint_Max(s)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"{\n let s = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']\n return colorscheme_footprint(s)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"Same palette with minimized overall lab distance:","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"{\n let s = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']\n let c = sort_colors_by_lab_distance(s, \"minimize\")\n return colorscheme_footprint(c)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"And maximized lab distance\n","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"{\n let s = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']\n let c = sort_colors_by_lab_distance(s, \"maximize\")\n return colorscheme_footprint(c.map(value => ({ value, sort: Math.random() }))\n .sort((a, b) => a.sort - b.sort)\n .map(({ value }) => value))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"# Brands","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"Polaroid","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"{\n let polaroid = [\"#00a3e2\", \"#1ba548\", \"#fdc800\", \"#f1860e\", \"#e41b13\"]\n return colorscheme_footprint(polaroid)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"Interestingly enough, if I change the order of colors the palette becomes unrecognizable, and much heavier on the eyes.","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"{\n let polaroid = [\"#fdc800\", \"#00a3e2\", \"#f1860e\", \"#1ba548\", \"#e41b13\"]\n return colorscheme_footprint(polaroid)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"{\n let ebay = [\"#e53238\", \"#0064d2\", \"#f5af02\", \"#86b817\"]\n return colorscheme_footprint((ebay))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"{\n let ebay = [\"#86b817\", \"#e53238\",\"#f5af02\", \"#0064d2\"]\n return colorscheme_footprint((ebay))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"# Text editor colorschemes","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"Solarized","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"{\n let s = [\"#b58900\", \"#cb4b16\", \"#dc322f\", \"#d33682\", \"#6c71c4\", \"#268bd2\", \"#2aa198\", \"#859900\"]\n return colorscheme_footprint(s);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"# Random tests","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"colorscheme_footprint([\"#001219\",\"#005f73\",\"#0a9396\",\"#94d2bd\",\"#e9d8a6\",\"#ee9b00\",\"#ca6702\",\"#bb3e03\",\"#ae2012\",\"#9b2226\"].map(value => ({ value, sort: Math.random() }))\n .sort((a, b) => a.sort - b.sort)\n .map(({ value }) => value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"{\n let c = sort_colors_by_lab_distance([\"#001219\",\"#005f73\",\"#0a9396\",\"#94d2bd\",\"#e9d8a6\",\"#ee9b00\",\"#ca6702\",\"#bb3e03\",\"#ae2012\",\"#9b2226\"], \"minimize\")\n return colorscheme_footprint(c)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"Lab space uniform:","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"{\n let s = [];\n let total_num_colors = 10;\n for (let i = 0; i < total_num_colors; i++){\n let theta = 2 * Math.PI * i/total_num_colors;\n let el1 = 60;\n let el2 = Math.sin(theta) * 30;\n let el3 = Math.cos(theta) * 30;\n let color = chroma.lab(el1, el2, el3);\n s.push(color.hex())\n }\n return colorscheme_footprint(s.map(value => ({ value, sort: Math.random() }))\n .sort((a, b) => a.sort - b.sort)\n .map(({ value }) => value));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"{\n let s = [];\n let total_num_colors = 10;\n for (let i = 0; i < total_num_colors; i++){\n let theta = 2 * Math.PI * i/total_num_colors;\n let el1 = 70;\n let el2 = Math.sin(theta) * 40;\n let el3 = Math.cos(theta) * 40;\n let color = chroma.lab(el1, el2, el3);\n s.push(color.hex())\n }\n return colorscheme_footprint(s.map(value => ({ value, sort: Math.random() }))\n .sort((a, b) => a.sort - b.sort)\n .map(({ value }) => value));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"More color editors:\nhttp://vrl.cs.brown.edu/color\nhttps://color.adobe.com/create/color-wheel\nhttps://colormaker-demo.github.io/colormakerV2/","pinned":false,"hidden":false,"mode":"md"},{"id":452,"value":"Test colorschemes on many visualizations: https://projects.susielu.com/viz-palette?colors=[%22#ffd700%22,%22#ffb14e%22,%22#fa8775%22,%22#ea5f94%22,%22#cd34b5%22,%22#9d02d7%22,%22#0000ff%22]&backgroundColor=%22white%22&fontColor=%22black%22&mode=%22normal%22","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"chromajs color palette helper: https://www.vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"function totalCIEDE2000distance(hexColors){\n let totalDistance = 0;\n\n for (let i = 1; i < hexColors.length; i++) {\n totalDistance += chroma.deltaE(hexColors[i - 1], hexColors[i]);\n }\n\n return totalDistance;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"function totalLabDistance(hexColors) {\n function hexToLab(hexColor) {\n return chroma(hexColor).lab();\n }\n \n function labDistance(color1, color2) {\n let L1 = color1[0], a1 = color1[1], b1 = color1[2];\n let L2 = color2[0], a2 = color2[1], b2 = color2[2];\n return Math.sqrt(Math.pow(L2 - L1, 2) + Math.pow(a2 - a1, 2) + Math.pow(b2 - b1, 2));\n }\n \n let labColors = hexColors.map(hexToLab);\n let totalDistance = 0;\n\n for (let i = 1; i < labColors.length; i++) {\n totalDistance += labDistance(labColors[i - 1], labColors[i]);\n }\n\n return totalDistance;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"function colorscheme_footprint(colorscheme){\n let div = document.createElement(\"div\")\n div.style.display = \"flex\"\n div.append(draw_colorscheme_in_cielab_space(colorscheme))\n div.append(make_sample_barchart(colorscheme))\n div.append(make_sample_linechart(colorscheme))\n div.append(make_sample_treemap(colorscheme))\n\n let div2 = document.createElement(\"div\")\n div2.append(swatches(colorscheme))\n div2.append(\"Total distance: \" + Math.round(totalCIEDE2000distance(colorscheme)*10)/10)\n return html`${div}${div2}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"function colorscheme_footprint_Min(colorscheme){\n console.log(colorscheme)\n colorscheme = sort_colors_by_lab_distance(colorscheme)\n \n let div = document.createElement(\"div\")\n div.style.display = \"flex\"\n div.append(draw_colorscheme_in_cielab_space(colorscheme))\n div.append(make_sample_barchart(colorscheme))\n div.append(make_sample_linechart(colorscheme))\n div.append(make_sample_treemap(colorscheme))\n\n let div2 = document.createElement(\"div\")\n div2.append(swatches(colorscheme))\n div2.append(\"Total distance: \" + Math.round(totalCIEDE2000distance(colorscheme)*10)/10)\n return html`${div}${div2}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"function colorscheme_footprint_Max(colorscheme){\n console.log(colorscheme)\n colorscheme = sort_colors_by_lab_distance(colorscheme, false)\n \n let div = document.createElement(\"div\")\n div.style.display = \"flex\"\n div.append(draw_colorscheme_in_cielab_space(colorscheme))\n div.append(make_sample_barchart(colorscheme))\n div.append(make_sample_linechart(colorscheme))\n div.append(make_sample_treemap(colorscheme))\n\n let div2 = document.createElement(\"div\")\n div2.append(swatches(colorscheme))\n div2.append(\"Total distance: \" + Math.round(totalCIEDE2000distance(colorscheme)*10)/10)\n return html`${div}${div2}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"function make_sample_barchart(colorscheme){\n let svgheight = 200\n let svgwidht = 200\n\n var seed = 1;\n function random() {\n var x = Math.sin(seed++) * 10000;\n return x - Math.floor(x);\n }\n \n let svg = d3.create(\"svg\")\n .attr(\"width\", svgwidht)\n .attr(\"height\", svgheight)\n\n for (let i = 0; i < 10; i++){\n\n let curheight = 0;\n \n for (let j = 0; j < colorscheme.length; j++){\n\n let blockheight = random()*(svgheight/colorscheme.length)\n \n svg.append(\"rect\")\n .attr(\"x\", i * (svgwidht/10))\n .attr(\"y\", svgheight - curheight - blockheight - 10)\n .attr(\"width\", svgwidht/10 - 4)\n .attr(\"height\", blockheight)\n .attr(\"fill\", colorscheme[j])\n\n curheight += blockheight\n }\n }\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function draw_colorscheme_in_cielab_space(colorscheme){\n let svgwidth = 200\n let svgheight = 200\n \n const svg = d3.create('svg')\n .attr('width', svgwidth)\n .attr('height', svgheight);\n \n svg.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"y1\", svgheight/2)\n .attr(\"x2\", svgwidth)\n .attr(\"y2\", svgheight/2)\n .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-dasharray\", \"3 3\")\n\n svg.append(\"line\")\n .attr(\"x1\", svgwidth/2)\n .attr(\"y1\", 0)\n .attr(\"x2\", svgwidth/2)\n .attr(\"y2\", svgheight)\n .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-dasharray\", \"3 3\")\n\n let scalex = d3.scaleLinear([-100, 100], [0, svgwidth])\n let scaley = d3.scaleLinear([-100, 100], [svgheight, 0])\n \n for (let color of colorscheme){\n let h = hexToCIELAB(color)\n\n svg.append('circle')\n .attr('cx', scalex(h[1]))\n .attr('cy', scaley(h[2]))\n .attr('r', 5)\n .attr('fill', color);\n }\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"function shuffle(arr){\n return arr.map(value => ({ value, sort: Math.random() }))\n .sort((a, b) => a.sort - b.sort)\n .map(({ value }) => value)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function hexToCIELAB(hexColor) {\n // First, convert hex to RGB using chroma.js\n let rgb = chroma(hexColor).rgb();\n\n // Then, convert RGB to CIELAB\n let cielab = chroma(rgb).lab();\n\n return cielab;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"function swatches(colors) {\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;;\n const canvas = svg`