Skip to content

Instantly share code, notes, and snippets.

@eesur

eesur/.block

Last active December 4, 2017 22:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eesur/e6697d5de828e39a13625dbec63de8ad to your computer and use it in GitHub Desktop.
Save eesur/e6697d5de828e39a13625dbec63de8ad to your computer and use it in GitHub Desktop.
Download ZIP
d3 | bar chart with just pipe character
Raw
.block
license: mit
height: 500
border: no
Raw
README.md

bar chart made with pipe character ¯_(ツ)_/¯

Raw
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}
Raw
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")}]);
Raw
index.html
<!DOCTYPE html>
<title>barcode chart as text</title>
<link href="https://unpkg.com/basscss@8.0.2/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>
Raw
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) : ''
}
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment