データの色を表示して視覚化する。

データはハッシュ化できる。ハッシュ化したデータはカラー値に変換しやすい。

var hashColor=((s)=>{ return '#'+md5(s).slice(0,6) });

スライスして先頭６文字分をカラーにするため、ハッシュよりもかぶりやすくなる。

対策として、全てのハッシュ値をカラー化するには、６色カラーにする。端数はゼロパディング。

//ready padding
fn.pad=( (d,l)=>('000000000000000000'+d).slice(-1*l)) 

 fn.md5(d).match(/[\s\S]{1,6}/g).map(d=>'#'+fn.pad(d,6)).forEach((d)=>{
 console.log(d); //d is #xxxxxxx * 6
})

デモ

//hash color
let fn={}
fn.ce=(d=>document.createElement(d))
//fn.md5=md5
fn.pad=( (d,l)=>('000000000000000000'+d).slice(-1*l)) 
fn.script=(u=>{let el=fn.ce('script');el.onload=on;el.src=u;return el})
;
let $sc =fn.script('https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.js')
,$s=fn.ce('style')
,$t=fn.ce('textarea')
,$o=fn.ce('output')
,sol=(d=>Promise.resolve(d))
;
$s.innerHTML=`textarea{width:100%;height:10rem}span{width:2rem;border-bottom:4px solid;padding:0 1rem}.none{display:none}`
;
$t.oninput =on
$t.classList.add('none')
;[$sc,$s,$t,$o].forEach(d=>document.body.appendChild(d))
;
function on(ev){
 let type=ev.type
 if(type==='load'){ fn.md5=md5;$t.classList.remove('none')}
 if(type==='input'){
  let v= $t.value
  ;sol(v).then(d=>{
   $o.innerHTML='';
   fn.md5(d).match(/[\s\S]{1,6}/g).map(d=>'#'+fn.pad(d,6)).forEach((d)=>{
     let color= d
     ,el=fn.ce('span')
     ;
     el.innerHTML =color.slice(1)
     el.style.borderColor=color;
     /*console.log(color);*/
     $o.appendChild(el) 
    })
  })
  ;
 }
// 
}