Skip to content

Instantly share code, notes, and snippets.

@Thanaporn-sk

Thanaporn-sk/.block

Created August 23, 2017 17:11
Show Gist options
  • Save Thanaporn-sk/7c5142605fe111ec1b9d331af0d8c6e4 to your computer and use it in GitHub Desktop.
Save Thanaporn-sk/7c5142605fe111ec1b9d331af0d8c6e4 to your computer and use it in GitHub Desktop.
Download ZIP
How many shades of blue do you need?
Raw
.block
license: mit
height: 1000
border: no
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin:0
}
</style>
</head>
<body>
<script>
const width = 960;
const height = 1000;
const leftEdge = 25;
const minN = 2;
const maxN = 40;
const svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.attr('shape-rendering', 'crispEdges')
const colors = [
'#CCE3F2',
'#99C7E4',
'#66AAD7',
'#338EC9',
'#0072BC',
'#00568D',
'#18375F'
];
const scale = d3.scaleLinear()
.domain(d3.range(colors.length).map(d => d / (colors.length - 1)))
.range(colors);
const xScale = d3.scaleBand()
.range([leftEdge, width]);
const yScale = d3.scaleBand()
.domain(d3.range(minN, maxN + 1))
.range([0, height]);
const data = [];
yScale.domain().forEach(y => {
xScale.domain(d3.range(y));
xScale.domain().forEach(x => {
data.push({
x: xScale(x),
y: yScale(y),
width: Math.ceil(xScale.bandwidth()),
color: scale(x / (y - 1))
});
});
});
svg.selectAll('rect').data(data)
.enter().append('rect')
.attr('x', d => d.x)
.attr('y', d => d.y)
.attr('width', d => d.width)
.attr('height', yScale.bandwidth())
.attr('fill', d => d.color);
svg.selectAll('text').data(yScale.domain())
.enter().append('text')
.attr('x', leftEdge - 4)
.attr('y', yScale)
.attr('dy', '1.2em')
.attr('fill-opacity', 0.26)
.style('font-family', 'sans-serif')
.style('text-anchor', 'end')
.text(d => d);
</script>
</body>
Raw
preview.png
�PNG

IHDR���D �IDATx����n$g�aw"�L& ��4Œ{`���Ȗb +�D�z�( �9����"5�$ ��=w��s_�_UҫZ,W�zx�~��_��9�� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @�b��֣G����|>z�������� @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @�b��֣G���z<z�}�g�/����� �w�0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 ��jZ������`��~z0z ���������GO�a� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� a�\M��#������ �}��d�����c���|:za������� @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @�b��֣G���O�'����FO`���p�}K�?��:z[���������� @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 ���r5�G�`s���|�6�ӧ�'�A��ys��zv8z����GO`�~����� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �HX,W�z���˃����;�x�vŗ�'p ������� \�/�=z�����iW� @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� a�\M��#�]���������������?����G���q���с�?�?�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$,��i=z�\=:~5z¬���j��zt�z����n�o�f���sx<��0_'�� f�×�GO��폞0[�� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A��X�����l���� ;m���� ;���w�'�ߛ���݈��f<7suz4z�n;}2z�N�w�t����F� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� a�\M��#v����� ;��t-O�7�'l�'�����m�ߦ�y��t-޻k���^���g�섏N=K��щ�t�� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �HX,W�z�m����� [�������g��O��7yF��w�۞�{F����kN�.FO�>g/F/�*��r��`�ror?��`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`�մ=b��oFO��������� C����������������:?�`���GO��t4z�P����`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`�մ=�]:�x3z�;up�v�w�������y�z}�f��j�c׻wq4z����=᝺{�:�c��0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 ���r5�G�ؤ�˷�'l��ż������ wt��� u8�gto/�^��ٟἯooo�gxvy5z��]�^�Y�/G/ظ��}�w/��wg~��� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A��X����������6b��5�k�j􄍘�Y��]1���b�紷7ϳzsy6z���:�`3.OF/�u߿��Yݽ��9����ݙ�u� @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @�b��֣Gܖ㫷�'܊�˯FO�5�d�8���L��l��jFgr�L��������t��3�3�3�3�s�L��?�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`�մ=�&N��=�FN�ގ�p#��w{���g(������]����tq�j􄛹:��fv|��j=�F����������ݾ��� �H�$`0 � @� A� �H�$`0 � @� A� �H�$`0 � @� A��?��$�3 $�IEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment