nbremer/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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


## 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="http://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 http://mathworld.wolfram.com/HeartCurve.html
			var x, y;
			var data = [];
			for (var i = 0; i < 350; i++) {
				x = 16 * Math.pow(Math.sin(i),3);
				y = 13 * Math.cos(i) - 5* Math.cos(2*i) - 2 * Math.cos(3*i) - Math.cos(4*i)
				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: http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://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 http://mathworld.wolfram.com/HeartCurve.html
	var x, y;
	var data = [];
	for (var i = 0; i < 350; i++) {
	x = 16 * Math.pow(Math.sin(i),3);
	y = 13 * Math.cos(i) - 5* Math.cos(2i) - 2 Math.cos(3i) - Math.cos(4i)
	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: http://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>