Stroked/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">

  <script src="https://d3js.org/d3.v2.min.js"></script>
  <style>
    #chart3 {
    width: 960px;
    height: 180px;
    border: solid 1px #ccc;
}

.background {
    fill: none;
    pointer-events: all;
}

#chart3 line {
    shape-rendering: crispEdges;
}

#chart3 line {
    fill: none;
    stroke: #333;
}


    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <p id="chart3"></p>

  <script>
    (function() {
  d3.fisheye = {
    scale: function(scaleType) {
      return d3_fisheye_scale(scaleType(), 3, 0);
    },
    circular: function() {
      var radius = 200,
          distortion = 2,
          k0,
          k1,
          focus = [0, 0];

      function fisheye(d) {
        var dx = d.x - focus[0],
            dy = d.y - focus[1],
            dd = Math.sqrt(dx * dx + dy * dy);
        if (!dd || dd >= radius) return {x: d.x, y: d.y, z: 1};
        var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
        return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
      }

      function rescale() {
        k0 = Math.exp(distortion);
        k0 = k0 / (k0 - 1) * radius;
        k1 = distortion / radius;
        return fisheye;
      }

      fisheye.radius = function(_) {
        if (!arguments.length) return radius;
        radius = +_;
        return rescale();
      };

      fisheye.distortion = function(_) {
        if (!arguments.length) return distortion;
        distortion = +_;
        return rescale();
      };

      fisheye.focus = function(_) {
        if (!arguments.length) return focus;
        focus = _;
        return fisheye;
      };

      return rescale();
    }
  };

  function d3_fisheye_scale(scale, d, a) {

    function fisheye(_) {
      var x = scale(_),
          left = x < a,
          v,
          range = d3.extent(scale.range()),
          min = range[0],
          max = range[1],
          m = left ? a - min : max - a;
      if (m == 0) m = max - min;
      return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a;
    }

    fisheye.distortion = function(_) {
      if (!arguments.length) return d;
      d = +_;
      return fisheye;
    };

    fisheye.focus = function(_) {
      if (!arguments.length) return a;
      a = +_;
      return fisheye;
    };

    fisheye.copy = function() {
      return d3_fisheye_scale(scale.copy(), d, a);
    };

    fisheye.nice = scale.nice;
    fisheye.ticks = scale.ticks;
    fisheye.tickFormat = scale.tickFormat;
    return d3.rebind(fisheye, scale, "domain", "range");
  }
})();


(function chart3() {
  console.clear()
  var width = 960,
      height = 180,
      xSteps = d3.range(0, width, 16),
      ySteps = d3.range(0, height, 16);


  var xFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, width]).focus(0),
      yFisheye = d3.scale.linear().domain([0, height]);

  var svg = d3.select("#chart3").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(-.5,-.5)");

  svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height);

  var xLine = svg.selectAll(".x")
      .data(xSteps)
    .enter().append("line")
      .attr("class", "x")
      .attr("y2", height);

  redraw();

  svg.on("mousemove", function() {
    var mouse = d3.mouse(this);

    xFisheye.focus(mouse[0]);
    yFisheye(mouse[1]);
    redraw();
  });

  function redraw() {
    xLine.attr("x1", xFisheye).attr("x2", xFisheye);
  }
})();

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">

	<script src="https://d3js.org/d3.v2.min.js"></script>
	<style>
	#chart3 {
	width: 960px;
	height: 180px;
	border: solid 1px #ccc;
	}

	.background {
	fill: none;
	pointer-events: all;
	}

	#chart3 line {
	shape-rendering: crispEdges;
	}

	#chart3 line {
	fill: none;
	stroke: #333;
	}


	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<p id="chart3"></p>

	<script>
	(function() {
	d3.fisheye = {
	scale: function(scaleType) {
	return d3_fisheye_scale(scaleType(), 3, 0);
	},
	circular: function() {
	var radius = 200,
	distortion = 2,
	k0,
	k1,
	focus = [0, 0];

	function fisheye(d) {
	var dx = d.x - focus[0],
	dy = d.y - focus[1],
	dd = Math.sqrt(dx * dx + dy * dy);
	if (!dd \|\| dd >= radius) return {x: d.x, y: d.y, z: 1};
	var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
	return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
	}

	function rescale() {
	k0 = Math.exp(distortion);
	k0 = k0 / (k0 - 1) * radius;
	k1 = distortion / radius;
	return fisheye;
	}

	fisheye.radius = function(_) {
	if (!arguments.length) return radius;
	radius = +_;
	return rescale();
	};

	fisheye.distortion = function(_) {
	if (!arguments.length) return distortion;
	distortion = +_;
	return rescale();
	};

	fisheye.focus = function(_) {
	if (!arguments.length) return focus;
	focus = _;
	return fisheye;
	};

	return rescale();
	}
	};

	function d3_fisheye_scale(scale, d, a) {

	function fisheye(_) {
	var x = scale(_),
	left = x < a,
	v,
	range = d3.extent(scale.range()),
	min = range[0],
	max = range[1],
	m = left ? a - min : max - a;
	if (m == 0) m = max - min;
	return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a;
	}

	fisheye.distortion = function(_) {
	if (!arguments.length) return d;
	d = +_;
	return fisheye;
	};

	fisheye.focus = function(_) {
	if (!arguments.length) return a;
	a = +_;
	return fisheye;
	};

	fisheye.copy = function() {
	return d3_fisheye_scale(scale.copy(), d, a);
	};

	fisheye.nice = scale.nice;
	fisheye.ticks = scale.ticks;
	fisheye.tickFormat = scale.tickFormat;
	return d3.rebind(fisheye, scale, "domain", "range");
	}
	})();









	(function chart3() {
	console.clear()
	var width = 960,
	height = 180,
	xSteps = d3.range(0, width, 16),
	ySteps = d3.range(0, height, 16);



	var xFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, width]).focus(0),
	yFisheye = d3.scale.linear().domain([0, height]);

	var svg = d3.select("#chart3").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(-.5,-.5)");

	svg.append("rect")
	.attr("class", "background")
	.attr("width", width)
	.attr("height", height);

	var xLine = svg.selectAll(".x")
	.data(xSteps)
	.enter().append("line")
	.attr("class", "x")
	.attr("y2", height);

	redraw();

	svg.on("mousemove", function() {
	var mouse = d3.mouse(this);

	xFisheye.focus(mouse[0]);
	yFisheye(mouse[1]);
	redraw();
	});

	function redraw() {
	xLine.attr("x1", xFisheye).attr("x2", xFisheye);
	}
	})();

	</script>
	</body>