Valentine's day Heart curve - One Line

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 the Spirograph heart the gets animated can be found here

<!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); 
			
			//Create the dots that make the heart	  
			/*var dots = svg.append("g").selectAll("circle")
				  .data(data)
				  .enter().append("circle")
					  .attr("cx", function (d,i) { return xScale(d[0]); } )
					  .attr("cy", function (d) { return yScale(d[1]); } )
					  .attr("r", 2);
			*/
			//Create and draw the path that connects the dots
			//From: https://stackoverflow.com/questions/13893127/how-to-draw-a-path-smoothly-from-start-point-to-end-point-in-d3-js
			var line = d3.svg.line()
					  .interpolate('linear')
					  .x(function(d){ return xScale(d[0]) })
					  .y(function(d){ return yScale(d[1]) });
					  
			var path = svg.append("g").append("path")
				  .attr("d", line(data));
				  
			/*var totalLength = path.node().getTotalLength();	  
			path
			  .attr("stroke-dasharray", totalLength + " " + totalLength)
			  .attr("stroke-dashoffset", totalLength)
			  .transition()
				.duration(12e4).delay(500)
				.ease("linear")
				.attr("stroke-dashoffset", 0);
			*/
	</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