mojaie/.block

## .block
license: mit

## index.html
<!DOCTYPE html>
<title>Buffer overflow</title>
<meta charset="utf-8"/>
<script src="https://d3js.org/d3.v4.min.js"></script>
<input type="button" id="start" value="Start"/>
<div class="container-fluid">
  <svg id="flame" width="500" height="500" preserveAspectRatio="xMidYMid meet" pointer-events="all" viewBox="0 0 300 300">
    <path stroke="#e5e5e5" id="svg_4" d="m19.81535,151.90297c49.03433,25.7502 30.86076,65.92051 56.57807,84.46065c25.7173,18.54014 126.52913,17.51014 151.21774,0c24.68861,-17.51014 -5.14346,-50.47039 48.34853,-83.43064c10.28692,-38.11029 21.60253,-92.70072 16.45907,-140.08108c-44.91955,19.57015 -215.59672,29.87023 -284.69055,-5.66504c-11.48707,32.44525 6.60077,112.78587 12.08713,144.71612z" stroke-width="5" fill="#e2ffff"/>
    <g id="field"></g>
  </svg>
</div>
<script src="main.js"></script>

## main.js

const data = [];

const simulation = d3.forceSimulation(data)
  .force('collide',d3.forceCollide().radius(10))
  .force('x', d3.forceX(150).strength(0.01))
  .force('y', d3.forceY(200).strength(0.1))
  .alphaTarget(0.1)
  .on('tick', tick);

function updateObjects() {
  const nodes = d3.select('#field').selectAll('.object')
    .data(data);
  nodes.exit().remove();
  const entered = nodes.enter().append('g')
    .attr('class', 'object')
    .on("click", () => {});
  entered.append('text')
    .attr('class', 'symbol')
    .attr('x', 0)
    .attr('y', 0)
    .attr('font-size', 20)
    .attr('text-anchor', 'middle')
    .text('💩');
  simulation.nodes(data);
}

function tick() {
  d3.select('#field').selectAll('.object')
    .attr('transform', d => `translate(${d.x}, ${d.y})`);
}

d3.select("#start").on("click", function() {
  d3.select(this).attr('disabled','disabled');
  const interval = d3.interval(() => {
    const x = 150 + ((Math.random() - 0.5) * 50);
    data.push({vx: 0, vy: 0, x: x, y: 100});
    updateObjects();
    if (data.length > 100) interval.stop();
  }, 200);
});

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<title>Buffer overflow</title>
	<meta charset="utf-8"/>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<input type="button" id="start" value="Start"/>
	<div class="container-fluid">
	<svg id="flame" width="500" height="500" preserveAspectRatio="xMidYMid meet" pointer-events="all" viewBox="0 0 300 300">
	<path stroke="#e5e5e5" id="svg_4" d="m19.81535,151.90297c49.03433,25.7502 30.86076,65.92051 56.57807,84.46065c25.7173,18.54014 126.52913,17.51014 151.21774,0c24.68861,-17.51014 -5.14346,-50.47039 48.34853,-83.43064c10.28692,-38.11029 21.60253,-92.70072 16.45907,-140.08108c-44.91955,19.57015 -215.59672,29.87023 -284.69055,-5.66504c-11.48707,32.44525 6.60077,112.78587 12.08713,144.71612z" stroke-width="5" fill="#e2ffff"/>
	<g id="field"></g>
	</svg>
	</div>
	<script src="main.js"></script>

	const data = [];

	const simulation = d3.forceSimulation(data)
	.force('collide',d3.forceCollide().radius(10))
	.force('x', d3.forceX(150).strength(0.01))
	.force('y', d3.forceY(200).strength(0.1))
	.alphaTarget(0.1)
	.on('tick', tick);

	function updateObjects() {
	const nodes = d3.select('#field').selectAll('.object')
	.data(data);
	nodes.exit().remove();
	const entered = nodes.enter().append('g')
	.attr('class', 'object')
	.on("click", () => {});
	entered.append('text')
	.attr('class', 'symbol')
	.attr('x', 0)
	.attr('y', 0)
	.attr('font-size', 20)
	.attr('text-anchor', 'middle')
	.text('💩');
	simulation.nodes(data);
	}

	function tick() {
	d3.select('#field').selectAll('.object')
	.attr('transform', d => `translate(${d.x}, ${d.y})`);
	}

	d3.select("#start").on("click", function() {
	d3.select(this).attr('disabled','disabled');
	const interval = d3.interval(() => {
	const x = 150 + ((Math.random() - 0.5) * 50);
	data.push({vx: 0, vy: 0, x: x, y: 100});
	updateObjects();
	if (data.length > 100) interval.stop();
	}, 200);
	});