eesur · December 4, 2017 22:19
diff --git a/.block b/.block
 license: mit
 height: 500
 border: no
diff --git a/README.md b/README.md
diff --git a/dist.css b/dist.css
 body{font-family:-apple-system,BlinkMacSystemFont,Consolas,monaco,monospace;font-size:16px;color:#555}.pipe{color:tomato;font-weight:700;letter-spacing:-2px;font-size:18px}
diff --git a/dist.js b/dist.js
 !function(n){function e(c){if(t[c])return t[c].exports;var a=t[c]={i:c,l:!1,exports:{}};return n[c].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var t={};e.m=n,e.c=t,e.i=function(n){return n},e.d=function(n,t,c){e.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:c})},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},e.p="",e(e.s=0)}([function(module,exports,__webpack_require__){"use strict";eval("\n\nvar data = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89];\n\nd3.select('.barcode-chart ul').selectAll('.pipe').data(data).enter().append('li').attr('class', 'block py1').html(function (d, i) {\n  var pipes = repeatStringNumTimes('|', d);\n  console.log(pipes);\n  return 'F' + i + ' : <span class=\\'pipe\\'>' + pipes + '</span> ' + d;\n});\n\nfunction repeatStringNumTimes(string, times) {\n  return times > 0 ? string.repeat(times) : '';\n}//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zY3JpcHQuanM/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBkYXRhID0gWzEsIDIsIDMsIDUsIDgsIDEzLCAyMSwgMzQsIDU1LCA4OV1cblxuZDMuc2VsZWN0KCcuYmFyY29kZS1jaGFydCB1bCcpXG4gIC5zZWxlY3RBbGwoJy5waXBlJylcbiAgLmRhdGEoZGF0YSlcbiAgLmVudGVyKCkuYXBwZW5kKCdsaScpXG4gIC5hdHRyKCdjbGFzcycsICdibG9jayBweTEnKVxuICAuaHRtbCgoZCwgaSkgPT4ge1xuICAgIGNvbnN0IHBpcGVzID0gcmVwZWF0U3RyaW5nTnVtVGltZXMoJ3wnLCBkKVxuICAgIGNvbnNvbGUubG9nKHBpcGVzKVxuICAgIHJldHVybiBgRiR7aX0gOiA8c3BhbiBjbGFzcz0ncGlwZSc+JHtwaXBlc308L3NwYW4+ICR7ZH1gXG4gIH0pXG5cbmZ1bmN0aW9uIHJlcGVhdFN0cmluZ051bVRpbWVzIChzdHJpbmcsIHRpbWVzKSB7XG4gIHJldHVybiB0aW1lcyA+IDAgPyBzdHJpbmcucmVwZWF0KHRpbWVzKSA6ICcnXG59XG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gc2NyaXB0LmpzIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0E7QUFDQTtBQU1BO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n")}]);
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <title>barcode chart as text</title>
 <link href="https://unpkg.com/[email protected]/css/basscss.min.css" rel="stylesheet">
 <link href='dist.css' rel='stylesheet' />
 <body>
  <div class='barcode-chart'>
    <ul class='list-reset'></ul>
  </div>
 	<script src='https://d3js.org/d3.v4.min.js'></script>
 	<script src='dist.js'></script>
 </body>
diff --git a/script.js b/script.js
 const data = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

 d3.select('.barcode-chart ul')
  .selectAll('.pipe')
  .data(data)
  .enter().append('li')
  .attr('class', 'block py1')
  .html((d, i) => {
    const pipes = repeatStringNumTimes('|', d)
    console.log(pipes)
    return `F${i} : <span class='pipe'>${pipes}</span> ${d}`
  })

 function repeatStringNumTimes (string, times) {
  return times > 0 ? string.repeat(times) : ''
 }
diff --git a/style.styl b/style.styl
 body 
  font-family: -apple-system, BlinkMacSystemFont, Consolas, monaco, monospace
  font-size: 16px
  color: #555
 .pipe 
  color: tomato
  font-weight: bold
  letter-spacing: -2px
  font-size: 18px
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<title>barcode chart as text</title>
	<link href="https://unpkg.com/[email protected]/css/basscss.min.css" rel="stylesheet">
	<link href='dist.css' rel='stylesheet' />
	<body>
	<div class='barcode-chart'>
	<ul class='list-reset'></ul>
	</div>
	<script src='https://d3js.org/d3.v4.min.js'></script>
	<script src='dist.js'></script>
	</body>
	const data = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

	d3.select('.barcode-chart ul')
	.selectAll('.pipe')
	.data(data)
	.enter().append('li')
	.attr('class', 'block py1')
	.html((d, i) => {
	const pipes = repeatStringNumTimes('\|', d)
	console.log(pipes)
	return `F${i} : <span class='pipe'>${pipes}</span> ${d}`
	})

	function repeatStringNumTimes (string, times) {
	return times > 0 ? string.repeat(times) : ''
	}
	body
	font-family: -apple-system, BlinkMacSystemFont, Consolas, monaco, monospace
	font-size: 16px
	color: #555
	.pipe
	color: tomato
	font-weight: bold
	letter-spacing: -2px
	font-size: 18px