lsbardel/.block

## .block
license: bsd-3-clause

## README.md

      
    Raw
  

              README.md
            
          
    Same as Pan & Zoom Axes but on canvas, thanks to d3-canvas-transition module.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Axes on Canvas</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
    <script src="https://giottojs.org/d3-canvas-transition/0.3.1/d3-canvas-transition.js"></script>
</head>
<body>
  <div id="paper">
    <button>Reset</button>
      <label>
        <input id='svg' name="type" type="radio" checked>
        <span>svg</span>
      </label>
      <label>
        <input id='canvas' name="type" type="radio">
        <span>canvas</span>
      </label>
  </div>
  <div id="example" style="max-width: 960px"></div>
<script>
(function () {
    d3.select('#svg').on('click', function () {draw('svg');});
    d3.select('#canvas').on('click', function () {draw('canvas');});
    if (d3.resolution() > 1) {
        d3.select('#paper').append('label').html(
            "<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
        );
        d3.select('#canvas-low').on('click', function () {draw('canvas', 1);});
    }

    var example = d3.select("#example"),
        width = d3.getSize(example.style('width')),
        height = Math.min(500, width);

    draw('svg');

    function draw (type, r) {
        example.select('.paper').remove();
        var paper = example
                .append(type)
                .classed('paper', true)
                .attr('width', width).attr('height', height).canvasResolution(r).canvas(true);

        paper
            .style('stroke-opacity', 0.20)
            .style('stroke', 'black')
            .style("stroke-width", '1px')
            .style('shape-rendering', 'crispEdges')
            .append('defs')
            .append('linearGradient')
            .attr('id', 'linear-gradient')
            .attr('x1', '0%')
            .attr('y1', '0%')
            .attr('x2', '100%')
            .attr('y2', '100%')
            .selectAll('stop')
            .data(["#2c7bb6", "#00a6ca", "#00ccbc", "#90eb9d", "#ffff8c", "#f9d057", "#f29e2e", "#e76818", "#d7191c"])
            .enter()
            .append('stop')
            .attr('offset', function (c, i) {
                return 12.5 * i + '%';
            })
            .attr('stop-color', function (c) {
                return c;
            });

        var zoom = d3.zoom()
            .scaleExtent([1, 40])
            .translateExtent([[-100, -100], [width + 90, height + 100]])
            .on("zoom", zoomed);

        var x = d3.scaleLinear()
            .domain([-1, width + 1])
            .range([-1, width + 1]);

        var y = d3.scaleLinear()
            .domain([-1, height + 1])
            .range([-1, height + 1]);

        var xAxis = d3.axisBottom(x)
            .ticks((width + 2) / (height + 2) * 10)
            .tickSize(height)
            .tickPadding(8 - height);

        var yAxis = d3.axisRight(y)
            .ticks(10)
            .tickSize(width)
            .tickPadding(8 - width);

        var view = paper
            .append("rect")
            .style("fill", 'url(#linear-gradient)')
            .style("stroke-width", 0)
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", width)
            .attr("height", height);

        var gX = paper
            .append("g")
            .call(xAxis);

        var gY = paper.append("g")
            .call(yAxis);

        d3.select("button")
            .on("click", resetted);

        paper.call(zoom);

        function zoomed() {
            view.attr("transform", d3.event.transform);
            gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
            gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
        }

        function resetted() {
            paper
                .transition()
                .duration(750)
                .call(zoom.transform, d3.zoomIdentity);
        }
    }

}());
</script>
</body>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Axes on Canvas</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
	<script src="https://giottojs.org/d3-canvas-transition/0.3.1/d3-canvas-transition.js"></script>
	</head>
	<body>
	<div id="paper">
	<button>Reset</button>
	<label>
	<input id='svg' name="type" type="radio" checked>
	<span>svg</span>
	</label>
	<label>
	<input id='canvas' name="type" type="radio">
	<span>canvas</span>
	</label>
	</div>
	<div id="example" style="max-width: 960px"></div>
	<script>
	(function () {
	d3.select('#svg').on('click', function () {draw('svg');});
	d3.select('#canvas').on('click', function () {draw('canvas');});
	if (d3.resolution() > 1) {
	d3.select('#paper').append('label').html(
	"<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
	);
	d3.select('#canvas-low').on('click', function () {draw('canvas', 1);});
	}

	var example = d3.select("#example"),
	width = d3.getSize(example.style('width')),
	height = Math.min(500, width);

	draw('svg');

	function draw (type, r) {
	example.select('.paper').remove();
	var paper = example
	.append(type)
	.classed('paper', true)
	.attr('width', width).attr('height', height).canvasResolution(r).canvas(true);

	paper
	.style('stroke-opacity', 0.20)
	.style('stroke', 'black')
	.style("stroke-width", '1px')
	.style('shape-rendering', 'crispEdges')
	.append('defs')
	.append('linearGradient')
	.attr('id', 'linear-gradient')
	.attr('x1', '0%')
	.attr('y1', '0%')
	.attr('x2', '100%')
	.attr('y2', '100%')
	.selectAll('stop')
	.data(["#2c7bb6", "#00a6ca", "#00ccbc", "#90eb9d", "#ffff8c", "#f9d057", "#f29e2e", "#e76818", "#d7191c"])
	.enter()
	.append('stop')
	.attr('offset', function (c, i) {
	return 12.5 * i + '%';
	})
	.attr('stop-color', function (c) {
	return c;
	});

	var zoom = d3.zoom()
	.scaleExtent([1, 40])
	.translateExtent([[-100, -100], [width + 90, height + 100]])
	.on("zoom", zoomed);

	var x = d3.scaleLinear()
	.domain([-1, width + 1])
	.range([-1, width + 1]);

	var y = d3.scaleLinear()
	.domain([-1, height + 1])
	.range([-1, height + 1]);

	var xAxis = d3.axisBottom(x)
	.ticks((width + 2) / (height + 2) * 10)
	.tickSize(height)
	.tickPadding(8 - height);

	var yAxis = d3.axisRight(y)
	.ticks(10)
	.tickSize(width)
	.tickPadding(8 - width);

	var view = paper
	.append("rect")
	.style("fill", 'url(#linear-gradient)')
	.style("stroke-width", 0)
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", width)
	.attr("height", height);

	var gX = paper
	.append("g")
	.call(xAxis);

	var gY = paper.append("g")
	.call(yAxis);

	d3.select("button")
	.on("click", resetted);

	paper.call(zoom);

	function zoomed() {
	view.attr("transform", d3.event.transform);
	gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
	gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
	}

	function resetted() {
	paper
	.transition()
	.duration(750)
	.call(zoom.transform, d3.zoomIdentity);
	}
	}

	}());
	</script>
	</body>