A heart created with D3 and a nice formula found on Wolfram to celebrate Valentine's Day!
-
-
Save RaSan147/275d074038ecfbe0d55accf7311ac009 to your computer and use it in GitHub Desktop.
Valentine's day Heart curve
This file contains 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="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script type="text/javascript"> | |
| var margin = { top: 10, right: 10, bottom: 10, left: 10 }, | |
| docHeight = ($(document).height() - margin.left - margin.right) * 0.6, | |
| docWidth = ($(document).width() - margin.top - margin.bottom) * 0.6; | |
| var minSize = Math.min(500, (docWidth - 40), (docHeight - 40)), | |
| width = minSize, | |
| height = minSize; | |
| var minChartSize = Math.min(docWidth, docHeight); | |
| //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 | |
| // Function to draw the heart | |
| function drawHeart() { | |
| // 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', minChartSize) | |
| .attr('height', minChartSize) | |
| .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(' + (minChartSize / 2 - width / 2) + ',' + (minChartSize / 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) | |
| .style("opacity", 0) // Initially set the opacity to 0 | |
| .transition() | |
| .delay(function (d, i) { return i * 10; }) // Delay each dot by 10ms times its index | |
| .duration(500) // Duration of the transition | |
| .style("opacity", 1); // Transition to full opacity | |
| // Create and draw the path that connects the dots | |
| var line = d3.svg.line() | |
| .interpolate('linear') | |
| .x(function (d) { return xScale(d[0]); }) | |
| .y(function (d) { return yScale(d[1]); }); | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "line") | |
| .attr("d", line) | |
| .attr("stroke-dasharray", function () { return this.getTotalLength(); }) | |
| .attr("stroke-dashoffset", function () { return this.getTotalLength(); }) | |
| .transition() | |
| .duration(60000) // Change this value to a smaller duration, e.g., 60000 for 60 seconds | |
| .delay(500) | |
| .ease("linear") | |
| .attr("stroke-dashoffset", 0); | |
| } | |
| // Initial draw | |
| drawHeart(); | |
| window.onresize = function (event) { | |
| docHeight = ($(document).height() - margin.left - margin.right) * 0.6; | |
| docWidth = ($(document).width() - margin.top - margin.bottom) * 0.6; | |
| minSize = Math.min(500, (docWidth - 40), (docHeight - 40)); | |
| width = minSize; | |
| height = minSize; | |
| minChartSize = Math.min(docWidth, docHeight); | |
| d3.select("svg").remove(); | |
| drawHeart(); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment