max-l/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
  path {fill: none;stroke: #000;stroke-width: 3px;}
  circle {fill: steelblue;stroke: #fff;stroke-width: 3px;}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

const points = [[71, 64],[124, 126],[130, 253]];

const pathStart = () => points[0]

const svg = d3.select("body").append("svg")
    .attr("width", 760)
    .attr("height", 500);

//d3v4 line generator that uses a cardinal-closed curve
const path = svg.append("path")
    .data([points])
    .attr("d", d3.line().curve(d3.curveCardinal));

// Notice how the transition is slow for the first
//  quarter of the aniimation
// is fast for the second and third quarters and is slow
//  again in the final quarter
// This is normal behavior for d3.transition()
const translateAlong = path => {
  const l = path.getTotalLength() ;
  return (d, i, a) => t => {
    const p = path.getPointAtLength(t * l)
    return `translate(${p.x},${p.y})`;
  };
}

//const circle = svg.append("circle")
//    .attr("r", 20)
//    .attr("transform", `translate(${points[0]})`);
//svg.selectAll(".point")
//    .data(points).enter().append("circle")
//    .attr("r", 4)
//    .attr("transform", d => `translate(${d})`);

const data = d3.range(10)
 .map(i => ({id:i,x:0,y:0}))

const sel = svg.selectAll("circle")
  .data(data);

const rnd = d3.randomUniform(500, 1500)

sel.enter()
  .append("circle")
  .attr("r", 10)
  .transition()
  .ease(d3.easeQuad)
  .delay(rnd)
  .duration(2000)
  .attrTween("transform", translateAlong(path.node()))


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<style>
	path {fill: none;stroke: #000;stroke-width: 3px;}
	circle {fill: steelblue;stroke: #fff;stroke-width: 3px;}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	const points = [[71, 64],[124, 126],[130, 253]];

	const pathStart = () => points[0]

	const svg = d3.select("body").append("svg")
	.attr("width", 760)
	.attr("height", 500);

	//d3v4 line generator that uses a cardinal-closed curve
	const path = svg.append("path")
	.data([points])
	.attr("d", d3.line().curve(d3.curveCardinal));

	// Notice how the transition is slow for the first
	// quarter of the aniimation
	// is fast for the second and third quarters and is slow
	// again in the final quarter
	// This is normal behavior for d3.transition()
	const translateAlong = path => {
	const l = path.getTotalLength() ;
	return (d, i, a) => t => {
	const p = path.getPointAtLength(t * l)
	return `translate(${p.x},${p.y})`;
	};
	}

	//const circle = svg.append("circle")
	// .attr("r", 20)
	// .attr("transform", `translate(${points[0]})`);
	//svg.selectAll(".point")
	// .data(points).enter().append("circle")
	// .attr("r", 4)
	// .attr("transform", d => `translate(${d})`);

	const data = d3.range(10)
	.map(i => ({id:i,x:0,y:0}))

	const sel = svg.selectAll("circle")
	.data(data);

	const rnd = d3.randomUniform(500, 1500)

	sel.enter()
	.append("circle")
	.attr("r", 10)
	.transition()
	.ease(d3.easeQuad)
	.delay(rnd)
	.duration(2000)
	.attrTween("transform", translateAlong(path.node()))


	</script>