Skip to content

Instantly share code, notes, and snippets.

@nbremer
Last active February 13, 2019 14:47
Show Gist options
  • Save nbremer/8e25e1434cdd6db25b69 to your computer and use it in GitHub Desktop.
Save nbremer/8e25e1434cdd6db25b69 to your computer and use it in GitHub Desktop.
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
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment