A heart created with D3 and a nice formula found on Wolfram to celebrate Valentine's Day!
Last active
December 22, 2024 19:32
-
-
Save nbremer/8e25e1434cdd6db25b69 to your computer and use it in GitHub Desktop.
Valentine's day Heart curve
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
if we keep the size of the canvas, min of display hight and width, we can use it with onresize and it works better with all the display sizes.