abruzzi/.block

## .block
license: gpl-3.0

## d3-scale-radial.js
(function(global, factory) {
  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("d3-scale")) :
  typeof define === "function" && define.amd ? define(["exports", "d3-scale"], factory) :
  (factory(global.d3 = global.d3 || {}, global.d3));
}(this, function(exports, d3Scale) {
  'use strict';

  function square(x) {
    return x * x;
  }

  function radial() {
    var linear = d3Scale.scaleLinear();

    function scale(x) {
      return Math.sqrt(linear(x));
    }

    scale.domain = function(_) {
      return arguments.length ? (linear.domain(_), scale) : linear.domain();
    };

    scale.nice = function(count) {
      return (linear.nice(count), scale);
    };

    scale.range = function(_) {
      return arguments.length ? (linear.range(_.map(square)), scale) : linear.range().map(Math.sqrt);
    };

    scale.ticks = linear.ticks;
    scale.tickFormat = linear.tickFormat;

    return scale;
  }

  exports.scaleRadial = radial;

  Object.defineProperty(exports, '__esModule', {value: true});
}));

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-scale-radial.js"></script>
  <style>
    text {
      font-size: 14px;
      font-family: monospace;
    }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 10, bottom: 20, left: 10};

    var width = 960 - margin.left - margin.right,
    	height = 500 - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
    	.attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var g = svg.append("g")
    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var innerRadius = 100,
        outerRadius = Math.min(width, height) / 2 - 6;

    var fullCircle = 2 * Math.PI;

    var x = d3.scaleLinear().domain([0, 6]).range([0, fullCircle]);

    var points = [
        {value: 10},
        {value: 50},
        {value: 30},
        {value: 40},
        {value: 20},
        {value: 70},
        {value: 50}
    ];

    var y = d3.scaleRadial()
    		.range([innerRadius, outerRadius]);

    var line = d3.lineRadial()
    		.angle(function(d, i) { return x(i); })
            .radius(function(d) { return y(d.value); })
            .curve(d3.curveCardinal);

    x.domain(d3.extent(points, function(d, i) { return i; }));
  	y.domain(d3.extent(points, function(d) { return d.value; }));

      var linePlot = g.append("path")
      	.datum(points)
        .attr("fill", "none")
        .attr("stroke", "#4099ff")
        .attr("d", line);

      var yAxis = g.append("g")
          .attr("text-anchor", "middle");

      var yTick = yAxis
        .selectAll("g")
        .data(y.ticks(5))
        .enter().append("g");

      yTick.append("circle")
          .attr("fill", "none")
          .attr("stroke", "black")
      		.attr("opacity", 0.2)
          .attr("r", y);

      yAxis.append("circle")
      		.attr("fill", "none")
          .attr("stroke", "black")
      		.attr("opacity", 0.2)
          .attr("r", function() { return y(y.domain()[0])});

      var xAxis = g.append("g");

      var xTick = xAxis
        .selectAll("g")
        .data(x.ticks(12))
        .enter().append("g")
          .attr("text-anchor", "middle")
          .attr("transform", function(d) {
            return "rotate(" + ((x(d)) * 180 / Math.PI - 90) + ")translate(" + innerRadius + ",0)";
          });

      xTick.append("line")
        .attr("x2", -5)
        .attr("stroke", "#000");

      var lineLength = linePlot.node().getTotalLength();

      linePlot
        .attr("stroke-dasharray", lineLength + " " + lineLength)
        .attr("stroke-dashoffset", -lineLength)
        .transition()
          .duration(2000)
          .ease(d3.easeLinear)
          .attr("stroke-dashoffset", 0)
          .on("start", tick);

const random = d3.randomUniform(80);

function tick() {
    const value = random();
    points.push({value});

      // Redraw the line.
    d3.select(this)
      .attr("d", line)
      .attr("transform", null);

    // Slide it to the left.
    d3.active(this)
        .attr("transform", function(d) {
            return "rotate(" + ((x(-1)) * 180 / Math.PI) + ")";
          })
    //   .attr("transform", "translate(" + x(-1) + ",0)")
    .transition()
      .on("start", tick);

    points.shift();
}
  </script>
</body>
</html>
	(function(global, factory) {
	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("d3-scale")) :
	typeof define === "function" && define.amd ? define(["exports", "d3-scale"], factory) :
	(factory(global.d3 = global.d3 \|\| {}, global.d3));
	}(this, function(exports, d3Scale) {
	'use strict';

	function square(x) {
	return x * x;
	}

	function radial() {
	var linear = d3Scale.scaleLinear();

	function scale(x) {
	return Math.sqrt(linear(x));
	}

	scale.domain = function(_) {
	return arguments.length ? (linear.domain(_), scale) : linear.domain();
	};

	scale.nice = function(count) {
	return (linear.nice(count), scale);
	};

	scale.range = function(_) {
	return arguments.length ? (linear.range(_.map(square)), scale) : linear.range().map(Math.sqrt);
	};

	scale.ticks = linear.ticks;
	scale.tickFormat = linear.tickFormat;

	return scale;
	}

	exports.scaleRadial = radial;

	Object.defineProperty(exports, '__esModule', {value: true});
	}));
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="d3-scale-radial.js"></script>
	<style>
	text {
	font-size: 14px;
	font-family: monospace;
	}
	</style>
	</head>

	<body>
	<script>
	var margin = {top: 20, right: 10, bottom: 20, left: 10};

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var g = svg.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var innerRadius = 100,
	outerRadius = Math.min(width, height) / 2 - 6;

	var fullCircle = 2 * Math.PI;

	var x = d3.scaleLinear().domain([0, 6]).range([0, fullCircle]);

	var points = [
	{value: 10},
	{value: 50},
	{value: 30},
	{value: 40},
	{value: 20},
	{value: 70},
	{value: 50}
	];

	var y = d3.scaleRadial()
	.range([innerRadius, outerRadius]);

	var line = d3.lineRadial()
	.angle(function(d, i) { return x(i); })
	.radius(function(d) { return y(d.value); })
	.curve(d3.curveCardinal);

	x.domain(d3.extent(points, function(d, i) { return i; }));
	y.domain(d3.extent(points, function(d) { return d.value; }));

	var linePlot = g.append("path")
	.datum(points)
	.attr("fill", "none")
	.attr("stroke", "#4099ff")
	.attr("d", line);

	var yAxis = g.append("g")
	.attr("text-anchor", "middle");

	var yTick = yAxis
	.selectAll("g")
	.data(y.ticks(5))
	.enter().append("g");

	yTick.append("circle")
	.attr("fill", "none")
	.attr("stroke", "black")
	.attr("opacity", 0.2)
	.attr("r", y);

	yAxis.append("circle")
	.attr("fill", "none")
	.attr("stroke", "black")
	.attr("opacity", 0.2)
	.attr("r", function() { return y(y.domain()[0])});

	var xAxis = g.append("g");

	var xTick = xAxis
	.selectAll("g")
	.data(x.ticks(12))
	.enter().append("g")
	.attr("text-anchor", "middle")
	.attr("transform", function(d) {
	return "rotate(" + ((x(d)) * 180 / Math.PI - 90) + ")translate(" + innerRadius + ",0)";
	});

	xTick.append("line")
	.attr("x2", -5)
	.attr("stroke", "#000");

	var lineLength = linePlot.node().getTotalLength();

	linePlot
	.attr("stroke-dasharray", lineLength + " " + lineLength)
	.attr("stroke-dashoffset", -lineLength)
	.transition()
	.duration(2000)
	.ease(d3.easeLinear)
	.attr("stroke-dashoffset", 0)
	.on("start", tick);

	const random = d3.randomUniform(80);

	function tick() {
	const value = random();
	points.push({value});

	// Redraw the line.
	d3.select(this)
	.attr("d", line)
	.attr("transform", null);

	// Slide it to the left.
	d3.active(this)
	.attr("transform", function(d) {
	return "rotate(" + ((x(-1)) * 180 / Math.PI) + ")";
	})
	// .attr("transform", "translate(" + x(-1) + ",0)")
	.transition()
	.on("start", tick);

	points.shift();
	}
	</script>
	</body>
	</html>