Valentine's day Heart curve

A heart created with D3 and a nice formula found on Wolfram to celebrate Valentine's Day!

The blog can be found here
The second example of a heart from one sharp line can be found here

forked from nbremer's block: Valentine's day Heart curve

<!DOCTYPE html>
<html>
	<head>
	<title>D3.js Valentines day</title>
	<style>
		body{
		}
		
		chart{
			display: block;
			margin-left:auto; 
			margin-right: auto;
		}
		
		text {
			text-anchor: middle;
			fill: #8A0707;
			font-size: 28px;
			/*font-weight: 700;*/
			opacity: 0.9;
		}

path{
			stroke: #8A0707;
			stroke-width: 1;
			fill: none;
			opacity: 0.4;
		}

circle {
			fill: #8A0707;
			opacity: 0.9;
		}
	</style>

//Scales
			var xScale = d3.scale.linear()
					  .domain([d3.min(data, function(d) { return d[0]; }), d3.max(data, function(d) { return d[0]; })])
					  .range([ 0, width ]);

var yScale = d3.scale.linear()
					  .domain([d3.min(data, function(d) { return d[1]; }), d3.max(data, function(d) { return d[1]; })])
					  .range([ height, 0 ]);

//Initiate the SVG
			var chart = d3.select('#chart')
				.append('svg')
				.attr('width', docWidth)
				.attr('height', docHeight)
				.attr('class', 'chart')
				.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
				
			//Initiate the group that will hold all the dots and lines
			var svg = chart.append('g')
				.attr('transform', 'translate(' + (docWidth/2-width/2) + ',' + (docHeight/2-height/2) + ')')
				.attr('width', width)
				.attr('height', height); 
      
      
			///////////////////////////////////////////////////////////////////////////
			//////////////////// Make the circles move in a pattern ///////////////////
			///////////////////////////////////////////////////////////////////////////

//Wrapper for the circles
			var circleWrapper = svg.append("g")
					.attr("class", "circleWrapper")
					.style("isolation", "isolate");

function runInfinity() {

//Create new particles
				for (var j = 0; j < Math.round(Math.random()*16); j++) spawn(data[counter].x, data[counter].y);

//Remove non-alive particles
				particles = particles.filter(function(d) { return d.alive; });

//DATA JOIN
				//Join new data with old elements, if any
				var circleGroup = circleWrapper.selectAll(".particle")
					.data(particles, function(d) { return d.id; });
			  
				//UPDATE
				circleGroup
					.style("mix-blend-mode", colorMode)
					.each(move)
					.transition("move").duration(50).ease("linear")
					.attr("cx", function (d) { return xScale(d[0]); } )
					  .attr("cy", function (d) { return yScale(d[1]); } )
					.attr("r", function(d) { return d.radius; });	
			
				//ENTER 
				circleGroup
					.enter().append("circle")
					.attr("class", "particle")
					.attr("cx", function (d) { return xScale(d[0]); } )
					  .attr("cy", function (d) { return yScale(d[1]); } )
					.style("fill", function(d) { return d.color; })
					.style("mix-blend-mode", colorMode)
					.attr("r", function(d) { return d.radius; });
						
				//EXIT
				circleGroup.exit().remove();

counter = (counter + 1)%data.length;

}//runInfinity

//Create an interval that runs along the infinity path
			var loopInfinity = setInterval(runInfinity , 50);

//Create a particle
      //Code heavily based on https://codepen.io/soulwire/pen/foktm
			//Calculates new position
			function move(d) {

d.x += d.vx;
				d.y += d.vy;

d.vx *= d.drag;
				d.vy *= d.drag;

d.theta += getRandomNumber( -0.5, 0.5 ) * d.wander;
				d.vx += Math.sin( d.theta ) * 0.5;
				d.vy += Math.cos( d.theta ) * 0.5;

d.radius *= d.age;
				d.alive = d.radius > 0.5;

}//move
      
			function spawn ( x, y ) {
				//Play around with these numbers to get different effects
				particle = {
					x: x,
					y: y,
					id: ID,
					alive: true,
					radius: getRandomNumber( circeRanges[0], circeRanges[1] ),
					wander: getRandomNumber( 1, 1.5 ),
					color: colors[ Math.round( getRandomNumber(0, colors.length-1)) ],
					drag: getRandomNumber( 0.2, 0.99 ),
					age: getRandomNumber( 0.92, 0.98 ),
					theta: getRandomNumber( 0,  2 * Math.PI ),
					force: getRandomNumber( forceRanges[0], forceRanges[1] )
				};

ID += 1;

particle.vx = Math.sin( particle.theta ) * particle.force;
				particle.vy = Math.cos( particle.theta ) * particle.force;

particles.push( particle );
			}//spawn

function getRandomNumber(start, end) {
			    return ((Math.random() * (end-start)) + start);
			}

</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js