larsvers/.block

## .block
license: mit
height: 500
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Thin brushable line

Made with blockup

  
## dist.css
*{box-sizing:border-box}

## dist.js
!function(n){function t(a){if(c[a])return c[a].exports;var e=c[a]={i:a,l:!1,exports:{}};return n[a].call(e.exports,e,e.exports,t),e.l=!0,e.exports}var c={};t.m=n,t.c=c,t.i=function(n){return n},t.d=function(n,c,a){t.o(n,c)||Object.defineProperty(n,c,{configurable:!1,enumerable:!0,get:a})},t.n=function(n){var c=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(c,"a",c),c},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=0)}([function(module,exports,__webpack_require__){"use strict";eval("\n\nvar margin = { top: 0, right: 30, bottom: 0, left: 30 };\nvar width = 760 - margin.left - margin.right;\nvar height = 50 - margin.top - margin.bottom;\n\nvar svg = d3.select('body').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).style('border', '1px solid grey');\n\nvar g = svg.append('g').attr('class', 'brush').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');\n\nvar brush = d3.brushX().extent([[0, 0], [width, height]]).on('end', function () {\n  return console.log(d3.event.selection);\n}).on('brush', function () {\n  return brushing;\n});\n\ng.append('line').attr('x1', 0).attr('x2', width).attr('y1', height / 2).attr('y2', height / 2).style('stroke-width', 1).style('stroke', 'tomato');\n\ng.call(brush);\n\nfunction brushing() {\n\n  d3.select('rect.selection').attr('y', height / 2 - 1).attr('height', 2);\n}//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zY3JpcHQuanM/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBtYXJnaW4gPSB7IHRvcDogMCwgcmlnaHQ6IDMwLCBib3R0b206IDAsIGxlZnQ6IDMwIH07XG5jb25zdCB3aWR0aCA9IDc2MCAtIG1hcmdpbi5sZWZ0IC0gbWFyZ2luLnJpZ2h0O1xuY29uc3QgaGVpZ2h0ID0gNTAgLSBtYXJnaW4udG9wIC0gbWFyZ2luLmJvdHRvbTtcblxuY29uc3Qgc3ZnID0gZDNcbiAgLnNlbGVjdCgnYm9keScpXG4gIC5hcHBlbmQoJ3N2ZycpXG4gIC5hdHRyKCd3aWR0aCcsIHdpZHRoICsgbWFyZ2luLmxlZnQgKyBtYXJnaW4ucmlnaHQpXG4gIC5hdHRyKCdoZWlnaHQnLCBoZWlnaHQgKyBtYXJnaW4udG9wICsgbWFyZ2luLmJvdHRvbSlcbiAgLnN0eWxlKCdib3JkZXInLCAnMXB4IHNvbGlkIGdyZXknKTtcblxuY29uc3QgZyA9IHN2Z1xuICAuYXBwZW5kKCdnJylcbiAgLmF0dHIoJ2NsYXNzJywgJ2JydXNoJylcbiAgLmF0dHIoJ3RyYW5zZm9ybScsIGB0cmFuc2xhdGUoJHttYXJnaW4ubGVmdH0sICR7bWFyZ2luLnRvcH0pYCk7XG5cbmNvbnN0IGJydXNoID0gZDMuYnJ1c2hYKClcbiAgLmV4dGVudChbWzAsIDBdLCBbd2lkdGgsIGhlaWdodF1dKVxuICAub24oJ2VuZCcsICgpID0+IGNvbnNvbGUubG9nKGQzLmV2ZW50LnNlbGVjdGlvbikpXG4gIC5vbignYnJ1c2gnLCAoKSA9PiBicnVzaGluZyk7XG5cblxuZy5hcHBlbmQoJ2xpbmUnKVxuICAuYXR0cigneDEnLCAwKVxuICAuYXR0cigneDInLCB3aWR0aClcbiAgLmF0dHIoJ3kxJywgaGVpZ2h0LzIpXG4gIC5hdHRyKCd5MicsIGhlaWdodC8yKVxuICAuc3R5bGUoJ3N0cm9rZS13aWR0aCcsIDEpXG4gIC5zdHlsZSgnc3Ryb2tlJywgJ3RvbWF0bycpXG5cbmcuY2FsbChicnVzaClcblxuXG5mdW5jdGlvbiBicnVzaGluZygpIHtcblxuICBkMy5zZWxlY3QoJ3JlY3Quc2VsZWN0aW9uJykuYXR0cigneScsIGhlaWdodC8yLTEpLmF0dHIoJ2hlaWdodCcsMilcbiAgXG59XG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gc2NyaXB0LmpzIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQU1BO0FBQ0E7QUFJQTtBQUVBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFFQTtBQUNBO0FBT0E7QUFDQTtBQUVBO0FBQ0E7QUFDQTtBQUVBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///0\n")}]);

## index.html
<!DOCTYPE html>
<title>blockup</title>
<link href='dist.css' rel='stylesheet' />
<body>
  <script src='https://d3js.org/d3.v5.min.js'></script>
  <script src='dist.js'></script>
</body>

## package.json
{
  "standard": {
    "globals": [
      "d3"
    ]
  }
}

## preview.png

      
    Raw
  

              preview.png
            
          
## script.js
const margin = { top: 0, right: 30, bottom: 0, left: 30 };
const width = 760 - margin.left - margin.right;
const height = 50 - margin.top - margin.bottom;

const svg = d3
  .select('body')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .style('border', '1px solid grey');

const g = svg
  .append('g')
  .attr('class', 'brush')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

const brush = d3.brushX()
  .extent([[0, 0], [width, height]])
  .on('end', () => console.log(d3.event.selection))
  .on('brush', () => brushing);


g.append('line')
  .attr('x1', 0)
  .attr('x2', width)
  .attr('y1', height/2)
  .attr('y2', height/2)
  .style('stroke-width', 1)
  .style('stroke', 'tomato')

g.call(brush)


function brushing() {

  d3.select('rect.selection').attr('y', height/2-1).attr('height',2)

}

## style.styl
*
  box-sizing border-box

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<title>blockup</title>
	<link href='dist.css' rel='stylesheet' />
	<body>
	<script src='https://d3js.org/d3.v5.min.js'></script>
	<script src='dist.js'></script>
	</body>
	const margin = { top: 0, right: 30, bottom: 0, left: 30 };
	const width = 760 - margin.left - margin.right;
	const height = 50 - margin.top - margin.bottom;

	const svg = d3
	.select('body')
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.style('border', '1px solid grey');

	const g = svg
	.append('g')
	.attr('class', 'brush')
	.attr('transform', `translate(${margin.left}, ${margin.top})`);

	const brush = d3.brushX()
	.extent([[0, 0], [width, height]])
	.on('end', () => console.log(d3.event.selection))
	.on('brush', () => brushing);


	g.append('line')
	.attr('x1', 0)
	.attr('x2', width)
	.attr('y1', height/2)
	.attr('y2', height/2)
	.style('stroke-width', 1)
	.style('stroke', 'tomato')

	g.call(brush)


	function brushing() {

	d3.select('rect.selection').attr('y', height/2-1).attr('height',2)

	}