block by nbremer df7f87361bb7e297e751

Valentine's day Heart curve - One Line

Full Screen

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

index.html

<!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>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	
	</head>

	<body>
		<div id="chart"></div>

		<script type="text/javascript">
			window.onerror = function() {
				location.reload();
			}
			
			var margin = {top: 10, right: 10, bottom: 10, left: 10},
				docHeight = $(document).height() - margin.left - margin.right,
				docWidth  = $(document).width() - margin.top - margin.bottom;
			
			var	minSize = Math.min(500,(docWidth-40),(docHeight-40)),
				width = minSize,
				height = minSize;
			 
			//Create the datapoints with x en y positions for the circles 
			//Formula from //mathworld.wolfram.com/HeartCurve.html
			var x, y;
			var data = [];
			for (var i = 0; i < 350; i++) {
				t = i*0.1;
				x = 16 * Math.pow(Math.sin(t),3);
				y = 13 * Math.cos(t) - 5* Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)
				data[i] = [x,y];
			}//for i

			//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: //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>