patrickhulce/analyze.js Secret

## analyze.js
const fs = require('fs')
const _ = require('lodash')
const FILE = 'httparchive-colors.csv'

const NUM_BUCKETS = 4
const BUCKET_SIZE = 256 / NUM_BUCKETS

const contents = fs.readFileSync(FILE, 'utf8').split('\n')
const colorCounts = contents.slice(1).map(x => {
const parts = x.split(',')
let color = parts[0]
if (!parts.length || !color || color.length % 3 !== 0) return
if (color.length === 3) {
  color = `${color.substr(0, 1).repeat(2)}${color.substr(1, 1).repeat(2)}${color.substr(2).repeat(2)}`
}

const toHex = x => {
  x = x === 256 ? 255 : x
  const val = x.toString(16)
  return val.length === 2 ? val : `0${val}`
}

const r = parseInt(color.substr(0, 2), 16)
const g = parseInt(color.substr(2, 2), 16)
const b = parseInt(color.substr(4, 2), 16)
const rRounded = Math.round(r / BUCKET_SIZE) * BUCKET_SIZE
const gRounded = Math.round(g / BUCKET_SIZE) * BUCKET_SIZE
const bRounded = Math.round(b / BUCKET_SIZE) * BUCKET_SIZE
return {
  color, r, g, b,
  rRounded, gRounded, bRounded,
  key: `${toHex(rRounded)}${toHex(gRounded)}${toHex(bRounded)}`,
  count: Number(parts[1])
}
});

const distinctColors = _.groupBy(colorCounts, 'color')
const groupedColors = _.groupBy(colorCounts, 'key')

let sortedGroups = []
_.forEach(distinctColors, (group, color) => {
  const sum = _.sumBy(group, 'count')
  sortedGroups.push({color, sum})
})

sortedGroups = _.sortBy(sortedGroups, 'sum').reverse()

fs.writeFileSync('results.json', JSON.stringify(sortedGroups, null, 2), 'utf8')
console.log('color,total_count')
sortedGroups.forEach(item =>{
  if (!item.sum) return
    console.log(`#${item.color},${item.sum}`)
})

## visualize.html
<html>
  <body>
    <style>
      body {
        height: 1000px;
        overflow: hidden
      }
      table {
        float: left;
        height: 1000px;
        overflow: scroll;
      }
      .swatch {
        width: 32px;
        height: 32px;
        border: 1px solid black;
      }

      th.swatch {
        border: none;
      }

      td {
        text-align: right;
        font-family: monospace;
      }

      td {
        padding-left: 10px;
      }

      td:first-child {
        padding-left: 0;
      }
      </style>
    <table>
      <thead><tr><th class="swatch"></th><th>Color</th><th>Count</th><th>Rank</th></tr></thead>
      <tbody id="results"></tbody>
    </table>
    <script>
      const RESULTS = [
  {
    "color": "400000",
    "sum": 75855
  },
  {
    "color": "400040",
    "sum": 77989
  },
  {
    "color": "400080",
    "sum": 59733
  },
  {
    "color": "404000",
    "sum": 98834
  },
  {
    "color": "404040",
    "sum": 14984346
  },
  {
    "color": "404080",
    "sum": 1709319
  },
  {
    "color": "408000",
    "sum": 240021
  },
  {
    "color": "408040",
    "sum": 1762915
  },
  {
    "color": "408080",
    "sum": 1540789
  },
  {
    "color": "800000",
    "sum": 357587
  },
  {
    "color": "800040",
    "sum": 90013
  },
  {
    "color": "800080",
    "sum": 66323
  },
  {
    "color": "804000",
    "sum": 187006
  },
  {
    "color": "804040",
    "sum": 627267
  },
  {
    "color": "804080",
    "sum": 145940
  },
  {
    "color": "808000",
    "sum": 102522
  },
  {
    "color": "808040",
    "sum": 1073308
  },
  {
    "color": "808080",
    "sum": 13286189
  },
  {
    "color": "ffffff",
    "sum": 38378327
  },
  {
    "color": "000000",
    "sum": 8254599
  },
  {
    "color": "c0c0c0",
    "sum": 7883170
  },
  {
    "color": "4080c0",
    "sum": 3934634
  },
  {
    "color": "c04040",
    "sum": 3026247
  },
  {
    "color": "0080c0",
    "sum": 2439417
  },
  {
    "color": "ffc0c0",
    "sum": 1450298
  },
  {
    "color": "c0ffc0",
    "sum": 1313979
  },
  {
    "color": "004040",
    "sum": 1042802
  },
  {
    "color": "ff0000",
    "sum": 813727
  },
  {
    "color": "c0ffff",
    "sum": 1276460
  },
  {
    "color": "40c0c0",
    "sum": 1516077
  },
  {
    "color": "ffc040",
    "sum": 1231975
  },
  {
    "color": "40c040",
    "sum": 1118597
  },
  {
    "color": "ffffc0",
    "sum": 1024047
  },
  {
    "color": "ff4000",
    "sum": 656475
  },
  {
    "color": "ff4040",
    "sum": 1620979
  },
  {
    "color": "ff8000",
    "sum": 1335110
  },
  {
    "color": "4080ff",
    "sum": 851912
  },
  {
    "color": "40c0ff",
    "sum": 846010
  },
  {
    "color": "c0c0ff",
    "sum": 594612
  },
  {
    "color": "8080c0",
    "sum": 781833
  },
  {
    "color": "ff8080",
    "sum": 680274
  },
  {
    "color": "c080c0",
    "sum": 300186
  },
  {
    "color": "80c040",
    "sum": 640774
  },
  {
    "color": "80c080",
    "sum": 369674
  },
  {
    "color": "ffc080",
    "sum": 521580
  },
  {
    "color": "00c0c0",
    "sum": 508935
  },
  {
    "color": "0000c0",
    "sum": 196645
  },
  {
    "color": "c08000",
    "sum": 416662
  },
  {
    "color": "80c0ff",
    "sum": 565554
  },
  {
    "color": "ffff00",
    "sum": 208974
  },
  {
    "color": "c08040",
    "sum": 299596
  },
  {
    "color": "0000ff",
    "sum": 140087
  },
  {
    "color": "ffc000",
    "sum": 723141
  },
  {
    "color": "00ff00",
    "sum": 103562
  },
  {
    "color": "c00000",
    "sum": 875773
  },
  {
    "color": "ff00ff",
    "sum": 87171
  },
  {
    "color": "00ffff",
    "sum": 98689
  },
  {
    "color": "80c0c0",
    "sum": 488550
  },
  {
    "color": "008080",
    "sum": 541934
  },
  {
    "color": "00c080",
    "sum": 277391
  },
  {
    "color": "008000",
    "sum": 168597
  },
  {
    "color": "0040c0",
    "sum": 357172
  },
  {
    "color": "00c0ff",
    "sum": 465631
  },
  {
    "color": "008040",
    "sum": 239540
  },
  {
    "color": "0080ff",
    "sum": 411979
  },
  {
    "color": "ff0040",
    "sum": 238237
  },
  {
    "color": "004080",
    "sum": 947729
  },
  {
    "color": "ff8040",
    "sum": 641742
  },
  {
    "color": "000080",
    "sum": 94336
  },
  {
    "color": "4040c0",
    "sum": 188523
  },
  {
    "color": "c00040",
    "sum": 363950
  },
  {
    "color": "40c080",
    "sum": 294819
  },
  {
    "color": "8040c0",
    "sum": 179553
  },
  {
    "color": "c0c080",
    "sum": 172600
  },
  {
    "color": "80ffc0",
    "sum": 33836
  },
  {
    "color": "ffff80",
    "sum": 131752
  },
  {
    "color": "c0c040",
    "sum": 168089
  },
  {
    "color": "ff0080",
    "sum": 116496
  },
  {
    "color": "c04000",
    "sum": 374255
  },
  {
    "color": "ff4080",
    "sum": 191522
  },
  {
    "color": "ffc0ff",
    "sum": 57481
  },
  {
    "color": "ffff40",
    "sum": 47267
  },
  {
    "color": "000040",
    "sum": 176691
  },
  {
    "color": "40c000",
    "sum": 75750
  },
  {
    "color": "c08080",
    "sum": 131991
  },
  {
    "color": "80c000",
    "sum": 186100
  },
  {
    "color": "c040c0",
    "sum": 33990
  },
  {
    "color": "c0ff80",
    "sum": 36517
  },
  {
    "color": "00ff80",
    "sum": 10216
  },
  {
    "color": "c0c000",
    "sum": 82510
  },
  {
    "color": "c00080",
    "sum": 78469
  },
  {
    "color": "40ffc0",
    "sum": 12321
  },
  {
    "color": "00c040",
    "sum": 86875
  },
  {
    "color": "8000c0",
    "sum": 17953
  },
  {
    "color": "4000c0",
    "sum": 10464
  },
  {
    "color": "c040ff",
    "sum": 13243
  },
  {
    "color": "ff80c0",
    "sum": 53693
  },
  {
    "color": "00c000",
    "sum": 49428
  },
  {
    "color": "004000",
    "sum": 43815
  },
  {
    "color": "00ffc0",
    "sum": 8381
  },
  {
    "color": "c0ff00",
    "sum": 17463
  },
  {
    "color": "4040ff",
    "sum": 22644
  },
  {
    "color": "8080ff",
    "sum": 40315
  },
  {
    "color": "c080ff",
    "sum": 23538
  },
  {
    "color": "ff40ff",
    "sum": 5948
  },
  {
    "color": "8040ff",
    "sum": 14858
  },
  {
    "color": "8000ff",
    "sum": 13091
  },
  {
    "color": "c000ff",
    "sum": 11711
  },
  {
    "color": "80ffff",
    "sum": 21966
  },
  {
    "color": "c0ff40",
    "sum": 23890
  },
  {
    "color": "80ff00",
    "sum": 9877
  },
  {
    "color": "ff80ff",
    "sum": 8753
  },
  {
    "color": "0040ff",
    "sum": 23828
  },
  {
    "color": "c04080",
    "sum": 93025
  },
  {
    "color": "80ff80",
    "sum": 12844
  },
  {
    "color": "ff00c0",
    "sum": 6507
  },
  {
    "color": "40ffff",
    "sum": 8303
  },
  {
    "color": "40ff40",
    "sum": 4388
  },
  {
    "color": "ff40c0",
    "sum": 17195
  },
  {
    "color": "80ff40",
    "sum": 6229
  },
  {
    "color": "40ff80",
    "sum": 5594
  },
  {
    "color": "c000c0",
    "sum": 8999
  },
  {
    "color": "4000ff",
    "sum": 3340
  },
  {
    "color": "40ff00",
    "sum": 2797
  },
  {
    "color": "00ff40",
    "sum": 2591
  }
].sort((a, b) => b.sum - a.sum)

function write() {
  const el = document.getElementById('results')

  RESULTS.forEach((item, index) => {
    const row = document.createElement('tr')
    const swatch = document.createElement('td')
    swatch.classList.add('swatch')
    swatch.style.background = `#${item.color}`
    row.appendChild(swatch)

    const color = document.createElement('td')
    color.textContent = `#${item.color}`
    color.classList.add('color')
    row.appendChild(color)
    const count = document.createElement('td')
    count.textContent = item.sum.toLocaleString()
    row.appendChild(count)
    const rank = document.createElement('td')
    rank.textContent = index + 1
    row.appendChild(rank)

    el.appendChild(row)
  })

  const table = el.parentElement
  const container = el.parentElement.parentElement
  const clone1 = table.cloneNode(true)
  clone1.style.marginTop = '-986px'
  container.appendChild(clone1)
  const clone2 = table.cloneNode(true)
  clone2.style.marginTop = '-1972px'
  container.appendChild(clone2)
  const clone3 = table.cloneNode(true)
  clone3.style.marginTop = '-2958px'
  container.appendChild(clone3)
  const clone4 = table.cloneNode(true)
  clone4.style.marginTop = '-3944px'
  container.appendChild(clone4)
}


write()
      </script>
  </body>
</html>
	const fs = require('fs')
	const _ = require('lodash')
	const FILE = 'httparchive-colors.csv'

	const NUM_BUCKETS = 4
	const BUCKET_SIZE = 256 / NUM_BUCKETS

	const contents = fs.readFileSync(FILE, 'utf8').split('\n')
	const colorCounts = contents.slice(1).map(x => {
	const parts = x.split(',')
	let color = parts[0]
	if (!parts.length \|\| !color \|\| color.length % 3 !== 0) return
	if (color.length === 3) {
	color = `${color.substr(0, 1).repeat(2)}${color.substr(1, 1).repeat(2)}${color.substr(2).repeat(2)}`
	}

	const toHex = x => {
	x = x === 256 ? 255 : x
	const val = x.toString(16)
	return val.length === 2 ? val : `0${val}`
	}

	const r = parseInt(color.substr(0, 2), 16)
	const g = parseInt(color.substr(2, 2), 16)
	const b = parseInt(color.substr(4, 2), 16)
	const rRounded = Math.round(r / BUCKET_SIZE) * BUCKET_SIZE
	const gRounded = Math.round(g / BUCKET_SIZE) * BUCKET_SIZE
	const bRounded = Math.round(b / BUCKET_SIZE) * BUCKET_SIZE
	return {
	color, r, g, b,
	rRounded, gRounded, bRounded,
	key: `${toHex(rRounded)}${toHex(gRounded)}${toHex(bRounded)}`,
	count: Number(parts[1])
	}
	});

	const distinctColors = _.groupBy(colorCounts, 'color')
	const groupedColors = _.groupBy(colorCounts, 'key')

	let sortedGroups = []
	_.forEach(distinctColors, (group, color) => {
	const sum = _.sumBy(group, 'count')
	sortedGroups.push({color, sum})
	})

	sortedGroups = _.sortBy(sortedGroups, 'sum').reverse()

	fs.writeFileSync('results.json', JSON.stringify(sortedGroups, null, 2), 'utf8')
	console.log('color,total_count')
	sortedGroups.forEach(item =>{
	if (!item.sum) return
	console.log(`#${item.color},${item.sum}`)
	})
	<html>
	<body>
	<style>
	body {
	height: 1000px;
	overflow: hidden
	}
	table {
	float: left;
	height: 1000px;
	overflow: scroll;
	}
	.swatch {
	width: 32px;
	height: 32px;
	border: 1px solid black;
	}

	th.swatch {
	border: none;
	}

	td {
	text-align: right;
	font-family: monospace;
	}

	td {
	padding-left: 10px;
	}

	td:first-child {
	padding-left: 0;
	}
	</style>
	<table>
	<thead><tr><th class="swatch"></th><th>Color</th><th>Count</th><th>Rank</th></tr></thead>
	<tbody id="results"></tbody>
	</table>
	<script>
	const RESULTS = [
	{
	"color": "400000",
	"sum": 75855
	},
	{
	"color": "400040",
	"sum": 77989
	},
	{
	"color": "400080",
	"sum": 59733
	},
	{
	"color": "404000",
	"sum": 98834
	},
	{
	"color": "404040",
	"sum": 14984346
	},
	{
	"color": "404080",
	"sum": 1709319
	},
	{
	"color": "408000",
	"sum": 240021
	},
	{
	"color": "408040",
	"sum": 1762915
	},
	{
	"color": "408080",
	"sum": 1540789
	},
	{
	"color": "800000",
	"sum": 357587
	},
	{
	"color": "800040",
	"sum": 90013
	},
	{
	"color": "800080",
	"sum": 66323
	},
	{
	"color": "804000",
	"sum": 187006
	},
	{
	"color": "804040",
	"sum": 627267
	},
	{
	"color": "804080",
	"sum": 145940
	},
	{
	"color": "808000",
	"sum": 102522
	},
	{
	"color": "808040",
	"sum": 1073308
	},
	{
	"color": "808080",
	"sum": 13286189
	},
	{
	"color": "ffffff",
	"sum": 38378327
	},
	{
	"color": "000000",
	"sum": 8254599
	},
	{
	"color": "c0c0c0",
	"sum": 7883170
	},
	{
	"color": "4080c0",
	"sum": 3934634
	},
	{
	"color": "c04040",
	"sum": 3026247
	},
	{
	"color": "0080c0",
	"sum": 2439417
	},
	{
	"color": "ffc0c0",
	"sum": 1450298
	},
	{
	"color": "c0ffc0",
	"sum": 1313979
	},
	{
	"color": "004040",
	"sum": 1042802
	},
	{
	"color": "ff0000",
	"sum": 813727
	},
	{
	"color": "c0ffff",
	"sum": 1276460
	},
	{
	"color": "40c0c0",
	"sum": 1516077
	},
	{
	"color": "ffc040",
	"sum": 1231975
	},
	{
	"color": "40c040",
	"sum": 1118597
	},
	{
	"color": "ffffc0",
	"sum": 1024047
	},
	{
	"color": "ff4000",
	"sum": 656475
	},
	{
	"color": "ff4040",
	"sum": 1620979
	},
	{
	"color": "ff8000",
	"sum": 1335110
	},
	{
	"color": "4080ff",
	"sum": 851912
	},
	{
	"color": "40c0ff",
	"sum": 846010
	},
	{
	"color": "c0c0ff",
	"sum": 594612
	},
	{
	"color": "8080c0",
	"sum": 781833
	},
	{
	"color": "ff8080",
	"sum": 680274
	},
	{
	"color": "c080c0",
	"sum": 300186
	},
	{
	"color": "80c040",
	"sum": 640774
	},
	{
	"color": "80c080",
	"sum": 369674
	},
	{
	"color": "ffc080",
	"sum": 521580
	},
	{
	"color": "00c0c0",
	"sum": 508935
	},
	{
	"color": "0000c0",
	"sum": 196645
	},
	{
	"color": "c08000",
	"sum": 416662
	},
	{
	"color": "80c0ff",
	"sum": 565554
	},
	{
	"color": "ffff00",
	"sum": 208974
	},
	{
	"color": "c08040",
	"sum": 299596
	},
	{
	"color": "0000ff",
	"sum": 140087
	},
	{
	"color": "ffc000",
	"sum": 723141
	},
	{
	"color": "00ff00",
	"sum": 103562
	},
	{
	"color": "c00000",
	"sum": 875773
	},
	{
	"color": "ff00ff",
	"sum": 87171
	},
	{
	"color": "00ffff",
	"sum": 98689
	},
	{
	"color": "80c0c0",
	"sum": 488550
	},
	{
	"color": "008080",
	"sum": 541934
	},
	{
	"color": "00c080",
	"sum": 277391
	},
	{
	"color": "008000",
	"sum": 168597
	},
	{
	"color": "0040c0",
	"sum": 357172
	},
	{
	"color": "00c0ff",
	"sum": 465631
	},
	{
	"color": "008040",
	"sum": 239540
	},
	{
	"color": "0080ff",
	"sum": 411979
	},
	{
	"color": "ff0040",
	"sum": 238237
	},
	{
	"color": "004080",
	"sum": 947729
	},
	{
	"color": "ff8040",
	"sum": 641742
	},
	{
	"color": "000080",
	"sum": 94336
	},
	{
	"color": "4040c0",
	"sum": 188523
	},
	{
	"color": "c00040",
	"sum": 363950
	},
	{
	"color": "40c080",
	"sum": 294819
	},
	{
	"color": "8040c0",
	"sum": 179553
	},
	{
	"color": "c0c080",
	"sum": 172600
	},
	{
	"color": "80ffc0",
	"sum": 33836
	},
	{
	"color": "ffff80",
	"sum": 131752
	},
	{
	"color": "c0c040",
	"sum": 168089
	},
	{
	"color": "ff0080",
	"sum": 116496
	},
	{
	"color": "c04000",
	"sum": 374255
	},
	{
	"color": "ff4080",
	"sum": 191522
	},
	{
	"color": "ffc0ff",
	"sum": 57481
	},
	{
	"color": "ffff40",
	"sum": 47267
	},
	{
	"color": "000040",
	"sum": 176691
	},
	{
	"color": "40c000",
	"sum": 75750
	},
	{
	"color": "c08080",
	"sum": 131991
	},
	{
	"color": "80c000",
	"sum": 186100
	},
	{
	"color": "c040c0",
	"sum": 33990
	},
	{
	"color": "c0ff80",
	"sum": 36517
	},
	{
	"color": "00ff80",
	"sum": 10216
	},
	{
	"color": "c0c000",
	"sum": 82510
	},
	{
	"color": "c00080",
	"sum": 78469
	},
	{
	"color": "40ffc0",
	"sum": 12321
	},
	{
	"color": "00c040",
	"sum": 86875
	},
	{
	"color": "8000c0",
	"sum": 17953
	},
	{
	"color": "4000c0",
	"sum": 10464
	},
	{
	"color": "c040ff",
	"sum": 13243
	},
	{
	"color": "ff80c0",
	"sum": 53693
	},
	{
	"color": "00c000",
	"sum": 49428
	},
	{
	"color": "004000",
	"sum": 43815
	},
	{
	"color": "00ffc0",
	"sum": 8381
	},
	{
	"color": "c0ff00",
	"sum": 17463
	},
	{
	"color": "4040ff",
	"sum": 22644
	},
	{
	"color": "8080ff",
	"sum": 40315
	},
	{
	"color": "c080ff",
	"sum": 23538
	},
	{
	"color": "ff40ff",
	"sum": 5948
	},
	{
	"color": "8040ff",
	"sum": 14858
	},
	{
	"color": "8000ff",
	"sum": 13091
	},
	{
	"color": "c000ff",
	"sum": 11711
	},
	{
	"color": "80ffff",
	"sum": 21966
	},
	{
	"color": "c0ff40",
	"sum": 23890
	},
	{
	"color": "80ff00",
	"sum": 9877
	},
	{
	"color": "ff80ff",
	"sum": 8753
	},
	{
	"color": "0040ff",
	"sum": 23828
	},
	{
	"color": "c04080",
	"sum": 93025
	},
	{
	"color": "80ff80",
	"sum": 12844
	},
	{
	"color": "ff00c0",
	"sum": 6507
	},
	{
	"color": "40ffff",
	"sum": 8303
	},
	{
	"color": "40ff40",
	"sum": 4388
	},
	{
	"color": "ff40c0",
	"sum": 17195
	},
	{
	"color": "80ff40",
	"sum": 6229
	},
	{
	"color": "40ff80",
	"sum": 5594
	},
	{
	"color": "c000c0",
	"sum": 8999
	},
	{
	"color": "4000ff",
	"sum": 3340
	},
	{
	"color": "40ff00",
	"sum": 2797
	},
	{
	"color": "00ff40",
	"sum": 2591
	}
	].sort((a, b) => b.sum - a.sum)

	function write() {
	const el = document.getElementById('results')

	RESULTS.forEach((item, index) => {
	const row = document.createElement('tr')
	const swatch = document.createElement('td')
	swatch.classList.add('swatch')
	swatch.style.background = `#${item.color}`
	row.appendChild(swatch)

	const color = document.createElement('td')
	color.textContent = `#${item.color}`
	color.classList.add('color')
	row.appendChild(color)
	const count = document.createElement('td')
	count.textContent = item.sum.toLocaleString()
	row.appendChild(count)
	const rank = document.createElement('td')
	rank.textContent = index + 1
	row.appendChild(rank)

	el.appendChild(row)
	})

	const table = el.parentElement
	const container = el.parentElement.parentElement
	const clone1 = table.cloneNode(true)
	clone1.style.marginTop = '-986px'
	container.appendChild(clone1)
	const clone2 = table.cloneNode(true)
	clone2.style.marginTop = '-1972px'
	container.appendChild(clone2)
	const clone3 = table.cloneNode(true)
	clone3.style.marginTop = '-2958px'
	container.appendChild(clone3)
	const clone4 = table.cloneNode(true)
	clone4.style.marginTop = '-3944px'
	container.appendChild(clone4)
	}


	write()
	</script>
	</body>
	</html>